Sexy Bookmarks Widget for Blogger

20 July 2009 Leave a Comment

Bararade nu sareksi yeuh?! hohoho... *langsung nyideug mode:ON* langsung aja deh, kali ini a2i3s akan berbagi caranya masang Sexy Bookmarks Widget di Blogspot, sejatina widget ini adalah plugin kang WP alias Wordpress Plugin, untuk penggunan Wordpress bisa langsung mengunduhnya di sini. namun apakah plugin ini bisa dipasang di blogspot? oh tentu bisa. Tak salah memang si pembuat plugin ini menamakan Sexy Bookmarks, karena emang kalo kita pasang di blog kita, akan keliatan lebih nyeksi daripada yang biasa-biasa saja *sedikit dihebatisir* Gimana cara pasangnya, ok mari kita bareng-bareng praktekkan.

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...