Membuat Social Widget dengan mudah

lagi lagi tentang social widget, tapi gak apa apalah yang penting post jalan terus :D nah  social widget kali ini simple tapi keren langsung aja kita lihat kodenya dan demonya

Kode CSS

.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://i1082.photobucket.com/albums/j368/docextreme1/SharingTouchMe.png) no-repeat;
-webkit-transition: ease-in 0.2s all;  
-moz-transition: ease-in 0.2s all;  
-o-transition: ease-in 0.2s all;  
-ms-transition: ease-in 0.2s all;  
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}

Kode Html

<div class='touchme'>
<!--Facebook-->
<a class='facebook' href="https://facebook.com/" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://twitter.com/" rel='external nofollow' target='_blank' ></a>
<!--RSS-->
<a class='rss' href="http://feeds.feedburner.com/" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a rel="author" class='googleplus' href="https://plus.google.com/" target='_blank'></a>
</div> 

Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Unknown, Published at 00.25 and have 5 komentar