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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgacFUhtzLbSXFsSPGsOx7O_AzJ37_1mR-pBuqEz3KAjdGeSDQcvUJP3v2dBoMIO82zn3WxifXUc0vCbLpfFc-AxKHadsxMEtGuRytHmYi4V-Kauib3f_JOg-l0_br0YNDWSJ5ct1Hgy9d8/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!