Latest On BB :
Home » Blogger Tips » Add Pinterest Button OnHover To Images In Blogger

Add Pinterest Button OnHover To Images In Blogger

Add or show pinterest button on mouse hover in blogger for images is really a great idea. You might be noticed that pinterest is really a great new site which provides us, huge traffic with our pins. But it may not meet the highs of facebook and twitter. In a popularity race it is really hard to beat twitter and facebook. So we recommend you to use this in your blog, so that when user moves cursor on a image, pinterest button appears. And getting pins is getting traffic. Using pinterest button for images developing day by day. So I do recommend you, because a part  of traffic.

Add pin it button to images to blogger

Add pin it button to images to blogger

 

  1. Login into Blogger
  2. Select your blog if you have many
  3. Then migrate to TEMPLATE –> Click on “EDIT HTML
  4. Then find for </body>
  5. Then copy the below code and paste above it / before it..
  6. Then click on save template .

 

<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’>
</script>

 

Customizaton of code on onhover pin it button in blogger

  • Change the highlighted code to use other pinterest button
  • You can change the image location to left , right , topleft, topright, bottomright, bottomleft
  • If you want to add a prefix/suffix to the pin description, simply add your text inside the quotes, like so:var bs_pinPrefix = ” Write Your Text Here To Use As Prefix If You Wish! “; var bs_pinSuffix = ” Write Your Text Here To Use As Suffix If You Wish! “;
  • If you want to block or exclude any image then simply use below code <div class=’nopin’>
    Place Your Image Tags Here.
    </div>

About Tharun

Hey! Tharun here. A Blogger makes blogging on wordpress tips, blogger tricks, SEO tricks, Android Apps, He love to share what he knows. Meet him at Facebook, Twitter. Get free Wordpress Installation Service Contact Here.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge