1. 2. 3. Classifieds|Blogger Tips|SEO: Social Media Sites Sharing Widget With Multi Colour Effects on Hover 4. 12. 15. 16. 17. 18. 19. 20. 23. 24.

25. 26. Social Media Sites Sharing Widget With Multi Colour Effects on Hover 27. 28.

29.
One of the well known strategy of building traffic is submitting all blog posts to popular social media sites.This is the best way that will optimize your site not only for building traffic but also helps in making your site popular that results in good search engine rankings.Also sharing posts in social media sites makes your sites more visible and helps in building a strong community.Updating your blog with attractive sharing links for social media sites will motivate visitors to share the site among their friends making more popular and also driving some traffic around the world.So follow this tutorial to add cute social media sharing widget to your blogger hosted blogs.

 To Add this Social Media Sharing Widget follow these steps,

1, Go To Blogger - Design
2, In Page Elements choose Add a gadget
3, Choose HTML/JAVASCRIPT option

And add the following code,


<style>
.box {
-moz-box-shadow: inset 10 0 5px 15px #888;
-webkit-box-shadow: inset 10 0 5px 5px#888;
box-shadow: inset 10 0 5px 5px #888;
background: #f2f2f2;
font-family: verdana;
text-shadow: 1px 1px 1px white;
height:auto;
padding-left: 10px;
}
.topbox h3{
font-family: Times new roman;
padding-top: 10px;
padding-left: 6px;
font-size: 14px;
margin-bottom: 0px;
text-transform: uppercase;
text-shadow:1px 0px 0px #2f2f2f;
box-shadow: 0 4px 2px -2px gray;
}
.myaligntop{
vertical-align:text-top;
}

.twitter {
display: block;
width: 300px;
height: 50px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPkzfRt2pni3Bs2suHuI-jqSgw51WfCMw0iB140BXXAujSskWWbewLkUuohjPBw8kckAmtPcKt_O7_AOmysum5DuIHIAHMh89Hgr5Vy9XK1uq0Fi1HyrsILvPJNbaNNOK16-JhCaWvER8M/s1600/BannerTwitter11.png') bottom;
text-indent: -99999px;
}
.twitter:hover {
background-position: 0 0;
}

.google {
display: block;
width: 300px;
height: 50px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsp3JtKcdlHcnRVyehPB61dUa2gPVeWtKsk5pRPgY-6A6zPt10VNUzDPQiArmhkdi-DqIMZ_FpAcplD-Seb3SgBAgUdyIRJcnWBK1N_XeUm7M3x7O1TMSoI4nfxVmGErwwJI4rBnV0Q6Hp/s1600/BannerGooglePlus11.png') bottom;
text-indent: -99999px;
}
.google:hover {
background-position: 0 0;
}

.facebook {
display: block;
width: 300px;
height: 50px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh64mZ3ZH3YaBtylFG9RL-d83eGnRe6GYDSGkV4xcvPRnxtgTatxWbRwtwjHmZ8xrvxG1ZbvwUHdx5yzPQDi2hfIRJJUosP2_h_IILTPFMkbYktEbsjNkYsDlrt5z5_w25IQ1VI1Szc1ass/s1600/BannerFacebook11.png') bottom;
text-indent: -99999px;
}
.facebook:hover {
background-position: 0 0;
}

.stumbleupon {
display: block;
width: 300px;
height: 50px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5XqnWKjChJOBYcnYFhgaS_lZqNtS9UAbZc_Yog75gEaQTeNWQSq_NDOQCiMXar0_noR0r5bqIQySJnrWZH12a5GyAMdZjyv-TsmiYnlW-ijBSxc0XIcNesgLmuyxVfSBXTIdl8n6YPy_O/s1600/
BannerStumbleUpon11.png') bottom;
text-indent: -99999px;
}
.stumbleupon:hover {
background-position: 0 0;
}
</style>
<td class="box">
<table border="0" width="100%" style="border-collapse: collapse">
<tr>
<td>
<a class="twitter" href="https://twitter.com/#!/freeclassified6" rel="nofollow">Twitter</a>
<a class="google" href="https://plus.google.com/116484357335441652801" rel="nofollow">Google Plus</a>
<a class="facebook" href="http://www.facebook.com/forblog809" rel="nofollow">Facebook</a>
<a class="stumbleupon" href="http://www.stumbleupon.com/stumbler/dajmwt" rel="nofollow">StumbleUpon</a>
</td>



Save your changes.

Before that make some changes to the code,


*Replace freeclassified6 with your own twitter username.

*Replace forblog809 with your facebook username.

*Replace 116484357335441652801 with your G+ profile id.

*Replace  dajmwt  with your Stumbleupon username.

Labels:

30. 31. 32.