Tipps & Tutorials, tutorial

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.

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!

83 Comments

  1. Lena Schnittker

    15. November 2013 at 15:54

    Wunderbar, vielen Dank, es hat geklappt! lg Lena

  2. DANANE

    15. November 2013 at 16:32

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

    Liebste Grüße

  3. designbygutschi

    15. November 2013 at 19:43

    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

  4. LovisiLeni

    19. November 2013 at 8:09

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

  5. Conny MilchSchoki

    21. November 2013 at 1:33

    super, habe ich heute installiert. Vielen Dank ♥

  6. An drea

    22. November 2013 at 13:19

    Vielen lieben Dank. Hat Super funktioniert.

  7. Sabrina Mohr

    27. November 2013 at 17:37

    Genial! Tausend Dank!!! 🙂

    GLG, Sabrina

  8. Mirella

    1. December 2013 at 20:52

    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 🙂

    1. Sophie Porcelain

      5. January 2014 at 14:07

      Bei mir ist es genauso 🙁

  9. Tinka

    12. December 2013 at 18:44

    Super!!! Es hat geklappt!!! Danke für die tollen Tutorials!
    LG
    Tinka

  10. Tinka

    12. December 2013 at 18:45

    Super!!! Es hat geklappt!!! Danke für die tollen Tutorials!
    LG
    Tinka

  11. Anonym

    19. December 2013 at 14:40

    Lieben, lieben Dank! Mal wieder ein supertolle Beschreibung! Das schaffe selbst ich als absoluter Anfänger, klasse 😉

  12. Lilli und Lotta

    21. December 2013 at 21:04

    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

  13. Katharina Jänisch

    29. December 2013 at 12:02

    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

  14. Josie Papaya

    31. December 2013 at 19:46

    Die Buttons sind verschwunden :O

  15. gutesfuerleibundseele

    7. January 2014 at 20:50

    Herzlichen Dank, es hat geklappt! Super, deine Seite!
    Liebe Grüße, Renate

  16. Jabelchen

    25. January 2014 at 15:14

    Danke für die Anleitung!

  17. Anonym

    4. February 2014 at 18:08

    Das hat prima geklappt, vielen vielen Dank!!
    LG Liann

  18. Alina

    4. February 2014 at 20:49

    bei mir funktionierts leider auch nicht :/ ich seh aber auf dieser beispielseite auch keinen pin it button bei den bildern…

  19. Sonja - flati

    9. February 2014 at 13:04

    Vielen lieben Dank , es hat gleich auf Anhieb geklappt, auch mit meinem Wunschbutton *freu*

    LG Sonja

  20. An Ja

    10. February 2014 at 18:44

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

  21. britt design

    14. February 2014 at 11:22

    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

  22. Isi

    27. February 2014 at 0:00

    Also irgendwie hab ich alles nach Anleitung gemacht, und es hat sich trotzdem nichts verändert 🙁

  23. Evie

    7. March 2014 at 11:28

    Wie bei Britt Design funktioniert es bei mr leider nicht =(

    1. lovemira

      12. March 2014 at 14:22

      Doch, tut es 😀 ich hab es gerade auf deinem Blog gesehen 😀

  24. Nina L

    8. March 2014 at 12:21

    Vielen Dank, es hat super funktioniert!!:)

  25. Lena

    26. March 2014 at 13:37

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

  26. mipamias

    10. May 2014 at 12:17

    Hat super geklappt! Danke für die tolle Beschreibung!
    LG Astrid

  27. Anja

    20. May 2014 at 14:23

    Suuuuupppppppeeeeerrrr! Vielen Dank, du bist meine Rettung! :o))

    LG,

    Anja

  28. Andreas

    31. May 2014 at 13:40

    Danke – super erklärt! Es hat auf Anhieb funktioniert!

    LG

  29. ♥susanne♥

    14. June 2014 at 22:18

    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

  30. Linchen

    15. June 2014 at 12:24

    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!

  31. bine

    2. July 2014 at 8:33

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

    1. bine

      2. July 2014 at 9:20

      Okay, gefunden. 🙂 Hab es auf meinem Zweitblog probiert und da hat es geklappt. Super Anleitung! Dankeschön dafür!

  32. Sarah J.

    6. August 2014 at 13:16

    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

  33. Ela

    18. August 2014 at 18:28

    Vielen lieben Dank für die tolle Anleitung!!! Mit der hat es super geklappt!!!!

  34. Lea

    1. September 2014 at 13:45

    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

  35. hansestern

    14. September 2014 at 12:15

    Super Tutorial! Hat sogar alles auf anhieb funktioniert!
    Vielen Dank und liebe Grüße
    hansestern

  36. Mlle Petit Point

    21. September 2014 at 8:18

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

  37. Nela

    25. September 2014 at 14:37

    Tolles Tutorial – vielen Dank!
    LG Nela

  38. Kreatives von Andrea

    26. September 2014 at 10:30

    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…

  39. Yushka Brand

    29. September 2014 at 8:38

    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

  40. Yvonne Ramona

    1. October 2014 at 9:13

    Hallo Mira, vielen Dank für den tollen Tipp – hat allles suuuper funktionert! 😀

    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

  41. beru

    31. October 2014 at 9:30

    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

  42. Lisa Lait

    25. November 2014 at 17:28

    Danke für das tolle Tutorial und die schönen Buttons… hat wunderbar geklappt 🙂

  43. Mama Nina

    14. December 2014 at 4:59

    Du bist ein Schatz – hat super funktioniert! Genau danach habe ich gesucht 🙂
    Tausend Dank
    Liebste Grüße Nina

  44. Ka

    16. December 2014 at 21:20

    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/

  45. emmali

    4. January 2015 at 10:52

    Wow, vielen lieben Dank für die Super-Erklärung 🙂

  46. maschenzucker

    19. March 2015 at 19:43

    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)

  47. Melanie

    20. March 2015 at 9:29

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

    Salü, Melanie

  48. wohnraumformer

    31. March 2015 at 18:55

    Herzlichen Dank für die tolle Anleitung :-)))) Yeah!

  49. Martina Lemke

    1. May 2015 at 19:30

    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

  50. Daniela S.

    11. May 2015 at 8:29

    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

  51. Ola

    31. May 2015 at 7:23

    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:(

  52. Bella - herzensüß

    31. May 2015 at 13:09

    das ging ja wie geschmiert….danke!!!!

    lg Bella

  53. Carohonk

    16. July 2015 at 18:50

    Danke für die Anleitung! LG Caro

  54. Jana Fredenhagen

    31. August 2015 at 7:22

    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

  55. Anonym

    16. October 2015 at 8:53

    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/

  56. mojoanma Anke

    4. November 2015 at 15:18

    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

    1. mojoanma Anke

      4. November 2015 at 15:22

      ich nochmal – manche gehen… manche nicht ????

  57. Denise Lengler

    16. January 2016 at 23:36

    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!

  58. Karen Heyer

    7. March 2016 at 18:38

    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/

  59. Jasmin

    18. April 2016 at 20:32

    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!!

  60. Fuchs Gestreift

    29. April 2016 at 15:25

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

  61. Bella - herzensüß

    24. May 2016 at 14:53

    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?????????

  62. Isa

    26. May 2016 at 17:51

    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

  63. Schneiderherz

    26. May 2016 at 18:07

    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)?!

  64. Schneiderherz

    13. June 2016 at 6:35

    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

    1. Bella - herzensüß

      28. June 2016 at 10:24

      danke für den tipp….hat funktioniert….jetzt kann ich wieder beruhigt schlafen…lach

  65. Lilli und Lotta

    26. June 2016 at 11:29

    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

  66. Lilli und Lotta

    26. June 2016 at 11:34

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

  67. InLoveWithGlueAndPaper

    31. August 2016 at 8:08

    Irgendwie klappt es bei mir nicht, schade.

  68. Simone

    6. September 2016 at 18:40

    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

  69. Simone

    6. September 2016 at 18:42

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

  70. ElinaEinhorn

    4. October 2016 at 12:09

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

    LG
    Corina

  71. Doris M.

    8. November 2016 at 8:08

    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

  72. Biggi aus MelusinesWelt

    13. November 2016 at 7:08

    Ist das nur für WordPress oder auch für Blogger?

  73. ♥susanne♥

    15. June 2017 at 9:30

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

Leave a Reply