SliControl.com: Add

How To Add Ad slot on Side bar on Blogger or Blogspot

<div dir="ltr" style="text-align: left;" trbidi="on">
<h5>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsbCgUSbyiOjn6aW9aPVVpREfbH2sM5VxyN3-MgmpJ6yMk7Xp_FS9ExUeWQAwnMasZicaBiBirWmGb7nN4fKitJFt0ygZZO14URPa8dW7UJ5AUds9eUXyddJqfnRqLe5LX-ajIMnXmoccp/?imgmax=800" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsbCgUSbyiOjn6aW9aPVVpREfbH2sM5VxyN3-MgmpJ6yMk7Xp_FS9ExUeWQAwnMasZicaBiBirWmGb7nN4fKitJFt0ygZZO14URPa8dW7UJ5AUds9eUXyddJqfnRqLe5LX-ajIMnXmoccp/?imgmax=800" /></h5>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsbCgUSbyiOjn6aW9aPVVpREfbH2sM5VxyN3-MgmpJ6yMk7Xp_FS9ExUeWQAwnMasZicaBiBirWmGb7nN4fKitJFt0ygZZO14URPa8dW7UJ5AUds9eUXyddJqfnRqLe5LX-ajIMnXmoccp/?imgmax=800" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsbCgUSbyiOjn6aW9aPVVpREfbH2sM5VxyN3-MgmpJ6yMk7Xp_FS9ExUeWQAwnMasZicaBiBirWmGb7nN4fKitJFt0ygZZO14URPa8dW7UJ5AUds9eUXyddJqfnRqLe5LX-ajIMnXmoccp/?imgmax=800" /><br />
<br />
<span style="color: #666666; font-family: Georgia; font-size: medium;">When I need this type of ad slot to my blog lot of tutorials found on alter the CSS and html. I don’t want to alter my CSS and html, then I found this code to help How To Add Ad slot on Side bar on Blogger or Blogspot.</span><br />
<span style="color: #666666; font-family: Georgia; font-size: medium;">Presently 125x125 ad-spots are the most famous ad dimensions. Both publishers and advertisers display their  advertisement, affiliate  text & pictures. This widget is attract and at the same time these ads do not disturbance  the blog's content.</span><br />
<br /><span style="color: #666666; font-family: Georgia; font-size: medium;">If you plan to sell some Ad place on your blog with these 125x125 ad spots, then follow these simple instructions process and so that you can easily customize it later.</span><br />
<br />
<b>STEP 1</b>:<br />Log in to Blogger, go to "<b>Layout</b>", and click on "<b>Add a Gadget</b>" -> select it as "<b>HTML/JavaScript</b>".<br />Paste this code into the HTML box: <br />
<blockquote>
<center><table border="0"><tr><br /><span style="color: blue;"><th width="126" height="126" align="center"></span><span style="color: blue;"> <span style="color: red;"><img src="<span style="color: black;">Code here</span>"/></span> </th></span><br /><span style="color: blue;"><th width="126" height="126" align="center"> <span style="color: red;"><img src="<span style="color: black;">Code here</span>"/></span> </th></span></tr><tr><br /><span style="color: #9b00d3;"><td width="126" height="126" align="center"> <span style="color: red;"><img src="<span style="color: black;">Code here</span>"/></span> </td></span><span style="color: #9b00d3;"><td width="126" height="126" align="center"><span style="color: red;"> <img src="<span style="color: black;">Code here</span>"/></span> </td></span></tr></table></center></blockquote>
You can change <span style="color: red;">Red with black</span> with your advertiser code<br />
 <b>STEP 2</b>:<br />Save the widget.<br /><b></b><br />
 <b>STEP 3</b>:<br />If you  advertiser affiliate code, you can replace the links in RED in the code above with the new ads.<br />
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT_nC_DqwLbjIEWEAK9MQ2w2poci7UmAWPjqKdbc2FjSmo7nbXn" /><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ9_75LkBGR2iSQANTRq-D5zYduaLfe3bU9gIb7v5GJZ8sxgQFlig" /><br />
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ9_75LkBGR2iSQANTRq-D5zYduaLfe3bU9gIb7v5GJZ8sxgQFlig" /><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ9_75LkBGR2iSQANTRq-D5zYduaLfe3bU9gIb7v5GJZ8sxgQFlig" /><br />
  </div>

How To Add Ad slot on Side bar on Blogger or Blogspot

When I need this type of ad slot to my blog lot of tutorials found on alter the CSS and html. I don’t want to alter my CSS and html, th...

How To Add “Stay Connected” Widget for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
  <br />
<span style="font-size: x-large;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-7AfftjgWHp2f8rUvYeemliKtX5BkImlN-Ajp-c0jf9r61Wpou4LEXXF5o-A8G6xSGA5xPfTsTVYGWZc_TYBnh6VfN4Qe8tTJqDe18NbZdGDcO-FKU1OWjqFia1BM4S17sl71U9AGPM0D/s1600/stay+connected.png" />  <a href="http://feeds.feedburner.com/btzz"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFbDoUz7aS1aoBzFG-ZcIbtxfXzbUrThAAjhBygg3qKoC_RV8cdzNzKcZ1ILYri4bZYhayvTTnxbCCx7LkERhKwHBM3RbZm1lxnjvYCKFpfiHJrBSOI4cjNzQDGA5AYQB94-B8s_XBV2o/s1600/connect-rss-feed.png" /></a>    <a href="https://twitter.com/#!/shipsocker"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtKqD7JoOkGFXO8grXrvAG7DqPXBdK0WPPQmVXJxqnICuWggma0f5nVe14e5aq83xtSA5HrnBKqrpi_Fyp3ZttkCLRnItDrsJRdM4QE6YpmTi58h10J36ILL2bjU2wPPAE95XC3-wvZDQ/s1600/connect-twitter-follow.png" /></a>   <a href="http://www.facebook.com/BloggerTrickzz"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg73RvvMYNbzu_RXeXdoUmR3MF3-Xu-zB9yjUHdeYuSQP_7cI6L8qMTMOWe_5DfK1VgyvZ9S6jGTnlkAVpjlk5I8N2-j6-DSVYnync-u9jVuspfvv6YuoM3A8jqZA6rdPOqlrvpSv84U2s/s1600/connect-facebook-follow.png" /></a></span>  <br />
<b></b>  <br />
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">You want this type of “Stay Connected” Widget for your Blogger blog or website . It awesome from the blogger community . Lot of Stay connected widget are available so I give you this widget with simple steps to involve and you get little and cute widget display on your blog  </span><br />
<span style="font-size: large;"><span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="color: blue; font-family: Georgia, Times New Roman, serif;">---------------------------------------------------------- -------------</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">    <span style="color: blue;">  How To Add “Stay Connected” Widget for Blogger  </span></span><br />
<span style="color: blue; font-family: Georgia, Times New Roman, serif; font-size: large;">------------------------------------------------------------------------</span><br />
<ul>
<li><span style="font-family: Georgia, Times New Roman, serif; font-size: large;">Login >>  Your blogger account </span></li>
</ul>
<ul>
<li><span style="font-family: Georgia, Times New Roman, serif; font-size: large;">Dashboard > Layout <b>></b> Add a gadget <span style="background-color: white; color: #333333; line-height: 19.200000762939453px;"><b>></b> </span><i>HTML/JavaScript.</i></span></li>
</ul>
<ul>
<li><span style="font-family: Georgia, Times New Roman, serif; font-size: large;">Please Paste below code and save it.</span></li>
</ul>
<span style="font-size: large;"><span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
</span><br />
<blockquote class="tr_bq">
<span style="font-family: Courier New, Courier, monospace;"><table border="0"><tbody><br /><tr><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-7AfftjgWHp2f8rUvYeemliKtX5BkImlN-Ajp-c0jf9r61Wpou4LEXXF5o-A8G6xSGA5xPfTsTVYGWZc_TYBnh6VfN4Qe8tTJqDe18NbZdGDcO-FKU1OWjqFia1BM4S17sl71U9AGPM0D/s1600/stay+connected.png" /></td><td><br /><a target="_blank" href="http://feeds.feedburner.com/<span style="background-color: white; color: #cc0000;">slicontrolcom</span>" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFbDoUz7aS1aoBzFG-ZcIbtxfXzbUrThAAjhBygg3qKoC_RV8cdzNzKcZ1ILYri4bZYhayvTTnxbCCx7LkERhKwHBM3RbZm1lxnjvYCKFpfiHJrBSOI4cjNzQDGA5AYQB94-B8s_XBV2o/s1600/connect-rss-feed.png" /></a></td><td><br /><a target="_blank" href=<a href="https://twitter.com/#!/ Slicontrol""><span style="color: black;">https://twitter.com/#!/</span><span style="background-color: white;"><span style="color: black;"> </span><span style="color: blue;">Slicontrol</span></span>"</a> imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtKqD7JoOkGFXO8grXrvAG7DqPXBdK0WPPQmVXJxqnICuWggma0f5nVe14e5aq83xtSA5HrnBKqrpi_Fyp3ZttkCLRnItDrsJRdM4QE6YpmTi58h10J36ILL2bjU2wPPAE95XC3-wvZDQ/s1600/connect-twitter-follow.png" /></a></td><td><br /><a target="_blank" href="http://www.facebook.com/<span style="background-color: white; color: magenta;">slicontrol</span><span style="background-color: yellow;"></span>" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg73RvvMYNbzu_RXeXdoUmR3MF3-Xu-zB9yjUHdeYuSQP_7cI6L8qMTMOWe_5DfK1VgyvZ9S6jGTnlkAVpjlk5I8N2-j6-DSVYnync-u9jVuspfvv6YuoM3A8jqZA6rdPOqlrvpSv84U2s/s1600/connect-facebook-follow.png" /></a></td></tr><br /></tbody></table><br /><a href="<a href="http://www.slicontrol.com/" title="http://www.slicontrol.com/">http://www.slicontrol.com/</a>"><img alt="Best Blogger Tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIStb3F9c3IfUi0o1AVfonRpQDBbkxY3x6JmoI4ZKmMGOencPFu42PwaBkGcCe5kw3scuZOCVkIcJsZMCFzP3p3ghUgNcx3lnkQw5uIKDu0DD16lCo5rgkC-P2wXJuD2vxRPLfWs2bhHIb/s1600/best+blogger+tips.png" /></a></span></blockquote>
<span style="color: blue; font-family: Georgia, Times New Roman, serif; font-size: large;">-----------------------------------------------------------</span><br />
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><b>      </b><span style="color: blue;">Customizations Your Code Here</span> </span><br />
<span style="color: blue; font-family: Georgia, Times New Roman, serif; font-size: large;">-----------------------------------------------------------</span><br />
<ul>
<li><span style="font-family: Georgia, Times New Roman, serif; font-size: large;">Change<span style="background-color: white;"> <span style="color: #cc0000;">Slicontrolcom</span> </span>to your feedburner account name  </span></li>
</ul>
<ul>
<li><span style="font-family: Georgia, Times New Roman, serif; font-size: large;">Change <span style="color: blue;">slicontrol</span> to  your twitter account name. </span></li>
</ul>
<ul>
<li><span style="font-family: Georgia, Times New Roman, serif; font-size: large;">Change <span style="color: magenta;">slicontrol</span> to your facebook page name. </span></li>
</ul>
<span style="font-size: large;"><span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Save your template and you are done.   </span></span></div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><ins class="adsbygoogle" data-ad-client="ca-pub-5483023600857989" data-ad-slot="9199356664" style="display: inline-block; height: 90px; width: 728px;"></ins></span><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<br />
<div id="engageya_tag" style="clear: both;">
<script type="text/javascript">var dbnwid=46127; var dbnpid=98929; var dbnwebid=49423; var dbnlayout=22; var dbncolor="#0268b0"; var dbntitlefontsize="14"; var dbnbgcolortype=1; var dbnheader="You might enjoy reading:"; var dbnremindercolor=2; var dbn_protocol = (("https:" == document.location.protocol) ? "https://" : "http://"); document.write(unescape("%3Cscript src='" + dbn_protocol + "widget.engageya.com/sprk.1.0.2.js' id='grazit_script' class='grazit_script' type='text/javascript'%3E%3C/script%3E")); </script></div>
<div id="engageya_tag" style="clear: both;">
<script type="text/javascript">var dbnwid=45002; var dbnpid=98929; var dbnwebid=49423; var dbnlayout=20; var dbncolor="#0268b0"; var dbntitlefontsize="14"; var dbnbgcolortype=1; var dbnheader="You might enjoy reading:Follow"; var dbnremindercolor=2; var dbn_protocol = (("https:" == document.location.protocol) ? "https://" : "http://"); document.write(unescape("%3Cscript src='" + dbn_protocol + "widget.engageya.com/sprk.1.0.2.js' id='grazit_script' class='grazit_script' type='text/javascript'%3E%3C/script%3E")); </script></div>
<div class="OUTBRAIN" data-src="DROP_PERMALINK_HERE">
</div>
<script type="text/javascript">(function(){window.OB_platformType=8;window.OB_langJS="http://widgets.outbrain.com/lang_en.js";window.OBITm="1392063388974";window.OB_recMode="brn_strip";var ob=document.createElement("script");ob.type="text/javascript";ob.async=true;ob.src="http"+("https:"===document.location.protocol?"s":"")+"://widgets.outbrain.com/outbrainLT.js";var h=document.getElementsByTagName("script")[0];h.parentNode.insertBefore(ob,h);})();</script>
</div>

How To Add “Stay Connected” Widget for Blogger

You want this type of “Stay Connected” Widget for your Blogger blog or website . It awesome from the blogger community ...

How To Add Stylish Recent Comment Widget With Thumbnail

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<h3>
 </h3>
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">There are several Recent comment widget are released by the bloggers. But this  Recent Comments Widget is different with regular comment widget. This recent comment widget has displays recent blog comments on your sidebar.You can always use this widget to display the recent comments of anywhere on your blog.  This looks exactly Round avatar style with Recent Comments Widget. This widget is highly customizable. So that you can easily customize your recent comments widget. have a fun</span><br />
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><br />
<span style="color: blue;"><b>----------------------------------------------------------------------------------------------------</b></span></span><br />
<span style="color: blue; font-family: Georgia, Times New Roman, serif; font-size: large;"><b>  </b>How To Add Stylish Recent Comment Widget With Thumbnail ?</span><br />
<span style="color: blue; font-family: Georgia, Times New Roman, serif; font-size: large;"><b>----------------------------------------------------------------------------------------------------</b></span><br />
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">1, Go to <i>Blogger Dashboard </i>> <i>Layout.</i></span><br />
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><i><br /></i>
2. Click on <i>Add a Gadget</i> > <i>HTML/JavaScript.</i></span><br />
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><i><br /></i>
3. Paste below code and save it.<em></em></span><br />
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><br /></span>
<blockquote class="tr_bq">
<div class="prettyprint prettyprinted" style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><span class="tag"></span><style type="text/css">    ul.latest_recent_comments{list-style:none;margin:0;padding:0;}    .latest_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}    .latest_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}    .latest_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}    .latest_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}</span><br />
<span style="font-family: Courier New, Courier, monospace;">.latest_recent_comments span{display:none;}</style><script type="text/javascript">//<![CDATA[    // Recent Comments Settings    var    numComments     = 8,    showAvatar     = true,    avatarSize     = 60,    roundAvatar    = true,    characters     = 30,    showMorelink    = true,    moreLinktext    = "More &#65533;",    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",    hideCredits    = true;//]]></script></span></div>
<span style="font-family: Courier New, Courier, monospace;"><script type="text/javascript" src="http://yourjavascript.com/1134142384/recentpost.js"></script><script src="http://www.<span style="color: #cc0000;">slicontrol.com</span>/feeds/comments/default?alt=json&amp;callback=latest_recent_comments&amp;max-results=5" type="text/javascript"></script></span></blockquote>
<br />
<div class="prettyprint prettyprinted" style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">4. Now change <i><span style="color: #cc0000;">Slicontrol.com</span> </i> with your own blog URL.</span><br />
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><br /></span></div>
<div class="prettyprint prettyprinted" style="text-align: left;">
</div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">5. Now save you widget.</span></div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-5483023600857989" data-ad-slot="9199356664" style="display: inline-block; height: 90px; width: 728px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

How To Add Stylish Recent Comment Widget With Thumbnail

There are several Recent comment widget are released by the bloggers. But this Recent Comments Widget is different with regular comme...

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

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