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.

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

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!

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.

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

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>

Link in Kommentarfeld einfügen

Vorweg: Dies ist keine Anleitung, um wild mit Links um sich zu schmeißen!

Manchmal bietet es sich ja an - beispielsweise weil man auf seinem Blog das oder ein ähnliches Thema ebenfalls schon mal niedergeschrieben hat - einen Link in einem Kommentarfeld bei einem anderen BloggerIn zu hinterlassen.

Kommentarfelder bieten jedoch nur eine begrenzte Anzahl an möglichen Tags und erlauben keine html-Codes. Mit diesem kurzen und knappen Code könnt ihr einen Link ins Kommentarfeld einsetzen:

<a href="URL">TEXT</a>

url = Link-Adresse / Text = der sichtbare Text*

*Beispiel: eine Webseite über Kaninchen soll verlinkt werden, so könnt ihr als Text "Kaninchen" eingeben

nach oben Beförderungs-Button

Aktive BloggerInnen werden's kennen: man möchte, das auch ältere Posts gelesen werden und erweitert die Post-Anzeige auf der Startseite auf 7, auf 10, auf 15... und das Blog wird länger und länger und länger... Ist man dann mal unten angekommen, geht das lästige Ziehen der Scroll-Leiste los: Maustaste gedrückt halten, Krämpfe bahnen sich an.

Doch dem kann natürlich Abhilfe geschaffen werden!^^ Mit einem einfach Button, bei dessen Betätigung man direkt wieder zum Anfang der Seite gebeamt wird. Praktisch, dekorativ und individuell anpassbar! Und das Beste daran: es ist echt easy!

Alles beginnt mal wieder mit einem Code:

Header Gadget

Vor einiger Zeit habe ich meinen Header bearbeitet. Allein mit der Bildgröße habe ich ein wenig rumgespielt, und als ich dann nach einer gewissen Weile gedankenlos auf "löschen" geklickt habe, war mein Header - inkl. Blog-Titel & Beschreibung - verschwunden. Gelöscht eben. ;)

Über das Hilfeforum habe ich nichts erreicht - nein, man wußte angeblich nicht einmal, wovon ich spreche.

Heute jedoch war ich erfolgreich. Selbst ist die Frau!^^ Wem es also so oder ähnlich ergangen ist und nun verzweifelt nach seinem Header-Gadget/-Widget sucht, der gehe bitte in den ➨ Design-Bereich und klicke auf ➨ Gadget hinzufügen. Auf der 2. Seite der gängigen Gadget-Liste findet ihr dieses hier:

➨ Seitenkopfzeile

Dies ist das Header-Gadget.

Et voilà! Da ist es wieder! :o)

Numerierte Seiten-Navigation/ Einbau

Um eine numerierte Seiten-Navigation zu erstellen,
benötigt ihr drei Teile:

Hintergrund bei Bildern entfernen

Bei einigen Vorlagen gibt es die Möglichkeit, über den Vorlagendesigner die ►Hintergrundfarbe und die ►Rahmenfarbe auf "transparent" zu schalten.

In Vorlagen, in denen es diese Option nicht gibt, ist es unablässig ein wenig im html-Bereich zu friemeln, wenn man den lästigen Rahmen/Hintergrund bei seinen Bildern/gifs wegbekommen möchte.


► Design
► html bearbeiten
► unter dem Abschnitt /* Posts folgendes suchen:
     .post-body img {
  padding: 8px;
  background: $(image.background.color);
  border: 1px solid $(image.border.color);

► an der Stelle "background: $(image.background.color);" dieses Zeichen "$" durch transparent ersetzen. Die Zeile muß dann so aussehen:
     background: transparent; (image.background.color);

Vor dem Abspeichern bitte erst in der Vorschau anzeigen lassen, ob es funktioniert!

Tooltip erstellen (Text bei Mouseover)

Lange hab ich gesucht - nun hab ich es endlich geschafft. Und deshalb - das Internet ist voll von Fragen nach einem Tooltip - hier meine kleine Anleitung, wie ihr einen Text für ein Bild bei Mouseover erstellen könnt. Natürlich ganz ohne elend lange Java-Scrips und ohne Fummelei im html-Bereich! ;)

Hintergrund nicht mitscrollen

Bei einigen Vorlagen im Vorlagendesigner ist die Option bereits gegeben, das der Hintergrund nicht mitscrollt. Doch wenn man sein eigenes Bild als Hintergrund einfügt, scrollt dieser meist mit. Hier die - ziemlich simple - Einstellung, wie ihr nur die Posts scrollt, aber nicht den Hintergrund! :)

html: Link in neuem Fenster öffnen

Immer wieder "gern" gesucht, manchmal gefunden, manchmal aufgegeben: die Frage nach dem Öffnen eines Links in einem neuen Tab (=Fenster). Die wohl einfachste Lösung lautet

 ➨ href="http://LINK" target="_blank"

Da mit _blank der Name einer Webseite angegeben wird, die nicht existiert, öffnet sich der Link automatisch in einem neuen Fenster. Der Code _blank funktioniert aber nicht an jeder Stelle - zum Beispiel in einigen Menüformen etc.

Was also tun?
Man bennent das neue Fenster einfach um - somit also der nicht existierenden Adresse einen neuen Namen geben. Ob das nun _soda (in meinem Fall) oder _dingens oder auch _zuckerschnute ist, spielt dabei keine Rolle.

That's it! :o)

in Post Schriftart einfügen, die nicht vorgegeben ist

Über den Vorlagendesigner habt ihr die Möglichkeit, eine Schriftart für eure Posts auszuwählen. Auch gibt es die Option im Post-Feld selber, noch einige Schriftarten zu benutzen. Wollt ihr allerdings eure Posts dann und wann anders gestalten - zum Beispiel einen Text besonders hervorheben - müßt ihr folgendes tun:

Anzeige "kein neuer Post" entfernen

Wenn ihr ein Blog erstellen wollt, in den ihr keine Posts einstellt - z. B. um dieses Blog als Blogroll zu benutzen (klick) - erscheint oben in der Mitte des Blogs das Feld "kein neuer Post" o. ä. Hier zeige ich euch, wie ihr diese Anzeige entfernen könnt.