Mittwoch, 17. September 2014

Pin it!

Das interessiert jetzt wenn überhaupt ausschließlich die Blogger unter euch. Aber da müsst ihr jetzt durch.^^

Auf manchen Blogs sieht man schicke "Pin it!"- Bildchen wenn man mit dem Mauszeiger über ein Foto fährt. Bei mir schlägt da immer sofort das Haben-Wollen durch.
Nach einem kurzen Besuch bei Onkel Google war auch klar, wie es klappt:

Diesen Code


<script>
//<![CDATA[ 
var bs_pinButtonURL = "***"; 
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>
 
direkt oberhalb des schließenden Body-Tags </body> einfügen, Angaben ergänzen, fertig. Bei Blogger findet ihr die besagte Stelle unter "Vorlage" -> "HTML bearbeiten".

Statt der drei Sternchen *** tragt ihr die URL zu eurem "Pin it!"-Bildchen ein und statt "center" in der nächsten Zeile könnt ihr auch topleft, topright, bottomleft oder bottomright wählen. Selbsterklärend, oder? ;-)

Ich habe mir mein eigenes Bildchen gebastelt, nämlich dieses hier:


Es ist ein bisschen transparent, das fand ich ganz hübsch. Ihr dürft es gerne mitnehmen, falls es euch gefällt. Rechtsklick drauf, Graphik speichern unter...ihr kennt das. (Haha, das sieht ja jetzt doof aus - das Bildchen überlagert sich bei einem Mouseover selbst - soll es ja auch.^^)

Bei Fragen fragen. :-)

Keine Kommentare:

Kommentar veröffentlichen