SliControl.com: mouse over

<div dir="ltr" style="text-align: left;" trbidi="on">
When you surf internet some website have image like this mouse over image the “Pin it” button show and you can “Pin it” to your profile. It is interesting ha… Why we have to this option. It must be use our blog or website. Big Yes to answer the all your Questions,some points are best this follow.<br />
  <br />
<h6>
<span style="font-size: medium; font-weight: bold;">We have to admit that this icon button is very useful for several reasons :</span></h6>
  <br />
1. Because Pinterest is an important source of traffic for your blog, especially if it mostly relies on visuals. <br />
2. Because if your readers see a picture at the beginning of the article that they like and they wait till the end of the article to find the Pin It button, they may forget to actually “Pin It”. <br />
3. Because by hovering over the image and seeing the “Pin It” button, it’s possible that your readers will think “Oh I want to Pin It” <br />
  <br />
How to add with Blogger the “Pin it” icon button when scrolling over an image. Blogger it can be much more complicated, especially for those who hate modifying the code for their blog. <br />
Luckily, we found a much easier way to install it on blogger, and we’ve decided to share it with all of our readers! <br />
  <br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQGi2UGY8SNNrBjOEUY1OkUe6HsgLBL_kV1BbO2oA2wBpyDhAsaQFxsHTNP2puWqVDHG9VQvtKPtl1zAdxvILwc1nYbmxTNpJjfjpsB8Tmc_o38GRQwtIXa4YlR9-bs1UHVPK00UGqPw/w350-h207-p-no/" /> <br />
<h6>
 </h6>
<h6>
<span style="font-size: large;">How it Add on Blogger Account :</span></h6>
  <br />
1. Make sure you save everything before hand! Go to “Template” then click “backup / restore” and then “Download the Template.”  This way, you ensure you won’t lose anything. <br />
2. Go to “Template” and click “edit HTML”. Search among  your function ctrl+F the tag :( </ body> ) <br />
3. Paste the following code just before the tag ( </ body> ) <br />
<pre style="background-color: #eeeeee; margin: 0px 0px 1em; max-height: 400px; max-width: 700px; overflow: auto; padding-bottom: 0.5em; padding-left: 1em; padding-right: 1em; padding-top: 0.5em;"><span style="background-color: #cccccc; border-right: 1px solid; color: #787878 !important; float: left; margin: 0px 1em 0px -1em; text-align: right;"><span style="display: block; padding-bottom: 0px; padding-left: 1em; padding-right: 0.5em; padding-top: 0px;">1</span></span><code style="overflow: auto; white-space: pre; word-wrap: normal;"><script> //<![CDATA[ var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOzePW5SGK9h1DPHj3csjZpzUW_3SbPrCWIStQCT11Gg0GMt60EaaQpxppvi1BgGgziC4ctG-GtORwTbMmpB71TnPH0G-W8JKjTdbySB6vfFmzO0kFb8mlatyIKaKIVrlyOoYO9KK3dvSx/s1600/pinterestx1_72.png"; var bs_pinButtonPos = "center"; var bs_pinPrefix = ""; var bs_pinSuffix = ""; //]]> </script></span> <span id="preserve1792075d58f540148a66300c583989a8" class="wlWriterPreserve"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script></span> <span id="preserve8a39419a1e64451ea00d1eb6ca228344" class="wlWriterPreserve"><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></code><span class="cl"></span></pre>
<br />
Save Template . <br />
All done. <br />
  <br />
<span style="color: #666666; font-size: large;"><strong>You can now customize your icon button:</strong></span> <br />
  <br />
-    You can create your own button if you don’t care for the original one. You can simply create it (a 50x50px size seems ideal) and host it on Picasa, image shack or any other. Get the address of the image (right click > copy the address of the image click) and paste it to replace the red line in the code. <br />
-    The default button is placed at the top right but you can change it up by replacing the top right mention in blue in the code with: <br />
center <br />
topleft <br />
bottomleft <br />
bottomright <br />
  <br />
You can now save your template and check your blog to make sure the button works properly! <br />
Thanks to Bloggersentral for the tips! <br />
Share with us your blog with your new Pin-It button in the comments below.</div>

How To Add a Mouse-over “Pin It” Button To Your Blog Images

When you surf internet some website have image like this mouse over image the “Pin it” button show and you can “Pin it” to your profile. It...