Useful Info

<div dir="ltr" style="text-align: left;" trbidi="on">
Images are always important for any blog post to attract the visitors. In this post we are providing the <b>Trick To Add a Pinterest Pin It Mouseover Button on Blogger Images</b>.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-Kyp74J43lHw/VHi4Wq1XB6I/AAAAAAAAA6s/OqOzcUXv7rQ/s1600/pin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="pin" border="0" height="444" src="http://2.bp.blogspot.com/-Kyp74J43lHw/VHi4Wq1XB6I/AAAAAAAAA6s/OqOzcUXv7rQ/s640/pin.png" title="" width="640" /></a></div>
<b></b><br />
I am writing this post because of we will see the <b>pin it imag</b>e on our blog posts. Pinning the image will now get more easier for everyone and readers after applying this trick.<br />
The pin it icon will appear on mouse hover and it works on most browsers like <b>Google chrome</b>, Firefox and <b>Internet explorer</b>.<br />
<br />
But it doesn't work in dynamic view, <b>mobile template</b> and when you enter your blog page using read more link.<br />
<h3 style="text-align: left;">
Trick To Add a Pinterest Pin It Mouseover Button</h3>
To get this effect we need to follow below steps:<br />
<h4 style="text-align: left;">
<b>Step 1:</b> </h4>
<br />
Log into your Blogger Dashboard<br />
<b>Then Go to Template > Edit HTML</b><br />
<h4 style="text-align: left;">
<b>Step 2: </b></h4>
<br />
Locate the<b> </body></b> tag in the template. Use<b> Ctrl + F </b>to find <b></body> </b>and paste the following code <b>above/before </b></body> and save the template.<br />
<b><br /></b>
<br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="background-color: white;"><span style="color: #007700;"><script></span>
<span style="color: #888888;">//<![CDATA[</span>
<span style="color: #008800; font-weight: bold;">var</span> bs_pinButtonURL <span style="color: #333333;">=</span> "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
<span style="color: #008800; font-weight: bold;">var</span> bs_pinButtonPos <span style="color: #333333;">=</span> "center";
<span style="color: #888888;">//]]></span>
<span style="color: #007700;"></script></span>
<span style="color: #007700;"><script </span><span style="color: #0000cc;">src=</span>'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' <span style="color: #0000cc;">type=</span>'text/javascript'<span style="color: #007700;">></script></span>
<span style="color: #007700;"><script </span><span style="color: #0000cc;">src=</span>'http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' <span style="color: #0000cc;">type=</span>'text/javascript'<span style="color: #007700;">></script></span>
<span style="color: #888888;"></span>
<span style="color: #007700;"><div</span> <span style="color: #0000cc;">id=</span>'bs_pinOnHover'<span style="color: #007700;">><a</span> <span style="color: #0000cc;">href=</span>"http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html"<span style="color: #007700;">></span>Pin It button on image hover<span style="color: #007700;"></a></div></span></span></pre>
</div>
<h4 style="text-align: left;">
<b>Step 3: </b></h4>
<br />
Now you can see the button on blog images.<br />
Whenever mouse hover the <b>Pinterest</b> pin it icon will appear on your images as shown in the screenshot below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-jtdr926khgk/VHh_1GG3C_I/AAAAAAAAA6c/6zJyF0veBjw/s1600/scree.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="344" src="http://3.bp.blogspot.com/-jtdr926khgk/VHh_1GG3C_I/AAAAAAAAA6c/6zJyF0veBjw/s640/scree.png" width="640" /></a></div>
<br />
<h3 style="text-align: left;">
Changing The Position Of The Pin it! Button If You Want</h3>
<br />
So we got the pin it! button on blog images. But we are able to change the position of the pint it button like<br />
topleft<br />
topright<br />
bottomleft<br />
bottomright<br />
<br />
It is simple to change it by placing the above positions in place of "center". Check the code now.<br />
<br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="background-color: white;"><span style="color: #008800; font-weight: bold;">var</span> bs_pinButtonPos <span style="color: #333333;">=</span> "center";</span>
</pre>
</div>
<br />
If you are using <b>Google Analytics</b>, then you will see the traffic from <b>Pinterest</b> website. We hope that you like our post on this blogger trick. Keep visiting our website for more interesting posts on blogger and others. </div>

Blogger Tricks Trick To Add a Pinterest Pin It Mouseover Button on Blogger Images

Images are always important for any blog post to attract the visitors. In this post we are providing the Trick To Add a Pinterest Pin It M...

Read more

Useful Info

Trick To Add a Pinterest Pin It Mouseover Button on Blogger Images

Popular Posts

Blog archive