Sexy Bookmarks Widget for Blogger

Langkah Pertama
Login ke account blogger anda, terus seperti biasanya masuk ke Edit HTML, Backup Template anda sebelum melanjutkan ke langkah berikutnya, hal ini dimaksudkan kalau-kalau terjadi hal-hal yang tidak diinginkan atau kegagalan dalam memasang widget ini, kemudian cari kode seperti ini: ]]></b:skin> Jika sudah ditemukan, lalu tambahkan kode berikut di bawahnya:
<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}
div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}
div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}
div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://img509.imageshack.us/img509/3131/sexysprite.png') no-repeat !important;
}
.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}
</style>
Kemudian Save Template.Langkah Kedua
Setelah memasukkan kode CSS tadi, kemudian masuk ke mode pengeditan template secara penuh (Expand Widget Templates) dan cari kode <data:post.body/> lalu paste code di bawah ini setelah kode tersebut.
<div class='sexy-bookmarks'><ul class='socials'><li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add to Delicious' rel='nofollow'/></li>
<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Digg This Post' rel='nofollow'/></li>
<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add to Technorati' rel='nofollow'/></li>
<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add to Reddit' rel='nofollow'/></li>
<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Stumble This Post' rel='nofollow'/></li>
<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Share on DesignFloat' rel='nofollow'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Share on Facebook' rel='nofollow'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Share on Twitter' rel='nofollow'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Share on Furl' rel='nofollow'/></li>
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/ThinksFree' title='Subscribe to RSS' rel='nofollow'/></li>
<li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Share on Email' rel='nofollow'/></li>
</ul><span class='sexy-rightside'/></div>
Save Template, lalu lihat hasilnya. contoh dari widget ini bisa dilihat pada blog berikut ini. gimana, sexy ga? hehehe...
Read the full story




Postingan ini terilhami ketika a2i3s jalan-jalan rutin ke
Beberapa waktu yang lalu a2i3s mendapat beberapa pertanyaan di shoutbox tentang bagaimana caranya memasang chicklet Subscriptions count dari layanan RSS Subscription Feedblitz. Sebenarnya cara memasang chicklet tersebut sangatlah mudah, sama halnya dengan memasang chicklet dari layanan Feedburner, namun yang menjadi masalah ternyata menemukan kode chickletnya yang rada-rada ribet, hehe... OK dech, kita langsung aja bahasa tentang bagaimana cara memasang chicklet dari Feedblitz.












Twitter Update