Individuellen Pinterest-Hover-Button


Heute zeige ich euch, wie man einen Button über eure Bilder legt, mit dem man innerhalb von wenigen Sekunden die Bilder auf Pinterest teilen kann. Pinterest eignet sich perfekt für kreative Köpfe, die ihre Kreationen zeigen und andere wiederum weiter "pinnen". Wenn es euch nichts ausmacht, dass eure Bilder auf Pinterest landen, ist es auch perfekt, um euren Blog zu promoten!


Wer aber den Standard-Button weniger schön findet, ist hier richtig! Der Code in Punkt 2 wurde freundlicherweise von Bloggersentral.com zur Verfügung gestellt.

Hier seht ihr, wie es am Ende aussehen wird.

1. Öffnet euren Bloggerdashboard > Vorlage > HTML bearbeiten.

2. Scrollt im Code ganz nach unten. Dort findet ihr </body>. Darüber fügt ihr folgendes ein:
<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>

3. Sucht euch einen Button aus und kopiert die Bild-URL (mit Rechtsklick). Ersetzt das ROTE mit der zwischengespeicherten URL. Diese wunderschönen Buttons sind übrigens von www.katrinaleechambers.com und sind frei benutzbar :)

Wenn euch diese Buttons nicht zusagen, könnt ihr auch eure eigenen erstellen!




4. Und nun könnt ihr euren Button noch ausrichten. Ersetzt das BLAUE mit
topleft
topright
bottomleft
oder
bottomright
 .
5. Speichern und fertig!

6. Falls das Ergebnis nicht zufriedenstellend ist, könnt ihr noch im HTML vor ]]></b:skin> folgendes einfügen:
.pinimg {
...
}
Wenn ihr euch mit CSS auskennt, könnt ihr hier noch ein paar Dinge nachrichten. In meinem Beispiel habe ich zum Beispiel die Bildbreite auf Normzustand gestellt und das Bild ein wenig nach rechts geschoben:
width: inherit !important;padding-left: 30px !important;
!important habe ich am Ende hinzugefügt, weil es etwas überschreiben soll. Falls ihr nach ein paar CSS-Änderungen keine Veränderung auf eurem Blog seht, dann könnt ihr das am Ende einsetzen. Aber das sollte eigentlich eher selten nötig sein :)

Falls ihr noch Fragen habt, könnt ihr sie mir gerne hier posten!

84 Kommentare

  1. Wunderbar, vielen Dank, es hat geklappt! lg Lena

    AntwortenLöschen
  2. Viiiiiieeeellllen Dank. Das wollte ich schon so lange machen. Jetzt ist es geschafft. Super. Ich freu mich.

    Liebste Grüße

    AntwortenLöschen
  3. Es hat funktionier - auf das erste Mal ... und das wo ich doch von Htlm ... keine Ahnung habe ...
    Danke das ist genial ....

    Liebe herzliche 1000 ... DANK - GRÜßE

    Jutta

    AntwortenLöschen
  4. Ui die sind ja toll danke! Das neue Design gefällt mir übrigens echt gut! (Y) weiter so <3

    AntwortenLöschen
  5. super, habe ich heute installiert. Vielen Dank ♥

    AntwortenLöschen
  6. Vielen lieben Dank. Hat Super funktioniert.

    AntwortenLöschen
  7. Genial! Tausend Dank!!! :-)

    GLG, Sabrina

    AntwortenLöschen
  8. Hallo! ich habe es probiert. Bei mir klappt es aber leider nicht :-( d.h. ich sehe gar keinen Button... was mache ich falsch? Folge genau den Anweisungen. Nur der Body-code ist bei mir nicht ganz unten wie ihr schreibt, sondern irgendwo gegen Ende der html-schrift. Liegt es daran? Lieben Dank für die Hilfe :-)

    AntwortenLöschen
  9. Super!!! Es hat geklappt!!! Danke für die tollen Tutorials!
    LG
    Tinka

    AntwortenLöschen
  10. Super!!! Es hat geklappt!!! Danke für die tollen Tutorials!
    LG
    Tinka

    AntwortenLöschen
  11. Lieben, lieben Dank! Mal wieder ein supertolle Beschreibung! Das schaffe selbst ich als absoluter Anfänger, klasse ;)

    AntwortenLöschen
  12. Oh, ich bin so froh dich gefunden zu haben! Danke dir für den Pin-it Button! Da freue ich mich sehr drüber, dass es auch noch so einfach geklappt hat :-)
    Ich werde jetzt gleich mal weiter stöbern, du hast einen wirklich tollen und hilfreichen Blog!

    Liebe Grüße
    Maike

    AntwortenLöschen
  13. Super Erklärung - vielen Dank dafür! Normal über Pinterest wurde bei mir der Code nicht angekommen... ich war schon am Verzweifeln und habe dann deinen Artikel gefunden, hat super geklappt und der Button ist auch noch schöner - vielen Dank!!

    Liebe Grüße, Katharina
    adore2bake.blogspot.com

    AntwortenLöschen
  14. Herzlichen Dank, es hat geklappt! Super, deine Seite!
    Liebe Grüße, Renate

    AntwortenLöschen
  15. Das hat prima geklappt, vielen vielen Dank!!
    LG Liann

    AntwortenLöschen
  16. bei mir funktionierts leider auch nicht :/ ich seh aber auf dieser beispielseite auch keinen pin it button bei den bildern...

    AntwortenLöschen
  17. Vielen lieben Dank , es hat gleich auf Anhieb geklappt, auch mit meinem Wunschbutton *freu*

    LG Sonja

    AntwortenLöschen
  18. funktrinoert leider nicht bzw finde die Stelle niht im HTML,
    könntest Du mal drüber schauen?

    AntwortenLöschen
  19. Vielen lieben Dank, ich habe es sofort ausprobiert, aber es funktioniert leider nicht. Ich habe aber auch nicht /body gefunden, sondern nur /tbody. Vielleicht liegt es daran?! Könntest Du mir noch einen Tipp geben, damit ich es doch schaffe?
    Danke & liebe Grüße
    Britt

    AntwortenLöschen
  20. Also irgendwie hab ich alles nach Anleitung gemacht, und es hat sich trotzdem nichts verändert :(

    AntwortenLöschen
  21. Wie bei Britt Design funktioniert es bei mr leider nicht =(

    AntwortenLöschen
    Antworten
    1. Doch, tut es :D ich hab es gerade auf deinem Blog gesehen :D

      Löschen
  22. Vielen Dank, es hat super funktioniert!!:)

    AntwortenLöschen
  23. Ich hab dieses Tutorial grade entdeckt und ausprobiert. Alles hat super funktioniert! Toll und einfach erklärt! Danke!

    AntwortenLöschen
  24. Hat super geklappt! Danke für die tolle Beschreibung!
    LG Astrid

    AntwortenLöschen
  25. Suuuuupppppppeeeeerrrr! Vielen Dank, du bist meine Rettung! :o))

    LG,

    Anja

    AntwortenLöschen
  26. Danke - super erklärt! Es hat auf Anhieb funktioniert!

    LG

    AntwortenLöschen
  27. Vielen Dank, das hat super geklappt und ich habe gleich mal Werbung für die tolle Anleitung auf meinem blog gemacht.
    Liebe Grüße
    susanne

    AntwortenLöschen
  28. Wie cool! Hab das schon auf ein paar Blogs gesehen und mich immer gefragt, wie das wohl geht! Jetzt hab ich es! Vielen Dank dafür!

    AntwortenLöschen
  29. Mmmmhh, wenn ich ganz nach unten scrolle im HTML-Code, finde ich kein "...body..."
    Wo könnte das noch stehen?
    Liebe Grüße!
    bine

    AntwortenLöschen
    Antworten
    1. Okay, gefunden. :-) Hab es auf meinem Zweitblog probiert und da hat es geklappt. Super Anleitung! Dankeschön dafür!

      Löschen
  30. Endlich hab ich auch drin. War längst überfällig, aber ich hab immer tierischen Respekt vor so extravaganten Sachen. Hätte ich mal gewusst, dass das so einfach ist xD

    AntwortenLöschen
  31. Vielen lieben Dank für die tolle Anleitung!!! Mit der hat es super geklappt!!!!

    AntwortenLöschen
  32. Liebe Mira,
    dankeschön für dein tolles Tutorial und die Bereitstellung der schönen Pinterest-Hover-Buttons von Katrina :)
    Hat super funktioniert, vielen Dank! :)
    Liebe Grüße,
    Lea

    AntwortenLöschen
  33. Super Tutorial! Hat sogar alles auf anhieb funktioniert!
    Vielen Dank und liebe Grüße
    hansestern

    AntwortenLöschen
  34. Hach, danke für die schönen Buttons! Endlich ist bei mir jetzt auch ein hübscher dabei! <3
    Super, vielen vielen Dank!!

    AntwortenLöschen
  35. Tolles Tutorial - vielen Dank!
    LG Nela

    AntwortenLöschen
  36. Eine ganz fantastische Anleitung und die Buttons sind so wundervoll, ganz lieben Dank dafür...es hat sofort geklappt...

    Wünsche ein schönes Wochenende, ganz liebe Grüße von Andrea...

    AntwortenLöschen
  37. Vielen lieben Dank für die tolle Anleitung. Klappt einwandfrei. Jetzt habe ich eine Spezialfrage dazu: Bei meinem Design sind auf der Startseite bewegliche Kachel-Vorschaubilder. Als ich nun den Code eingebaut hatte, hat alles so weit super funktioniert, nur auf der Startseite wurde der Button viel zu groß auf den kleinen Bildchen angezeigt und die Bilder haben sich nicht mehr bewegt. Wie kann ich es erreichen, dass der Button auf der Startseite erst gar nicht mehr angezeigt wird, sondern nur in den Posting-Seiten? Gibt es da irgendeine Möglichkeit? Vielen lieben Dank!
    LG, Yushka

    AntwortenLöschen
    Antworten
    1. Sorry, Bloglink vergessen: http://sugarprincess-juschka.blogspot.de/

      Löschen
  38. Hallo Mira, vielen Dank für den tollen Tipp - hat allles suuuper funktionert! :-D

    Eine Frage hätte ich aber noch: gibt es eine Möglichkeit, den Button bei einzelnen, BESTIMMTEN Bildern nicht erscheinen zu lassen? ;-)

    Ganz liebe Grüße
    Yvonne

    AntwortenLöschen
  39. OH wie wundervoll. Ein ganz einfaches Tutorial, welches sogar von nicht HTML Profis durchführbar ist :) Ich werde Deine Seite auf meinen Blog verlinken, dass noch viel mehr Freude haben können... Vielen Dank, dass man solch wunderbare Tutorials nun auch in Deutsch hat :) Hat alles super geklappt. Ich mag die tollen Banner, durch diese bin ich aufmerksam geworden und eine liebe Freundin hat mir dann Deine Seite geschickt (link)... DANKE

    AntwortenLöschen
  40. Danke für das tolle Tutorial und die schönen Buttons… hat wunderbar geklappt :)

    AntwortenLöschen
  41. Du bist ein Schatz - hat super funktioniert! Genau danach habe ich gesucht :)
    Tausend Dank
    Liebste Grüße Nina

    AntwortenLöschen
  42. Hat super geklappt. Allerdings habe ich den gewöhnlichen (hässlichen) pin it button jetzt auch noch oben links im Bild und leider keine Ahnung wie ich diesen entfernen kann. Kann mir da jemand weiterhelfen?
    Hier mein Blog: http://ich-und-du-und-du.blogspot.de/

    AntwortenLöschen
  43. War super einfach vielen Dank!! <3
    xx Ama

    http://phuckitfashion.blogspot.de

    AntwortenLöschen
  44. Wow, vielen lieben Dank für die Super-Erklärung :)

    AntwortenLöschen
  45. Ich fasse es nicht, ich habe zum ersten Mal sowas gemacht und es hat sofort funktioniert!!! DANKE!!! So coooool :O)))) Raphaele (alias PC-Dummie ;O)

    AntwortenLöschen
  46. Yippie, hat geklappt. Zwar im zweiten Anlauf, ABER: Es hat geklappt.
    Vielen Dank für die Anleitung und die tollen Buttons!

    Salü, Melanie

    AntwortenLöschen
  47. Herzlichen Dank für die tolle Anleitung :-)))) Yeah!

    AntwortenLöschen
  48. Super, vielen Dank! Leider sitzt der Button bei mir jedoch rechts neben den Bildern und nicht auf dem Bild!
    Hast du einen Tipp für mich?
    LG, Martina

    AntwortenLöschen
  49. Danke für die super Anleitung. Klappte bis gestern einwandfrei, doch nun hat sich folgendes Problem eingestellt:
    der individuelle Pinterest Hoover Button funktioniert super, allerdings ist auch der "normale" Pinterest Hoover Button dahinter/darüber zu sehen. Jetzt ist er also doppelt vorhanden. Ich hab deinen Code nochmal rausgelöscht, doch der "normale" Button bleibt trotzdem da. Hab auch schon auf der Pinterest Seite nach dem Code gesucht, damit ich ihn rauslöschen kann, doch er ist anscheinend nicht in meinem HTML Code vorhanden....

    Ich hoffe ich hab mich einigermaßen verständlich ausgedrückt. Vielleicht könntest du mir ja einen Tipp geben, wie ich dieses Problem beheben könnte.

    http://greenxbird.blogspot.co.at/

    Liebe Grüße, Daniela

    AntwortenLöschen
  50. Diesen Tipp würde ich zu gerne umsetzen jedoch nicht bei allen Bildern. Schon gesehen auf anderen Blogs. Wie stelle ich das an? Wurde weiter oben schon gefragt, aber ich habe keine Antwort gefunden:(

    AntwortenLöschen
  51. das ging ja wie geschmiert....danke!!!!

    lg Bella

    AntwortenLöschen
  52. Danke für die Anleitung! LG Caro

    AntwortenLöschen
  53. Super Anleitung, vielen, vielen Dank dafür! Hab gestern die ganze Zeit gedacht es hat nicht funktioniert und heute morgen durfte ich dann mit großer Freude feststellen, dass der Button doch erscheint :) Alles sehr anschaulich erklärt, obwohl ich keine Ahnung hatte, hat es auf Anhieb geklappt

    AntwortenLöschen
  54. Hey :) vielen dank für deine Anleitung. Nur klappt das bei mir nicht :( Was mach ich jetzt?

    Liebe Grüße,
    Kristin ♥ http://himbeermeadels.blogspot.de/

    AntwortenLöschen
  55. Hallo, danke für die tolle Anleitung!
    ich habe einen Button im Bild aber leider funktioniert er nicht, bedeutet, ich kann nichts damit pinnen - woran könnte das liegen?
    http://mojoanma.blogspot.de/
    liebe Grüsse
    Anke

    AntwortenLöschen
    Antworten
    1. ich nochmal - manche gehen... manche nicht ????

      Löschen
  56. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  57. Vielen lieben Dank für diesen Beitrag und viele andere Beiträge, die mir wirklich sehr geholfen haben bei der Bloggestaltung oder ohne die ich aufgeschmissen gewesen wäre.
    Mit den zur Verfügung gestellten Buttons klappt es ganz prima (mein eigener Button ist einfach an der falschen Stelle im Bild und nicht so schön oben links).
    Und ich habe noch ein weiteres Problem, denn es gibt Bilder auf meinem Blog, die direkt zu einem Onlineshop verlinkt sind und die nun nicht mehr angeklickt werden können, da diese Bilder eben auch als Bilder erkannt und somit vom Button verdeckt werden.
    Gibt es für diese beien Schwierigkeiten vielleicht eine für mich als Anfänger umsetzbare Lösung?
    1000 Dank im Voraus!

    AntwortenLöschen
  58. Danke für das tolle Tutorial! Ich habe schon so viele Anleitungen gelesen und nichts begriffen, nun hat es auf Anhieb hingehauen :-)
    Viele Grüße von Karen
    http://allegriaslandhaus.blogspot.de/

    AntwortenLöschen
  59. Liebe Mira, vielen Dank für diese Anleitung!! So habe ich es auch geschafft mein eigenen "Pin it" Button über die Bilder in meinen Blog zu legen!!

    AntwortenLöschen
  60. Super, vielen lieben Dank für die tolle Anleitung. Sogar als Laie habe ich sie sofort umsetzen können!
    Nochmals Danke!
    Franziska

    AntwortenLöschen
  61. Ich habe vor ein paar Monaten den Button problemlos bei mir eingefügt und nun ist er seit ein paar Tagen einfach weg, ich habe nichts am Code geändert bzw gar nicht mit html gespielt.....eben nachgeschaut...der code ist noch da und auch alles richtig, aber der button ist weg. Jemand deine Idee WARUM?????????

    AntwortenLöschen
  62. Bei mir funktioniert das leider nicht... Wie könntest du mir da helfen? Bei mir ist das auch wie bei Bella. Liebe Grüße Isa

    AntwortenLöschen
  63. Hallo aus Flensburg.
    Mir geht es leider wie Bella...
    Ich hatte mir vor langer Zeit einen Button nach Deiner tollen Anleitung "in den Blog gebastelt"
    Tolle Sache- doch plötzlich ist der Button weg. Ich habe nichts geändert. Liegt es vielleicht daran, dass Blogger jetzt über https geht (nur die planlose Vermutung einer Unwissenden)?!

    AntwortenLöschen
  64. Hallo an alle, bei denen der PinButton plötzlich verschwunden ist!
    Es gibt ein Update- Ihr den Code anpassen, dann klappt es wieder:
    http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html
    Da findet Ihr alle Informationen.

    Solltet Ihr Euren Button individuell angepasst haben, braucht Ihr natürlich nicht den ganzen Code zu ersetzten, es reicht die eine aktualisierte Zeile auszutauschen.
    Viel Erfolg und fröhliches Pinnen!

    Ute

    AntwortenLöschen
    Antworten
    1. danke für den tipp....hat funktioniert....jetzt kann ich wieder beruhigt schlafen...lach

      Löschen
  65. Hallo Mira, eigentlich hat der Button bei mir immer prima funktioniert. Jetzt ist mir aufgefallen, dass er nicht mehr geht.... Ich habe gerade nochmal alles neu eingegben, aber trotzdem sehe ich nichts. Hast du eine Idee woran es liegen kann?
    Liebe Grüße
    MAike

    AntwortenLöschen
  66. Ah sorry, lese gerad den Kommentar über mir und habe es geändert.

    AntwortenLöschen
  67. Irgendwie klappt es bei mir nicht, schade.

    AntwortenLöschen
  68. Hallo Mira,
    mir geht es auch so, hat immer gut funktioniert jetzt wird der Button aber nicht mehr angezeigt. Kann das an der Umstellung von http auf https liegen?
    Liebe Grüße
    Simone

    AntwortenLöschen
  69. Oh Mist. Gerade habe ich die Kommentare über mir gelesen und den Link gefunden...
    Dann klappts hoffentlich wieder.
    Liebe Grüße
    Simone

    AntwortenLöschen
  70. DANKE DANKE DANKE! Ich habe durch deinen tollen Blog schon Einiges verschönert, obwohl ich eine absolute Niete in HTML bin.

    LG
    Corina

    AntwortenLöschen
  71. Schade, es geht nicht :-( Habe den "Merken"-Button von Pínterst deinstalliert und wollte einen Button von oben - aber es klappt nicht!!!
    BITTE - hättest du nochmal einen Trick - die Anleitung von Pinterst Widget-Builder kapier ich nicht!!!
    Besten Danke und liebe Grüße,
    Doris

    AntwortenLöschen
  72. Ist das nur für Wordpress oder auch für Blogger?

    AntwortenLöschen
  73. Der button ist einfach nicht mehr da. *heul* dabei war das so toll. Wollte es jetzt neu machen.
    GEHT ABER NICHT!!!!!!!

    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!