How To Add Metro Style Hover Effect Social Share Below Every Post

Social Share is one of the most essential thing that a blogger should confirm in his website or blog. It has also a great impact on SEO of your page. If people love your content they will share it to their social page. Thats how you will get more visitor. More visitor means more visibility on search engine and more money. When it comes to social share, a good looking eye catching beautiful widget will certainly catch the visitors eye. Here is the code for Windows Metro Style Social Share Widget. Actually Its great really ! See the Demo first, if you have any confusion.

How To Add Metro Style Hover Effect Social Share Below Every Post

Metro Style Hover Effect Social Share Demo

So no Hot Fuzz ! lets get to the station directly. This is just adding some code to your Blogger template.

How To Add Metro Style Hover Effect Social Share to Blogger

  • Go to Blogger Dashboard > Template
  • Click on Edit HTML (Backup Template First, in case anything goes wrong !)
  • Search for this code (Using Ctrl+F)
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
  • Now paste the Below Code just after the above Code

<style type='text/css'> .custom_images ul {display:inline; list-style:none} .custom_images ul li {float:left; margin-right:1px} </style> <div class='addthis_toolbox'> <div style='margin: 50px 0px 10px; font-family: Arial, Helvetica, Sans-serif;color:#000000;font-size: 22px;'><b>Share This Article With Your Friends :</b></div> <div class='custom_images'> <span class='fade'><ul> <li><a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='65' src='https://lh3.googleusercontent.com/-ErgrNe7VaTM/T4ywntBsxGI/AAAAAAAAJHA/79YM4bBqnf4/s57/Facebook%2520alt%25202.png' width='65'/></a></li> <li><a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='65' src='https://lh5.googleusercontent.com/-jZW7xfQfo5c/T4ywo5r5yBI/AAAAAAAAJHM/4ZtK0i8IXyA/s57/Twitter%2520alt%25204.png' width='65'/></a></li> <li><a class='addthis_button_google_plusone_share'><img alt='Share to Google+' border='0' height='65' src='https://lh5.googleusercontent.com/-l682ZOmTPl8/T4ywn1Z13TI/AAAAAAAAJG8/ncHs61veQOo/s57/Google%252B%2520alt%25202.png' width='65'/></a></li> <li><a class='addthis_button_stumbleupon'><img alt='Share to Stumble Upon' border='0' height='65' src='https://lh4.googleusercontent.com/-OBxyCfQlXV4/T4ywonzZx6I/AAAAAAAAJHI/UBRTcapYwCw/s57/StumbleUpon%2520alt.png' width='65'/></a></li> <li><a class='addthis_button_evernote'><img alt='Share to Evernote' border='0' height='65' src='https://lh4.googleusercontent.com/-RCzpjgpIEcE/T4y74V6mhzI/AAAAAAAAJH8/ex7WdsezcYk/s57/evernote-icon.png' width='65'/></a></li> <li><a class='addthis_button_blogger'><img alt='Share to Blogger' border='0' height='65' src='https://lh6.googleusercontent.com/-DkPVHUpO5Mc/T4y73abYX4I/AAAAAAAAJH0/1xfolEU-Y_k/s57/Google%2520Blogger.png' width='65'/></a></li> <li><a class='addthis_button_email'><img alt='Share to Email' border='0' height='65' src='https://lh4.googleusercontent.com/-CxGRg2HeAXc/T4y73bmCVAI/AAAAAAAAJHw/gaA6Y7GwQZU/s57/Mail%2520alt.png' width='65'/></a></li> <li><a class='addthis_button_yahoomail'><img alt='Share to Yahoo Messenger' border='0' height='65' src='https://lh6.googleusercontent.com/-z9ucAlSwZ1o/T4y-uaIEpNI/AAAAAAAAJIc/YL6sPfqvFkk/s57/Yahoo%2521%2520alt%25201.png' width='65'/></a></li> </ul></span> </div> </div>

How To Add Metro Style Hover Effect Social Share Below Every Post

How To Add Metro Style Hover Effect Social Share Below Every Post

  • Now Find </body> on your template.
  • And just Above it, paste the Below code.

<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script> <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=nguoiaolam' type='text/javascript'/>

You can also change the Share text, marked in Blue. You See we have used the Popular Addthis Javascript here. You caln also delete a specific shareing widget if you want. So how is it yours?

If you have added it in your blog, please let us know in the comment section. I will save the link for DEMO !

Check Also

How To Submit Verify And Add Google XML Sitemap To Blogspot Blog

Sitemap is very much essential for a website to be crawled effectively. Every site must …

Leave a Reply

Your email address will not be published. Required fields are marked *

*