How to Add Pinterest Pin It Image Hover Button On Blogger

12 Flares Filament.io Made with Flare More Info'> 12 Flares ×



Pinterest is no doubt one of the fastest growing social media networks. It’s a great platform for photographers, designers and other people who mainly deal with images. But while it may seem that Pinterest is all about images, below that lies a huge marketing potential for your brand, product or blog. Yes, you can bring a lot of traffic to your blog by using Pinterest in the right ways. But I’m no expert in that, so here I’m sharing an expert guide about how to get traffic from Pinterest. In the mean time, you can also follow me on Pinterest.

But in order to do that, you might also want your readers to share your blog content on Pinterest. For that, you need to have the Pin It button on your blog so that users can easily share your images. One way to do that is to display the Pin It button whenever the mouse hovers over an image. 

 

To implement this on your blog :

1. Go to Templates –> Edit HTML
2. Press Ctrl+F and search for </body> tag.
3. Then copy the below code just above the </body> tag.

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

Customizations :

1 . You can change the position of the button. Replace centre by topleft , topright , bottomleft , bottomright .

2 . You can change the Pin It button image by changing the ButtonURL property.


3 . You can also add a default suffix or a prefix to the description while pinning it.


4 . If you don’t want the button to show on a particular image in a post, then switch to the HTML post editor and add the following to the image property :


So the image code will look like :

<img class='nopin' height="391" border="0"width="400" src="http://1.bp.blogspot.com/-YCbNO9wFQrQ/UPrZegPAXVI/AAAAAAAACK8/b7p-0NuZScI/s400/photo.jpg">

That’s it. So start Pinning your and others’ images. And don’t forget to follow my boards there.


Tutorial Credit : Blogger Sentral

12 Flares Twitter 0 Facebook 3 Google+ 4 Buffer 0 Pin It Share 5 Filament.io Made with Flare More Info'> 12 Flares ×
The following two tabs change content below.
A blogger, a social media enthusiast, a photographer and a techy. I love sharing my experiences about these.