Sprite Social Bookmark and Share

Sobat blogger satu ini @Easeblogger selaku pemilik blog Easeblogger Blogger, mungkin bisa menjadi acuan kita dalam memperdalam skill blog & menghias blog. Artikel yang dibahas disana lugas jadi mudah untuk dipahami. Selidik punya teliti, Beben Koben si bloglang anu ganteng kalem tea kepincut dengan share and bookmark yang dia miliki ;))
Tertera begini diatasnya tuh "Thanks For Reading This! Kindly Bookmark and Share it." Terpincut karena metode yang dipakai menggunakan teknik image sprite, seperti sexy bookmark use pure CSS.
Koben praktekan, dan langsung dipasang di blog :D Bila sobat² juga kepingin bookmark and share model begitu, mari kita simak tutorial berikut!

Kode CSS

#share-it ul {
list-style: none;
clear: none;
margin: 5px 0;
padding: 0;
}
#share-it ul li {
display: inline;
background: none;
margin: 0;
padding: 0;
}
#share-it ul li a {
display: block;
float: left;
width: 32px;
height: 32px;
cursor: pointer;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UADTW78uYHg-p-mB5X_MuHQ_dBCIG61f1VIZ_QOt2rX-Gv5_aKVKABQ1gxBMsgLrqamqlAFU9ggka0QcduUC_XXf5Su4MnPDTvlteL5V4x7MeZ52biRfAz4YU5NiuMhIzBJMKfMRKbTm/');
margin-left: 3px;
background-repeat: no-repeat;
margin-right: 2px;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#share-it ul li a.twitter {
background-position: 0 0;
}
#share-it ul li a.twitter:hover {
background-position: 0 -33px;
}
#share-it ul li a.facebook {
background-position: -32px 0;
}
#share-it ul li a.facebook:hover {
background-position: -32px -33px;
}
#share-it ul li a.stumbleupon {
background-position: -64px 0;
}
#share-it ul li a.stumbleupon:hover {
background-position: -64px -33px;
}
#share-it ul li a.digg {
background-position: -192px 0;
}
#share-it ul li a.digg:hover {
background-position: -192px -33px;
}
#share-it ul li a.reddit {
background-position: -160px 0;
}
#share-it ul li a.reddit:hover {
background-position: -160px -33px;
}
#share-it ul li a.google {
background-position: -128px 0;
}
#share-it ul li a.google:hover {
background-position: -128px -33px;
}
#share-it ul li a.delicious {
background-position: -480px 0;
}
#share-it ul li a.delicious:hover {
background-position: -480px -33px;
}
#share-it ul li a.mixx {
background-position: -96px 0;
}
#share-it ul li a.mixx:hover {
background-position: -96px -33px;
}
#share-it ul li a.technorati {
background-position: -416px 0;
}
#share-it ul li a.technorati:hover {
background-position: -416px -33px;
}
#share-it ul li a.friendfeed {
background-position: -384px 0;
}
#share-it ul li a.friendfeed:hover {
background-position: -384px -33px;
}
#share-it ul li a.linkin {
background-position: -256px 0;
}
#share-it ul li a.linkin:hover {
background-position: -256px -33px;
}
#share-it ul li a.feed {
background-position: -287px 0;
}
#share-it ul li a.feed:hover {
background-position: -287px -33px;
}
#share-it ul li a.skype {
background-position: -320px 0;
}
#share-it ul li a.skype:hover {
background-position: -320px -33px;
}
#share-it ul li a.yahoobuzz {
background-position: -448px 0;
}
#share-it ul li a.yahoobuzz:hover {
background-position: -448px -33px;
}
#share-it ul li a.myspace {
background-position: -512px 0;
}
#share-it ul li a.myspace:hover {
background-position: -512px -33px;
}
#share-it ul li a.more {
background-position: -576px 0;
}
#share-it ul li a.more:hover {
background-position: -576px -33px;
}

Letakkan bumbu CSS diatas kode ]]></b:skin> Untuk ramuan HTML biasanya setelah kode <data:post.body/>
Karena takut bentrok maka kode HTML didownload saja yah HTML coded (via Ziddu) :P
SAVE.

DEMO

http://jsbin.com/utoqoj

Semoga bermanfaat :)
Happy bookmark and share \m/