GFC im Bloglovin'-Look ♥♥

Heute zeige ich euch, wie man die Verfolgungsmöglichkeit von Google Friend Connect so gestaltet, dass sie wie ein Bloglovin-Button aussieht. Beispiele seht ihr im aktuellen Design von uns oder hier auf unserem Testblog.



1. Blog-ID ausfindig machen. Dazu geht ihr auf blogger.com und geht auf den Dashboard eures Blogges. In der Adressleiste findet ihr dann eure ID. Kopiert diese:

2. Code einfügen. Dafür öffnet ihr unter Layout ein "HTML/Javascript"-Gadget. Den Titel könnt ihr leer lassen, in der zweiten Box fügt ihr folgendes ein:

<div id="viagfc"><a href="http://www.blogger.com/follow-blog.g?blogID=5984094454230097461" target="_blank">4842 followers</a><br><br><div>via gfc</div></div>

<style>
#viagfc a {
color: #555;
font-size: 11px;
font-family: 'Verdana';
text-transform: none;
background: #FFC71F;
padding: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#viagfc div {
font-family: 'Verdana';
font-size:9px;
text-align:center;
width: 91px;
margin-top: -15px;
}
</style>

3. Personalisieren:
Im HTML:
Das Rotmarkierte ersetzt ihr mit der ID aus Punkt 1!
Das Gelbmarkierte "4842 followers" ersetzt ihr mit eurer Leserzahl. Die Anzahl müsst ihr immer manuell aktualisieren, bisher habe ich leider noch keine andere Möglichkeit gefunden.

Im CSS:
#viagfc a definiert das Erscheinungsbild der "Box" mit der Leserzahl. #viagfc div definiert das Erscheinungsbild des Schriftzugs "via gfc".

#FFC71F könnt ihr mit einer anderen Farbe ersetzen - Farbcodes kriegt ihr hier.
Die restlichen unterstrichenen Sachen könnt ihr so ändern wie ihr mögt - ohne großartig Schaden zu hinterlassen. Ich denke, die Eigenschaftsnamen erklären sich von selbst - bei Fragen einfach googeln und bei erfolglosem googeln einfach hier fragen ;)

4. Speichern. Übrigens, wenn ihr den Code 1 zu 1 übernimmt, sieht es dann aus wie im Beispielbild oder hier im Demo. Viel Spaß!

Votet hier für den nächsten Tutorial!

PS: Wer die Schuhe von Timeless gewinnen wird, erfahrt ihr im Laufe der nächsten Woche auf Facebook ;) (zum Gewinnspiel)