Add Heart Style Social Sharing Widget to Blogger Blog

Want add Social Sharing Widget to Blogger blog. Social share button make blog more visitor friendly. Today I share Heart Style Social Sharing Widget to Blogger. To add just make below steps properly.


LIVE DEMO

1. Login to your Blogger Account.

2. From Dashboard >> Tamplate >> Edit HTML >> Proceed.

3. Don't forget to backup your template first.

4. Check the Expand Widget Templates box.

5. Find out (Press Ctrl+F) the Code   ]]></b:skin>

6. Now Just before the  ]]></b:skin> Paste the following Code

.sr-site{
list-style-type:none;
margin:0;
padding:0;
}
.sr-site li{
display:inline;
width: 60px;
height:60px;
}
.sr-site li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.sr-site li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

7. Go back Blogger and click Layout than Add Gadget >> HTML/Javascript.

8. Paste the below code and Save.

<ul class="sr-site">
<li><a href="http://www.plus.google.com/10795529879"><img src="http://3.bp.blogspot.com/-3PDKY8qjMTM/UOkQYZdIDiI/AAAAAAAAABA/MwN8lfOFaxU/s1600/sr-site.com-google-plus.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/sr-site"><img src="http://3.bp.blogspot.com/-g_pRON8uUhY/UOkQnfp4zHI/AAAAAAAAABI/1WggnpfpmdU/s1600/sr-site.com-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.Stumbleupon.com/Username"><img src="http://2.bp.blogspot.com/-BoupImO2KCw/UOkQ4pikWTI/AAAAAAAAABQ/6g6czm6FfWI/s1600/sr-site.com-stumble.png" title="Add to Stumbleupon" /></a></li>
<li><a href="http://www.twitter/sr-site"><img src="http://3.bp.blogspot.com/-2TDdtTn6q6o/UOkRNDER27I/AAAAAAAAABY/0t04k6iQqCY/s1600/sr-site.com-twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/Sr-Site"><img src="http://4.bp.blogspot.com/-nXGNtJaCM1Q/UOkRf26OJCI/AAAAAAAAABg/UfZ6volpx7c/s1600/sr-site.com-rss.png" title="Add RSS Feed" /></a></li>
</ul>

9. Replace your url where need. You are done.

0 comments:

Post a Comment