SEXY BOOKMARK USING PURE CSS

Ini semua tentang CSS. Sobat sudah tahu tentang sexy bookmark :-? Tools untuk share/berbagi sebuah artikel.

Itu dia yg BeBeN si bloglang anu ganteng kalem tea maksudkan b-) Disini BeBeN mau membahas bagaimana membuat sexy bookmark dengan CSS. Apabila disorot salah satu dari iconnya, akan tuing-tuing ke atas juga sob :-"

Mari kita siap-siapkan bahannya apa saja...

.sharing-cl{
overflow:hidden;
margin:0;
padding:0;
list-style:none;
}
.sharing-cl a{
overflow:hidden;
width:75px;
height:30px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url("http://GAMBAR-ICON.png") no-repeat;
}
a.sh-su{background-position:-210px -40px;}
a.sh-feed{background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail{background-position:0 -40px;}
a.sh-digg{background-position:-280px -40px;}
a.sh-face{
margin-right:0;
background-position:-350px -40px;
}
a.sh-mail:hover{background-position:0 1px;}
a.sh-feed:hover{background-position:-70px 1px;}
a.sh-tweet:hover{background-position:-140px 1px;}
a.sh-su:hover{background-position:-210px 1px;}
.sh-digg:hover{background-position:-280px 1px;}
a.sh-face:hover{background-position:-350px 1px;}
#text{
margin-top:3em;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
}
#text a{
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}

Letakkan semua kode CSS diatas itu sebelum tag ]]></b:skin> Disana kita memerlukan sebuah gambar tentunya. Silahkan disave Gambarnya. Sesudah persiapan diatas semua beres, kita tinggal memanggilnya dgn bahasa HTML.

<ul class="sharing-cl" id="text">
<li><a class="sh-mail" href="">email</a></li>
<li><a class="sh-feed" href="">feed</a></li>
<li><a class="sh-tweet" href="">twitter</a></li>
<li><a class="sh-face" href="">facebook</a></li>
<li><a class="sh-su" href="">stumbleupon</a></li>
<li><a class="sh-digg" href="">digg</a></li>
</ul>

Sobat sudah tau kan menempatkan bahasa HTML didalam blog :-/ Ada 2 cara, pertama didalam tag <body> sampai tag </body> dan add a gadget HTML/Javascript. Dalam kasus ini kita memakai cara yg pertama ya :) Cek git dot bro [..]

Nah bagi yg mau melihat trik dan tips sekelumit tentang CSS . Selamat berkreasi, happy blogging sama si Bloglang :)) :-h
Do you like it !¡!

27April2010