Cara Buat Butang Sosial "Labnol Style"

Butang Sosial Dengan Hover Efeck Yang Boleh Anda Letakan Mana-mana Bahagian Dalam Widget Blog Anda,Keunikan Pada Butang Social Ini Apabila Disentuh CURSOR Ia Akan Bertukar Warna:

Layout' > Add a Gadget' > 'HTML/Javascript

Twitter Facebook RSS YouTube Google

​

<style>
.bdsocial {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.bdsocial span {
float: left;
display: inline;
margin-right: 8px;
}
.bdsocial span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijizReKSLk8-cWThQ-zssM3v7wBas6vzaHjeR2INHdYvQCoUyNlY0Eh2nwaLyeI0eqXgt5krLCHF9wZwjI3aPZxuwgUibC2vIJt6ZyqXELmWX0VAXB8AbI7se5eOtPdFdX13VVXNem79w/s1600/blogsdaddy.png") 0 0 no-repeat;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconRSS {background-position: 0 -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS:hover{background-position:0 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}
h6 {font: 90%/1.5em arial, helvetica, sans-serif;
color: #909090;text-transform:uppercase;margin-bottom:10px;}
#footer-logo{text-align:center;margin:10px 0 20px;clear:both}
#footer-logo a{color:#000;text-decoration:none}
.footer-rss{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijizReKSLk8-cWThQ-zssM3v7wBas6vzaHjeR2INHdYvQCoUyNlY0Eh2nwaLyeI0eqXgt5krLCHF9wZwjI3aPZxuwgUibC2vIJt6ZyqXELmWX0VAXB8AbI7se5eOtPdFdX13VVXNem79w/s1600/blogsdaddy.png") no-repeat scroll 0 -180px transparent;display:inline-block;height:20px;width:42px;margin-right:12px;vertical-align:baseline;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}
.footer-nav{margin:0 auto 20px;width:100%}
.footer-nav a{margin:0 4px; color: #666;}
.footer-nav{margin:0 auto 20px;padding:15px 0 0;border-top:solid 1px #ccc;width:86%;text-align:center}.footer-nav
li{padding:0;margin:0;display:inline;list-style:none}.footer-nav a{font:100% "OFL Sorts Mill Goudy TT", Georgia, Times, serif;margin:0 8px;text-transform:uppercase;text-decoration:none}​
</style>
<div class='bdsocial'><span><a href='http://www.twitter.com/komunitiBM' id='iconTwitter' target='_blank' title='Twitter'>Twitter</a></span> <span><a href='http://www.facebook.com/Blogsdaddy' id='iconFacebook' target='_blank' title='Facebook'>Facebook</a></span> <span><a href='http://feeds.feedburner.com/BlogsDaddy' id='iconRSS' target='_blank' title='RSS Feed'>RSS</a></span> <span><a href='http://www.youtube.com/5abiraag' id='iconYouTube' target='_blank' title='YouTube Channel'>YouTube</a></span> <span><a href='https://plus.google.com/106217413057730068740' id='iconGooglePlus' target='_blank' title='Google Plus'>Google</a></span></div>​

Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.