Spiceupyourblog like floating sharing widget for blogger

Hi friends, After publishing spiceupyourblog template, I made this widget by compressing the codes and credit goes to a lot of people for this widget. The widget is named as "Spiceupyourblog like floating sharing widget". Because, You can see a widget like this in spiceupyourblog which is made by Paul Crowe but he hasn't shared how to make that. I tried a lot to make that but I can't. At last, I made that and I am using that now. And also, this widget has a specialty. This is completely No CSS widget.

Preview : 

     

I think you all had liked the widget by seeing the demo. This widget design is actually made by Paul Crowe of Spice Up Your Blog; but he only knows the code for making that. I had made the code myself like that. For share buttons, I had used the AddThis buttons. Actually, I had customized the AddThis floating buttons like that of spice up your blog.

Installation Notes

• Go to blogger.
• Go to the layout tab.
• Click on Add A Gadget button anywhere or click on any HTML/JavaScript widget.
• If you had clicked on Add a Gadget button, please choose HTML/JavaScript  and paste the code given below or if you clicked on an existing HTML widget, just paste the code below the ending of that code.

Dark Theme

<!-- TrueBloggerTricks AddThis Floating Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style"  style="position: fixed; left: 160px; top: 150px; background:#000; border:2px solid #ddd;">
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtQDapAycwkje4uZsPpuj85OHsl5xH4e6oRQ_bYYWxHG7tcwgwOY8da7XPYJ01WzMDSjBqpEWBHShQ89wJer83ENQ7x0sTc-12AKcMjKmRhyqSj3WfANVoVE9MuQvFVlWKc5gdHkxhSqc/s1600/please-share-this-post.png" /></center>
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_button_pinterest_pinit"></a>
<br />
<a class="addthis_counter"></a><br />
<a href="http://feeds.feedburner.com/truebloggertricks" rel="nofollow" target="_blank" title="Subscribe To Our Rss Feed"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCj9EIHg4yMWArg4-85V39Yx7xsdfZxqoP2EA_iVH80fqMNn_kTFKHWJb2FyXJIHx-rFkVHoOa3Cn_MELD4hnOWOvovDATTWeRWTDzdWGRHb8b071V_iRB-CvSwFNI0-LaVTADHNi5LZc/s1600/rss-updates.png" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks&loc=en_US" rel="nofollow" target="_blank" title="Subscribe To Our Rss Feed"><img align='left' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJ5u1Imxw5xD-QLwiO_TXj73ZIeH4TnFZHaVi9YVcUHq2dh5LNaXejhwy6ElHvAEoBRQ9A2i2gUj9iy69FO9n_tvLMygNOzhO3wHiJGPdpgSAoiM11uYTjrFsKdDcmcgRrfKdcbNc9Rc/s1600/email-updates.png" /></a><br /><br /><br />
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://truebloggertricks.blogspot.com' target='blank' style='color:#CAC8C8;'>Widgets</a></p></div> <script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/></script>
<!-- TrueBloggerTricks AddThis Floating Button ENDS -->

• left: 160px; top: 150px; background:#000; border:2px solid #ddd; - Change these positions and background colors according to your blogger template.
• http://feeds.feedburner.com/truebloggertricks - Change this to your Feed URL
• http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks&loc=en_US - Change this to your FEED URL

The above code I had provided can be used only for those who want the dark themes for their floating widget.

White Theme

<!-- TrueBloggerTricks AddThis Floating Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style"  style="position: fixed; left: 250px; top: 280px; background:#fff; border:2px solid #ddd;">
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg34gqpdHUpS9WWlhvs8BUVj1ACvLuBr8yH6zMItxQBEMd22i7aC6ZUpOaMS3aCnQ1bYxosnOMvR_JZKty4Ge-Umr8oQA579n9F594e3aoskBw4XQe3IYczAa2Udgz-kiuogaYgMHM-2N8/s1600/12.png" /></center>
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<br />
<a class="addthis_counter"></a><br />
<a href="http://feeds.feedburner.com/truebloggertricks" rel="nofollow" target="_blank" title="Subscribe To Our Rss Feed"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCj9EIHg4yMWArg4-85V39Yx7xsdfZxqoP2EA_iVH80fqMNn_kTFKHWJb2FyXJIHx-rFkVHoOa3Cn_MELD4hnOWOvovDATTWeRWTDzdWGRHb8b071V_iRB-CvSwFNI0-LaVTADHNi5LZc/s1600/rss-updates.png" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks&loc=en_US" rel="nofollow" target="_blank" title="Subscribe To Our Rss Feed"><img align='left' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJ5u1Imxw5xD-QLwiO_TXj73ZIeH4TnFZHaVi9YVcUHq2dh5LNaXejhwy6ElHvAEoBRQ9A2i2gUj9iy69FO9n_tvLMygNOzhO3wHiJGPdpgSAoiM11uYTjrFsKdDcmcgRrfKdcbNc9Rc/s1600/email-updates.png" /></a><br /><br /><br />
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://truebloggertricks.blogspot.com' target='blank' style='color:#CAC8C8;'>Widgets</a></p></div> <script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/></script>
<!-- TrueBloggerTricks AddThis Floating Button ENDS -->

•  left: 250px; top: 280px; background:#fff; border:2px solid #ddd  - Change these positions and background colors according to your blogger template.
• http://feeds.feedburner.com/truebloggertricks - Change this to your Feed URL
• http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks&loc=en_US - Change this to your FEED URL

Transparent Theme

<!-- TrueBloggerTricks AddThis Floating Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style"  style="position: fixed; left: 230px; top: 300px; background:none; border:2px solid #ddd;">
<center><img width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg34gqpdHUpS9WWlhvs8BUVj1ACvLuBr8yH6zMItxQBEMd22i7aC6ZUpOaMS3aCnQ1bYxosnOMvR_JZKty4Ge-Umr8oQA579n9F594e3aoskBw4XQe3IYczAa2Udgz-kiuogaYgMHM-2N8/s1600/12.png" style="background:#fff;"/></center>
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<br />
<a class="addthis_counter"></a><br />
<a href="http://feeds.feedburner.com/truebloggertricks" rel="nofollow" target="_blank" title="Subscribe To Our Rss Feed"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCj9EIHg4yMWArg4-85V39Yx7xsdfZxqoP2EA_iVH80fqMNn_kTFKHWJb2FyXJIHx-rFkVHoOa3Cn_MELD4hnOWOvovDATTWeRWTDzdWGRHb8b071V_iRB-CvSwFNI0-LaVTADHNi5LZc/s1600/rss-updates.png" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks&loc=en_US" rel="nofollow" target="_blank" title="Subscribe To Our Rss Feed"><img align='left' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJ5u1Imxw5xD-QLwiO_TXj73ZIeH4TnFZHaVi9YVcUHq2dh5LNaXejhwy6ElHvAEoBRQ9A2i2gUj9iy69FO9n_tvLMygNOzhO3wHiJGPdpgSAoiM11uYTjrFsKdDcmcgRrfKdcbNc9Rc/s1600/email-updates.png" /></a><br /><br /><br />
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://truebloggertricks.blogspot.com' target='blank' style='color:#CAC8C8;'>Widgets</a></p></div> <script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/></script>
<!-- TrueBloggerTricks AddThis Floating Button ENDS -->

• left: 230px; top: 300px; background:none; border:2px solid #ddd;  - Change these positions and background colors according to your blogger template.
• http://feeds.feedburner.com/truebloggertricks - Change this to your Feed URL
• http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks&loc=en_US - Change this to your FEED URL

Best Placement Tip

I think you would get more shares if you place this widget in the left side because many of my friends said they like to see the floating widget in the left side and also most of the sites use the floating widget in the left side. So you too can.