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)

27 Kommentare

  1. Sehr coole Idee, das werd ich gleich umsetzen, vielen Dank :)

    AntwortenLöschen
  2. Das ist ne coole Idee um es anzupassen aber mir ist sowas immer suspekt, weil man dann nicht weiß ob die Leserzahl nicht einfach gefaket ist. Da kann ja jeder was hinschreiben wie er will O.o

    AntwortenLöschen
  3. oh Danke, auf dieses Tutorial habe ich schon gewartet. Wird jetzt direkt mal ausprobiert!

    AntwortenLöschen
  4. aaw, danke danke danke für dieses Tutorial!! :)

    Liebste Grüße,
    Natalie von Paperwings-blabla

    AntwortenLöschen
  5. Das habe ich gleich mal umgesetzt - vielen Dank! Ich habe nur ein kleines Problem... ich habe "damals" mein Gfc-Widget gelöscht - meine Leser müssten aber dennoch da sein, oder? Wie finde ich die Anzahl meiner Leser heraus?
    LG Sabine

    AntwortenLöschen
    Antworten
    1. Das kannst du auch auf dem Bloggerdashboard sehen, dort wo deine Blogs aufgelistet sind. Direkt unter dem Blognamen ist eine Zeile mit Seitenaufrufe etc. ganz am Ende steht die Anzahl der Follower ;)

      Löschen
    2. Danke für die schnelle Antwort - aber die Anzahl ist hier 0 :( Dabei hatte ich zu Widget-Zeiten ja einige Follower... werden die beim löschen vom GFC-Widget auch gelöscht?

      Löschen
    3. Eigentlich sollte das nicht so sein, vielleicht hat Blogger da ein paar Probleme?

      Schau mal hier:http://www.google.de/friendconnect/home/overview?hl=de

      Löschen
    4. Hallo Mira... nein, leider bringt einen die Seite nicht weiter... Trotzdem dankeschön :) Es gibt ja gott sei dank noch zig weitere Möglichkeiten zu folgen...
      Schönen Wochenstart ... :)

      Löschen
  6. Super :) Vielen lieben Dank.
    Habs etwas anders gemacht und statt der Followerzahl "Follow me" eingegeben :D
    Ich liebe deine Seite :-*

    AntwortenLöschen
  7. Danke für das Tutorial, die Anzeige mit den Fotos fand ich nie schön. Wie kann man das Feld denn etwas breiter machen?

    AntwortenLöschen
  8. klasse :)
    http://papillonfully.blogspot.de/

    AntwortenLöschen
  9. sehr schönes Tutorial.
    Trotz allem habe ich ein bisschen Angst das originale GFC Folgedings raus zu löschen.
    Wie siehst es denn bei euch aus? Bekommen eure Leser immer noch Benachrichtigungen über neue Posts und wenn man das gelbe Folgeteil weg macht und wieder das normale von GFC nimmt, erscheinen dann die Leser wieder oder fängt das wieder an bei 0 zu zählen?

    AntwortenLöschen
    Antworten
    1. Hey, da passiert schon nichts! Die Anzahl der Leser hat nichts mit dem Widget zu tun, sondern etwas mit deiner blogspot-URL. Die sind fest miteinander verbunden. Solange du deine Adresse also nicht zu einer anderen blogspot-URL änderst, passiert nichts :)

      Löschen
  10. Super Anleitung! Danke! Kann man das auch mit blogconnect machen? ;D

    Alles Liebe! xx eure Lara

    AntwortenLöschen
  11. Hallöchen, da meine Follower auf meiner Seite nicht mehr sichtbar sind nur im Dashboard (warum weiß ich nicht!!), habe ich es gleich ausprobiert, viiiiiiiiielen Dank dafür!!!
    Grüßle Crissi

    AntwortenLöschen
  12. Danke für die tolle Anleitung :)

    AntwortenLöschen
  13. Huhu,
    funktioniert das auch mit älteren Vorlagen?
    Ich benutze nicht diese Layout Seiten sondern das Alte.
    Und wenn ich es da eingebe sieht es nachher nicht so aus, dann steht da nur eine Zahl die ich anklicken kann, die mich dann weiterleitet. :/

    Liebe Grüße

    AntwortenLöschen
    Antworten
    1. Hey,

      dass weiß ich nicht genau. Im Prinzip sollte es funktionieren, da es nur aus HTML & CSS besteht. Ich habe noch nie die ganz alte Vorlage ohne Layout benutzt, da bin ich ehrlich gesagt überfragt. Bei der Minima-Vorlage und alle Vorlagendesigns von Blogger sollte es gehen...

      Löschen
  14. Vielen vielen Dank für diese tolle Tutorial! :)
    Ich habe es gleich auch mal auf Bloglovin und Blog-Connect angewendet
    jetzt habe ich endlich alles gleich :D

    LG, Laura
    Mein Blog

    AntwortenLöschen
  15. Danke für das super Tutorial!
    War genau was ich gesucht habe und hat mir
    sehr weiter geholfen.
    Viele Grüße
    Lisa von http://dash-of-fashion.blogspot.de

    AntwortenLöschen
  16. Habe euch mal verlinkt: http://www.blushaholic.de/2014/03/blog-gfc-widget-im-bloglovin-design.html

    In letzter Zeit gibt es nämlich ein Problem mit dem Widget und ihr habt mir super geholfen! Vielen, vielen Dank! Ich hoffe, die Verlinkung ist okay, falls nicht, nehme ich den Beitrag wieder raus. LG Sandri =)

    AntwortenLöschen
  17. Das ist super! Verwende ich jetzt auch, fand die Bilderchen der Leser nämlich nie so toll, aber dass man die Anzahl immer selbst eintragen muss ist irgendwie blöd :/
    Kann ich mir das von Blogconnect auch so umändern? Wie mache ich das?

    Liebe Grüße,
    Nici

    AntwortenLöschen
  18. danke für den Tipp =)
    mein "alter, normaler" GFC Button funktionierte nicht mehr. jetzt klappt alles reibungslos --> super =)
    lg Marisa

    AntwortenLöschen
  19. danke für das schöne Tutorial! allerdings hab ich eine Frage - wo sehe ich denn jetzt wie viele Follower ich über GFC habe, damit ich da die Zahl eintragen kann? ist das die zahl auf der bloggerstartseite?

    AntwortenLöschen
  20. Hallo! :) Ich habe von mehreren Freunden gehört, dass ich keinen "Follow-Button" habe. Jetzt hat eine Freundin ihren, in diesem Design! Wie mache ich das so? Ich verzweifle :P Liebe Grüße!

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!