This is an awesome widget with ahover effect. It is very attractive and colourful social widget.
To add this:
1.Go to blogger » Add Gadget» Select HTML/JAVA .
2.Paste following code there.
Code:
<style>
.social{margin: 0 -10px 15px 0; padding:0px; border:0px}
.social ul{list-style:none;display:inline}
.social li{float:left; padding:0 4px 0 0px}
.social li:hover{float:left; padding:4px 4px 0px 0px;opacity:0.2;}
</style>
<div id="sidebar-wrapper" style="overflow: hidden; width: 331px; word-wrap: break-word; margin-top: 15px;">
<div class="social" style="margin: 0 -10px 15px 0; padding: 0px; border: 0px;">
<span class="fade">
<ul style="list-style: none; float: left; padding: 0 4px 0 0px;">
<li style="opacity: 1;">
<a href="http://facebook.com/allin1web" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOLiwqKaB4Cewro8Pdd5NS4vbSEP5a826cFaLvmLUoO_gv8dpLyjdKZBUFFbA9CAt4XVqQtvYQ6nIGtt2mhzVo7hCYGFGvB55clN3UbW51qPWSUFiOODlCnjsazA-AZDsDhw3F-2QADiOG/s1600/Facebook.png" />
</a>
</li>
<li style="opacity: 1;">
<a href="https://plus.google.com/u/0/Google+ ID" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTITJHgQQWFgQ_stHF3fNW2UJLlFZwJsLjBqntw3BXmTe9jT8hhijGTCuB4YVbUatgHDjsU_5RsgnPn5R1md90G3eYzLZapzgU7QbORh5ywxMqzIgzbCtYnGrOvx79rDcEDt6yRa4f0Xf/s1600/Google+.png" />
</a>
</li>
<li style="opacity: 1;">
<a href="http://pinterest.com/allin1web" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvX8lVbHXpNsUXay8iMHy13_cl73o_FS_oHkqB4KzcfoF64v25fhYo7punse7MlFOXtkZEOvEpb-Kmg9w4FIYKFm_jgGBDP_GLThmYKePYEUFI-_mbIOZy9QsJ0bwjSMoOeDRRwbPiokDR/s1600/Pinterest.png" />
</a>
</li>
<li style="opacity: 1;">
<a href="http://feeds.feedburner.com/allin1-Web" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihaP-6vzN58j4tDQJmHOOzUvS4tvpORu08PMz2i2sFI70u2uMNaUL5IeXEfnHSLMvrfOasuodiPtq_Bqq0CewWqbePj-zPfM6YSIHyyHgyp4ui9ih4ch8PuGF_AtCHprbtelWkqHSOIJY3/s1600/RSS+Feed.png" />
</a>
</li>
<li style="opacity: 1; style="float: left; padding: 0 4px 0 0px;">
<a href="http://twitter.com/allin1web" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw-YJSY6IMPCjFC1vrI9thj6BVnL6-BuDjF1zEtjCOfSMa0GSbyQ0CcxGM5Xc9aXBwDKO7P2OjVMM1EAM1JvJwni1dH8fSNSY6ENsoIELR2qy_M80yHnRfHRoanXuL02Luj5TKaU9G_h7_/s1600/twitter.png" />
</a>
</li>
</ul>
</span>
<div style="clear: both;"></div>
</div></div>
3.Change Highlighted text..social{margin: 0 -10px 15px 0; padding:0px; border:0px}
.social ul{list-style:none;display:inline}
.social li{float:left; padding:0 4px 0 0px}
.social li:hover{float:left; padding:4px 4px 0px 0px;opacity:0.2;}
</style>
<div id="sidebar-wrapper" style="overflow: hidden; width: 331px; word-wrap: break-word; margin-top: 15px;">
<div class="social" style="margin: 0 -10px 15px 0; padding: 0px; border: 0px;">
<span class="fade">
<ul style="list-style: none; float: left; padding: 0 4px 0 0px;">
<li style="opacity: 1;">
<a href="http://facebook.com/allin1web" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOLiwqKaB4Cewro8Pdd5NS4vbSEP5a826cFaLvmLUoO_gv8dpLyjdKZBUFFbA9CAt4XVqQtvYQ6nIGtt2mhzVo7hCYGFGvB55clN3UbW51qPWSUFiOODlCnjsazA-AZDsDhw3F-2QADiOG/s1600/Facebook.png" />
</a>
</li>
<li style="opacity: 1;">
<a href="https://plus.google.com/u/0/Google+ ID" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTITJHgQQWFgQ_stHF3fNW2UJLlFZwJsLjBqntw3BXmTe9jT8hhijGTCuB4YVbUatgHDjsU_5RsgnPn5R1md90G3eYzLZapzgU7QbORh5ywxMqzIgzbCtYnGrOvx79rDcEDt6yRa4f0Xf/s1600/Google+.png" />
</a>
</li>
<li style="opacity: 1;">
<a href="http://pinterest.com/allin1web" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvX8lVbHXpNsUXay8iMHy13_cl73o_FS_oHkqB4KzcfoF64v25fhYo7punse7MlFOXtkZEOvEpb-Kmg9w4FIYKFm_jgGBDP_GLThmYKePYEUFI-_mbIOZy9QsJ0bwjSMoOeDRRwbPiokDR/s1600/Pinterest.png" />
</a>
</li>
<li style="opacity: 1;">
<a href="http://feeds.feedburner.com/allin1-Web" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihaP-6vzN58j4tDQJmHOOzUvS4tvpORu08PMz2i2sFI70u2uMNaUL5IeXEfnHSLMvrfOasuodiPtq_Bqq0CewWqbePj-zPfM6YSIHyyHgyp4ui9ih4ch8PuGF_AtCHprbtelWkqHSOIJY3/s1600/RSS+Feed.png" />
</a>
</li>
<li style="opacity: 1; style="float: left; padding: 0 4px 0 0px;">
<a href="http://twitter.com/allin1web" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw-YJSY6IMPCjFC1vrI9thj6BVnL6-BuDjF1zEtjCOfSMa0GSbyQ0CcxGM5Xc9aXBwDKO7P2OjVMM1EAM1JvJwni1dH8fSNSY6ENsoIELR2qy_M80yHnRfHRoanXuL02Luj5TKaU9G_h7_/s1600/twitter.png" />
</a>
</li>
</ul>
</span>
<div style="clear: both;"></div>
</div></div>
4.You are done...
Thank you for this nice and useful post.
ReplyDelete