◄ Min  Size Fonts: + | - | ± Color: Max ►

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('http://1.bp.blogspot.com/-94xCOZSsMhI/Td9Cglmov5I/AAAAAAAAA4M/0kADSqbjdek/share-icons-sprite.png');
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/
Loading...
XSprite Social Bookmark and Share

Subscribe my posts Register For Free!

2 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE