In jeden Blog im Google Blogger kann ein YiGG-Button integriert werden. Heute werden wir nicht nur jede Post mit einem YiGG-Button ausstatten, sondern auch den Blog selbst, der ja ebenso geYiGGt werden kann.

Logge Dich beim Google Blogger ein. Über das Dashboard wählst Du Deinen Blog und klickst Layout. Du befindest Dich nun auf dem Reiter Vorlage. Klicke HTML bearbeiten.

Speichere zunächst eine Sicherheitskopie des Quellcodes über:
Speichern Sie eine Kopie der Vorlage, bevor Sie diese ändern. Vollständige Vorlage herunterladen

Klicke nun das Kästchen vor "Vorlagen zum Erweitern von Widgets" und warte kurz bis die Seite neu geladen ist.

Im oberen Bereich des Quellcodes eines Blogger Templates findest Du immer das CSS (Cascading Style Sheets), welches alle Darstellungen im Blogger Template festlegt.

Scrolle soweit runter, dass Du über den Bereich, in dem die Posts (.posts) definiert werden, hinweg bist, und füge vor den Comments (.comments) ein:
.yiggbutton {
float:left;
padding:3px 5px 5px 5px;
}


Suche nun nach:
<p><data:post.body/></p>

Darüber steht noch eine Zeile mit:
<div class='irgendwas'>

Über diese Zeile fügst Du ein:
<div class='yiggbutton'>
<script>
yigg_url = '<data:post.url/>';
</script>
<script src='http://webtools.yigg.de/emb_ycount.js'/>
</div>


(Der Google Blogger wandelt die beiden ' bei der yigg_url beim Speichern um in &# 39; (ohne Leerzeichen dazwischen). Wundere Dich nicht.)

BEACHTE, dass Du NICHT, wie von YiGG allgemein vorgeschlagen, hinter das ycount.js'/> ein </script> setzt, da dieses in diesem Fall im Google Blogger nicht funktioniert.

Klicke nun auf VORLAGE SPEICHERN. Du hast jetzt bereits fast alles getan, um bei jeder einzelnen Post einen zugehörigen YiGG-Button angezeigt zu bekommen. Beachte: Dieser stellt die Anzahl der abgestimmten YiGGs nur dann dar, wenn die jeweilige Post auch geYiGGt wurde. Andernfalls bietet er einen YiGG-Button Yigg it! an, mit dem jeder Besucher Deines Blogs (als auch Du) Deine Post bei YiGG vorschlagen kann. Immer mit der richtigen URL.

Äußerst wahrscheinlich wird der YiGG-Button nicht korrekt positioniert sein. Hier schlägt YiGG selbst padding vor. padding beschreibt im CSS den Innenabstand. In diesem Fall werden alle vier möglichen Werte einzeln definiert:

padding: 3px 5px 5px 5px;

Die Reihenfolge der px (Pixel) bestimmt den Innenabstand von:
Abstand oben, Abstand rechts, Abstand unten, Abstand links
(im Uhrzeigersinn)

Du musst nun etwas Herumspielen mit diesen vier Werten und versuchen, den YiGG-Button optisch korrekt zu positionieren, was aber dennoch nicht immer gelingt. Unter dieser Zeile mit padding fügst Du dann z. B. ein:

margin: -1px 0px -3px -7px;

margin beschreibt im CSS den Außenabstand. Auch wieder in der o. g. Reihenfolge (oben, rechts, unten, links). margin hat den Vorteil, dass Minuswerte angegeben werden können. Somit kannst Du den YiGG-Button genau in die richtige Position schieben. Beachte dabei, dass der YiGG-Button nicht über den Text der Post gelegt wird und Du evtl. die Hälfte der Buchstaben nicht mehr sehen kannst.

Schaue Dir, nachdem er in einer Post richtig dargestellt wird, weitere Posts von Dir an und prüfe, ob auch hier eine optisch einwandfreie Darstellung erfolgt. Falls nicht, optimiere für die jeweilige Post nach. (Die Positionierung gilt natürlich für alle Posts gleich.)

YiGG-Button in der Post rechts darstellen
Oben ist auch float angegeben, welches im CSS den Textumfluss beschreibt. Du kannst neben float:left auch float:right wählen, sofern es Dir gefällt. Der YiGG-Button steht dann rechts positioniert.

YiGG-Button für den Blog selbst einfügen
Nun wollen wir auch einen YiGG-Button für den Blog selbst einfügen, da auch dieser geYiGGt werden kann. Hier verwenden wir die einfachste Methode.

Gehe über den Reiter Vorlage zu Seitenelemente. Wähle an beliebiger Stelle Seitenelement hinzufügen und wähle ein HTML/JavaScript-Element. Füge in dieses diesen Code ein:
<div class="yiggbuttonblog"><script>yigg_url = "http://DeinBlog.blogspot.com";</script><script src="http://webtools.yigg.de/emb_ycount.js"/></script></div>

Immer wieder kann man lesen, dass Javascript in Posts und HTML/JavaScript-Elementen im Google Blogger nicht geht und dass Google darin Javascript aus Sicherheitsgründen nicht erlauben würde... Der o. g. Code muss so eingefügt werden, d. h. ohne jegliche Zeilenumbrüche, damit er funktioniert. Ursache hierfür ist die standardmäßige Einstellung im Google Blogger: Unter Einstellungen - Formatierung ist "Zeilenumbrüche konvertieren" auf "Ja" eingestellt. Das ist der einzige Grund, warum Javascript mit Zeilenumbrüchen nicht funktioniert.

Jetzt müssen wir noch festlegen, wie dieser YiGG-Button positioniert werden soll. Gehe wieder auf den Reiter Vorlage und klicke dann HTML bearbeiten. Klicke das Kästchen vor "Vorlagen zum Erweitern von Widgets" und warte kurz bis die Seite neu geladen ist.

Suche nun im Code den .yiggbutton im CSS, den Du eben eingefügt hast. Füge darunter (hinter "}") in die nächste Zeile ein:
.yiggbuttonblog {
text-align:center;
}


Klicke nun auf VORLAGE SPEICHERN.

Auch hier kannst Du zur Positionierung wieder, wie oben bereits beschrieben, mit padding und margin arbeiten.

Der CSS-Fortgeschrittene geht ggf. anders vor und arbeitet mit ähnlichen CSS-Befehlen.

BEACHTE, sofern Du Google AdSense verwendest, dass der Google Blogger ggf. während der Durchführung der o. g. Arbeiten das Format von AdSense-Anzeigen zurückgesetzt hat auf 234x60 o. ä. Prüfe es und stelle sie wieder auf die richtige Größe ein.

Du bist fertig. Freu Dich! Denn jetzt kannst nicht nur Du selbst erfolgreich an der größten und erfolgreichsten deutschen Social Community teilhaben, sondern auch alle Deine Besucher! Wie einfach ist es nun für jeden Besucher, für eine Post von Dir auf einen Klick bei YiGG (reimt sich...) abzustimmen! Viele, viele weitere Stimmen wirst Du nun vielleicht bekommen, die Du ohne YiGG-Button in Deinem Blog nie erhalten hättest.

Diesen Post bookmarken: (Es dauert nur 3 Sek.)
YiGG-Button in Blog im Google Blogger einbauen
(Bookmark-Formular bereits ausgefüllt)

Verwandte Themen:
YiGG-Button unterhalb der Post einbauen

Alle Codeschnipsel wurden zur Darstellung im Google Blogger in Simple Code umgewandelt.



10 comments:

kehrseite said...

geht das auch bei anderen boganbietern?

Wulffy said...

Das Problem war, dass keiner wusste, wie es und ob es beim Google Blogger geht.

Bei Wordpress und Serendipity geht es unproblematisch. Schau mal bei YiGG.de unten auf der Seite unter Buttons. Dort steht, wie es geht.

U9TA Gründer said...

Fleissige Arbeit, aber leider unvollständig. Jetzt noch bitte wie man den YiGG-Button auch in die AdSense-Werbung, in die Affiliate Dings, in die Widgets, in die Banner und ins Logo (Kunst) einbauen kann. Das ideale Blog besteht aus lauter YiGG-Buttons mit etwas Text und Werbung dazwischen... ;))

Wulffy said...

Ja, was soll ich denn ohne U9TA-Button auch anders machen?

egghat said...

Supergeil. Danke.

Funktioniert top!

Wulffy said...

Hi egghat! Freut mich! Vielen Dank. Hast Du ja auch schon in Deinem Blog eingebaut!

Aufreger said...

Leider wird die URL nicht mehr mit übertragen, wenn man einen Artikel yiggen möchte. Eine neue EintragsURL hat yigg zwar, aber das Script wurde nicht angepasst, auch nicht die Version http://static.yigg.de/v6/js/embed_button.js

Gibt es da inzwischen eine Lösung?

Wulffy said...

Wie ich sehe, funktioniert es in Deinem Blog. Mit dem unveränderten Code, wie oben aufgeführt. Nur halt mit dem JavaScript von "http://static.yigg.de/v6/js/embed_button.js".

Aufreger said...

Ähmmm, nö.
Also wenn der Artikel noch nicht geyigged wurde und ich dann auf Yigg it klicke, wird die URL eben nicht mit übernommen und automatisch eingetragen ???

Wulffy said...

Dann könnte das ein "Schutz" sein, den YiGG eingebaut hat, weil die vielleicht glauben, dass das einer der Gründe für die Google-Abstrafung war, was, falls es so wäre, falsch ist. - Das JavaScript ist, soweit ich das kurz überblicken konnte, in Ordnung. Du solltest bei YiGG nachfragen.