html Tutorial :: Pinterest-Hover-Button einfügen

Pinterest, ja auch ich habe inzwischen Pinterest für mich entdeckt. Also die Plattform auf der man Bilder pinnen kann. Und damit Bilder schnell und einfach direkt von Webseiten gepinnt werden können gibt es diese Mouse-over Buttons. Bei vielen Blogs findet man schon diese Pinterest-Buttons, die sobald man mit dem Mauszeiger über ein Bild fährt, aufpoppen. 

'Gut, das will ich auch haben', hab ich mir gedacht und schon war es auch eingebaut. Geht schnell ohne das man großartiges html-Wissen haben muss. Und wie einfach das ist zeige ich euch heute:

1 // Zuerst brauchen wir einen Pinterest-Button. Ihr könnt euch selbst einen gestalten (den speichert ihr dann am besten im .-png- Format oder .gif-Format ab) oder auch einen aus dem Internet nehmen. (Achtung: Copyright beachten). Eine kleine Auswahl an tollen Pinterest-Buttons, die ihr kostenfrei verwenden dürft findet ihr übrigens <hier>.

Habt ihr euch einen ausgesucht, dann speichert ihr euch diesen Button und ladet ihn z.B. bei euch bei Picasa hoch oder ihr klickt bei dem Bild mit der rechten Maustaste drauf und geht auf 'Graphikadresse kopieren' und speichert euch diesen Link ab.

2 // Nun klicken wir unter Vorlage >> HTML bearbeiten

3 // Sucht nun im html-Code nach folgender Zeile:

</body>

4 // Direkt darüber fügt ihr nun folgendes ein:

<script> //<![CDATA[ var bs_pinButtonURL = "URL eures Pinterest-Buttons"; var bs_pinButtonPos = "bottomleft"; var bs_pinPrefix = ""; var bs_pinSuffix = ""; //]]> </script> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> <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 https://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>

Noch ein wenig zur Erklärung:
var bs_pinButtonURL = Hier setzt ihr die Graphikadresse ein
var bs_pinButtonPos = Über diesen Code definiert ihr wo der Button aufpoppen soll, wenn man mit dem Mauszeiger über das Bild fährt.

   center = mittig

   topleft = links oben

   topright = rechts oben

   bottomleft = links unten

   bottomright = rechts unten

jeweils vom Bild aus betrachtet. Wie ihr im Code sehen könnt habe ich den Button am linken unteren Bildrand gesetzt.

5 // Zueltzt speichern wir noch die Vorlage.