Seiten erstellen + anordnen

Im Gegensatz zu den Posts dienen Seiten lediglich als zusätzliche Information zu einem Blog. Sie sind statisch, obwohl man Seiten natürlich auch aktualisieren/bearbeiten kann, was heißt das sie an sich unverändert bleiben. Wenn ihr eine oder mehrere (bei Blogger sind bis zu 20 Seiten möglich) Seiten anlegen wollte, geht ihr über >Design auf >Seiten.

Post bearbeiten und neues Label hinzufügen

Anhand der folgenden Screenshots erkläre ich euch, wie ihr bei einem bereits veröffentlichten Post ein neues Label hinzufügen könnt.

Antivirenschutz für den PC - wieso?

Erstaunlicherweise gibt es tatsächlich noch Leute, die ohne Antivirenschutz ins Internet gehen. Aus diesem Grunde fühle ich mich fast schon gedrängt, dazu ein paar Worte zu schreiben: ein Antivirenprogramm ist nicht nur zweckmäßig, es ist ein Muss für jeden PC, mit dem man im Internet unterwegs ist! Ob man nur 2 Minuten, 2 Stunden oder den halben Tag am Stück im www verbringt spielt dabei keine Rolle, denn einen Virus fängt man sich ganz schnell ein, ohne das man vorher gewarnt wird oder etwas davon mitbekommt!

Über den Begriff "kostenlose Antivirenprogramme" findet ihr bei der gängigen Suchmaschine rasch vielerlei

Blogger: neue Oberfläche / neuen Post verfassen

Über > Design ruft ihr euer > Dashboard auf.

Hier wählt ihr nun aus, welches eurer Blogs ihr betreten wollt. Wer nur ein Blog betreibt, hat dementsprechend auch nur ein Blog zus Auswahl! ;)

Nun öffnet sich links eine Linkliste mit den Blogoptionen. Ihr wählt > Post aus und geht nach links oben auf das Bleistift-Symbol:

Bild klick zum Vergrößern!

Die Bearbeitungsoptionen wie "Vorschau", "Speichern" und "Veröffentlichen" befinden sich nun oberhalb des Postbereichs. Ansonsten gibt es kaum Unterschiede zur alten Benutzeroberfläche.

Bild klick zum Vergrößern

google Chrome: plugin Seite aufrufen

Geht in das große Adressfeld von Chrome. Dort gebt ihr ein:
chrome://plugins

Mit Klick auf 'Enter' wird euch die Seite mit allen aktivierten Plugins angezeigt. Hier könnt ihr nun einzeln auswählen, welches Plugin ihr bearbeiten wollt (z. B. deaktivieren, löschen etc.).

Bilder klick zum Vergrößern

Seite anwählen

Plugin Seite geöffnet

Blogger: neue Benutzeroberfläche / Post bearbeiten

Geht über eure Blog-Seite auf "Design". Dort klickt ihr auf "Posts". Ihr seht den Post-Titel. Wenn ihr mit der Maus darüber fahrt, hovert unterhalb des Titels die Möglichkeit zur Bearbeitung.

Geht auf "Bearbeiten", um euren Post zu editieren. Die "Ansicht" öffnet den Post unterhalb des Titels; "Löschen" spricht für sich! ;)

Blogger: neue Benutzeroberfläche / Vorlagendesigner

Geht über eure Blog-Seite auf "Design". Nicht wie gewohnt in der alten Vorlage sind die Reiter oberhalb angeordnet, sondern befinden sich in der neuen Benutzeroberfläche auf der linken Seite.

Wenn ihr auf  "Vorlage" klickt, öffnet sich oben gezeigtes Bild. Über "Anpassen" gelangt ihr zum Vorlagendesigner, in dem ihr weiterhin erweiterte Anpassungen (Farben, Schrift), die Layout-Anordnung für die Seitenelemente, die Breite des Blogs und den Hintergrund vornehmen könnt.

Blogger/Blogspot: neue Benutzeroberfläche/ Seitenelemente anordnen

Sicher habt ihr sie alle gesehen, die Anzeige in eurem Dashboard:

Wann die neue Benutzeroberfläche für alle Blogs aktualisiert aufgespielt wird, steht in den Sternen. Sicher ist nur eines: sie wird kommen! ;)

Vielleicht hat der ein oder andere sie schon ausprobiert. Für mich persönlich ist es ein Verlust an Übersichtlichkeit, da die alte Oberfläche schön angeordnet war. Möglicherweise ein wenig umständlich, man muss mehr klicken, aber wenn man sich daran gewöhnt hat bedeutet die neue Oberfläche eine große Umstellung. Damit ihr also nicht einfach ins kalte Wasser geworfen werdet, werden wir uns in den nächsten Tutis mal ein wenig einfühlen in diese neue Oberfläche!

Wir beginnen mit den Seiteneltementen (Gadgets/Widgets):

Anzahl der Kommentare wieder anzeigen

Zur Zeit gibt es einen kleinen temporären Hänger bei Blogger/Blogspot. Ihr werdet es selber schon festgestellt haben: die Anzahl der Kommentare, die zu einem eurer Posts gemacht wurden, wird nicht mehr angezeigt. Stattdessen steht dort nur noch " Kommentare".

Geht in den HTML-Bereich und setzt ein Häkchen bei 'Widget-Vorlagen komplett anzeigen'

Sucht die Stelle <data:post.commentLabelFull/>

Diese Stelle ersetzt ihr nun durch diesen Code

<b:if cond='data:post.numComments == 1'>1 Kommentar<b:else/><b:if cond='data:post.numComments == 0'>0 Kommentare<b:else/><data:post.numComments/> Kommentare</b:if></b:if>

Nun wird euch die Anzahl der Kommentare wieder angezeigt. Ihr könnt die Textstelle "Kommentare" auch durch einen Begriff ersetzen, der bei euch unter den Posts angezeigt werden soll (z. B. Meinung oder Senf dazugegeben oder Blubberbla...) 

Schnellsuche für html-Bereich

Mit der Taste "F3" oder der Tastenkombination "CTRL + F" bzw. "STRG + F" könnt ihr die Schnellsuche für den HTML-Bereich aktivieren. Das kleine Fenster öffnet sich rechts oben in der Ecke und sieht dann so aus:

hier gebt ihr die gesuchte Stelle ein

die orangefarben markierte Stelle zeigt den Code an,
den ihr in der Suche eingegeben habt

So erreicht ihr ohne lange Sucherei die richtige Stelle im HTML-Bereich. Wichtig: einige Teil-Codes wiederholen sich! Seht also genau nach, ob es wirklich die Stelle ist, die ihr bearbeiten wollt!

JavaScript aktivieren Chrome/FireFox

Um JavaScript in eurem Browser zu aktivieren (oder deaktivieren) geht ihr folgendermaßen vor:

einfaches Klick-Dropdown-Menü

Wieder einmal ein Menü! Diesmal handelt es sich um ein sehr schlichtes, einfaches Menü, das keine Hover-Funktion bietet. Dieses Menü könnt ihr innerhalb von wenigen Minuten erstellen und in ein html-Gadget an die Stelle schieben, an der es angezeigt werden soll. Keine HTML-Kenntnisse erforderlich!

So sieht das Menü aus:
Home

klick hier > ----------------- Menü 1 Menü 2 Menü 3

Im Folgenden erkläre ich euch, welche Stellen ihr bearbeiten könnt, um dieses Menü eurem Blog anzupassen.

Haustiere für's Blog

Hier zwei Beispiele für echt schnuckelige "Haustiere", die ihr euch in ein html-Gadget einbauen könnt.

Laufschrift erstellen

Mit ein paar wenigen, einfachen Befehlen könnt ihr euch ganz easy eine Laufschrift erstellen.

Blogger CSS-Java-Dropdown Menü einbauen und bearbeiten

Hier habe ich noch ein Aufklapp-Menü gefunden:  Dieses Menü ist Java-basiert!

Ein Beispiel, wie es aussehen könnte, findet ihr hier auf meiner Testseite (klick). In diesem Tutorial erkläre ich euch - für alle, die sich weder gut in CSS noch HTML auskennen, noch die dem Englischen mächtig sind - wie ihr das Menü einbaut und was ihr verändern müßt, um das Menü eurem Style anzupassen.

Dropdown Menü einbauen/ CSS Menü

Vorweg: nehmt euch für den Einbau eures Menüs Zeit! Gehuddel bringt hier nichts, und das geht auch nicht zackzack, hoppladihopp! Immerhin soll das Ergebnis nicht nur funktional, sondern auch individuell sein. Ein 08/15-Menü kann man mit den einfachsten Generatoren erstellen, und dementsprechend sieht es auch aus! ;)

Mein Beispielmenü seht ihr hier (klick)
Und hier könnt ihr euch in wenigen Schritten ein kostenloses Dropdown-Menü erstellen: www.cssmenumaker.com

Wenn man sich ein Design ausgesucht hat, gibt man seine Zielorte (=Links) ein. Die Farben etc. werden erst

Text für Kommentarfeld ändern

Ihr wollt einen anderen Text für euer Kommentarfeld? Beispielsweise sowas hier:

Spoiler Box

Um ewig lange Texte zu vermeiden, könnt ihr einen Spoiler benutzen (besonders gut kommt sowas bei Film- oder Buchrezensionen ;)). Dazu fügt ihr folgenden Code in den Post-html ein:

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">dein Titel <input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px/Größe des Buttons;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Text für Button'; }" type="button"> </div><br /><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;background: #transparent none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: Schriftfarbe innerhalb des Spoilers; line-height: 1.5em;"><div style="display:none;">hier deinen Text<br /></div></div></div>

Zur Veranschaulichung:

so sieht es aus

Hier kommt euer Text rein! :)

Im sichtbaren Post-Bereich könnt ihr auch in das Kästchen schreiben. Dieser Text ist dann auch ohne Klick auf den Button sichtbar.

Viel Spaß damit!

Rahmen um Bilder entfernen

Damit der graue (oder weiße, schwarze...) Rahmen um die geposteten Bilder verschwindet, müßt ihr wieder ein bißchen eure html-Kenntnisse erweitern. ;)

► Design
► HTML bearbeiten
► unter dem Abschnitt /* Posts folgendes suchen:

-moz-box-shadow: 0  0  $ (image.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0  0  $ (image.shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0  0  $ (image.shadow.spread) rgba(0, 0, 0, .2);
► nun ersetzt ihr das $ durch none

Der Code sollte dann folgendermaßen aussehen:

-moz-box-shadow: none(image.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: none(image.shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: none(image.shadow.spread) rgba(0, 0, 0, .2);

Nun ist der Rahmen um gifs und Bilder entfernt.


Anmerkung: Die Werte beziehen sich auf die Awesome Inc. Vorlage! Möglich ist, das in anderen Vorlagen andere Werte angegeben sind. Das könnt ihr außer Acht lassen!

Bild mit Link

Hier der Code, um ein Bild mit einem Link zu versehen. Bei Klick wird man auf eine andere Seite weitergeleitet:

<a href="LINK" target="_blank"><img src="BILD-URL" </a>


Wer noch einen Tooltip dabei haben möchte nehme diesen Code:

<a href="LINK" target="_blank"><img src="BILD-URL" title="TEXT BEI MOUSEOVER"></a>


Sollte sich der Link nicht wie gewünscht in einem neuen Fenster öffnen, dann schaut bitte hier nach: html: Link in neuem Fenster öffnen

Wer seinen Link im selben Fenster geöffnet haben will, nehme diese Änderung vor:

<a href="LINK" target="_self"><img src="BILD-URL" </a>