Show Mobile Navigation
,

Add a Spining Social Sharing Widget Below Blogger Post

Hemant Verma - 2:57 PM
Hello friends, Hope you are doing well with blogging, as you all know that we didn't post any social sharing widget since a month, but today we have a new and awesome widget for you all, as many readers request that please share your social sharing widget of houses which looks below at every post/article and they have a beautiful spining hover effect. So, that will be a very unique thing for you all.




Add Spining Social Sharing House Below Post



  • Login to Blogger > Dashboard
  • Click on Drop Down Menu and Select Template
  • Backup your TemplateBefore making any changes to your blog
  • Press Ctrl + F and search the code shown below

]]></b:skin>



  • Paste below code just before it.

p#wg-socialicons img {
-moz-transition:all .5s ease-in-out;
-webkit-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}

p#wg-socialicons img:hover {
-moz-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-o-transform:rotate(60deg);
-ms-transform:rotate(60deg);
transform:rotate(60deg);



  • Now Search for below code.


<data:post.body/>


  • Now, Paste below code just after it.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><p id='wg-socialicons'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigIejtYytMDXfQtLpP2mfJ90Zsi4O01VFsdoSUJg9Y0RbcDsuaeYwYI7iHJLcLY4o7mw0DYe3kXm8lDf-AxdjiGrZe653pYDgeaK1GCr2kf4Dqab6ofBWXBzs2Bu4TOkTFq-9_EPcLi5wN/s1600/1354123083_FacebookShop+-+Copy.png' title='Share on Facebook'/></a>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvH4iuApzkfhlZxsrEFiDzUfA5jyXuoOpK-BEc_sOOGtTYguTYfGUGA9sJScRt6qDbzaEnQ5mPeaLIPshA7RMx3i74kSdYFWhtaDVtGugwUPAR_09nDqEfeagOlA_uWx-_DYG-LW1FT2be/s1600/1354123098_twittershop+-+Copy.png' title='Share on Twitter'/></a>   
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwCN_ftqI5A4yLsD9a11l7XAmnz_NCWSuZ6X-79SC1VJEsVanPUsXyriOlUpTZB7I7wZSKwIwJ6LMX-7BWQ735ZhPuhSl5SbXlwJL_WMO8eCPB4DEBg2OnS3u5zPBCPIAsDhga5FaMnaFD/s1600/1354123128_dribbbleshop.png' title='Share on Digg'/></a>
</p>
</center>
</b:if>


  • Now Save Your Template.


 Final Words...!

You can share your articles on Facebook, Twitter, Dribble just only click on any social hut and your article will automatically share on your social network, and you don't need to sign in and not also need to copy paste the link and other boring things. Just Go and Add this :)

2 comments:

  1. Hi,
    +Hemant
    This is really awesome social sharing widget... loved it.

    ReplyDelete
    Replies
    1. Hi,

      It's my pleasure to have active readers like you.


      Thanks & Regards,
      Hemant Verma

      Delete

You may use these HTML tags and attributes: <a href="" title=""> </a> <b> </b><strong> </strong>

 



Make Your Blog Like a Pro
About | Contact | Affiliates | Privacy Policy | TOS