Step#1
- Open Blogger Dashboard → Template →Html Editor → Add a Gadget
- Scroll Down and open Html/Javascript Editor
- Now paste the below given code in it.
<style>
.SlidingSocial a{float:left;display:inline;margin-right:8px}
.SlidingSocial a:hover{-webkit-opacity:1;-moz-opacity:1;opacity:1}
.SlidingSocial a{display:block;width:32px;height:32px;text-indent:-9999px;background-color:none;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrNktq5unk6ddafU9utb6qyWUbYeWdsiHxa2KIxcpotUcofjP5pH6c59_9r_VHdbOFSNcIa6Fs5K8Ew_bDRjzX4ivw5flyXbefIOFvB3wHT2Bvow-VF83Cmg74SGuohRkw5eXD0ALdBl0/s164/SlidingSocial.png") 0 0 no-repeat;-xwebkit-opacity:.7;-xmoz-opacity:.7;xopacity:.7;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}
#iconTwitter{background-position:-33px -33px}
#iconTwitter:hover{background-position:-33px 0}
#iconFacebook{background-position:-66px -33px}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS{background-position:0 -33px}
#iconRSS:hover{background-position:0 0}
#iconYouTube{background-position:-99px -33px}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus{background-position:-132px -33px}
#iconGooglePlus:hover{background-position:-132px 0}
</style>
<div class="SlidingSocial">
<a href="http://feeds.feedburner.com/trackmyblog" id="iconRSS" target="_blank" title="RSS Feed">RSS</a>
<a href="http://twitter.com/trackmyblog" id="iconTwitter" target="_blank" title="Twitter">Twitter</a>
<a href="http://www.facebook.com/trackmyblog" id="iconFacebook" target="_blank" title="Facebook Page">Facebook</a>
<a href="http://www.youtube.com/" id="iconYouTube" target="_blank" title="YouTube Channel">YouTube</a>
<a href="https://plus.google.com/+Trackmyblog" id="iconGooglePlus" target="_blank" title="Google Plus">Google+</a>
</div>
Step#2
Now replace trackmyblog with your user id name and you are done
**********************
0 التعليقات: