Memasang SexyBookmarks ke dalam situs Blog (Blogger)

Pendahuluan

Setelah anda berhasil membuat blog, membuat postingan artikel dan memasang template yang sesuai dengan keinginan. Langkah berikutnya agar anda tidak merasa jemu dengan blog anda, silahkan percantik tampilan blog anda dengan memasang widget-widget yang disukai. Salah satu widget yang dapat mempercantik tampilan blog dan memudahkan pembaca dalam menyebarkan tulisan anda dari blog adalah widget SexyBookmarks.

Wodget ini pada dasarnya diciptakan untuk blog berplatform Wordpress saja. Lalu bagaimana dengan pengguna blogger.com? Ups, jangan khawatir, kita perlu berterima kasih atas jerih payah Naeem Noor di situsnya: CSS Reflex yang berusaha membuat kode widget SexyBookmarks untuk situs blog berplatform Blogger.com.

Sexybookmarks for Blogger v2

Untuk versi sebelumnya adalah Sexy Bookmarks V1 dan sudah cukup banyak dipakai dan hanya terdiri dari satu baris, contohnya bisa anda lihat di halaman o-om.com. Kali ini kita akan menggunakan widget SexyBookmarks v2, contoh realnya dapat anda lihat di situs saya.

Preview

Lihat demo resminya Disini

Sekarang, Mari Kita Mulai.

CATATAN: !Sebelum memulai pengeditan template, jangan lupa untuk mem-backup template anda saat ini!

Login ke blogger.com, kemudian klik Tata Letak pada halaman blog anda. Jika layar sudah tampil, klik Edit HTML. Jika sudah menemui layar seperti berikut, maka kita bisa memulai mengedit:

1. Pertama-tama, pergi ke template editor dan beri tanda centang/check “Expand Widget Template”.
2. Taruh kode (copy-paste) dibawah ini sebelum </head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> 
<script type='text/javascript'> 
jQuery(document).ready(function() { 
// xhtml 1.0 strict way of using target _blank 
jQuery('.sexy-bookmarks a.external').attr("target", "_blank"); 
// this block sets the auto vertical expand when there are more than 
// one row of bookmarks. 
var sexyBaseHeight=jQuery('.sexy-bookmarks').height(); 
var sexyFullHeight=jQuery('.sexy-bookmarks ul.socials').height(); 
if (sexyFullHeight>sexyBaseHeight) { 
jQuery('.sexy-bookmarks-expand').hover( 
function() { 
jQuery(this).animate({ 
height: sexyFullHeight+'px' 
}, {duration: 400, queue: false}); 
}, 
function() { 
jQuery(this).animate({ 
height: sexyBaseHeight+'px' 
}, {duration: 400, queue: false}); 
} 
); 
} 
// autocentering 
if (jQuery('.sexy-bookmarks-center')) { 
var sexyFullWidth=jQuery('.sexy-bookmarks').width(); 
var sexyBookmarkWidth=jQuery('.sexy-bookmarks:first ul.socials li').width(); 
var sexyBookmarkCount=jQuery('.sexy-bookmarks:first ul.socials li').length; 
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth); 
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth; 
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2; 
jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin+'px'); 
} 
}); 
</script>

Dan letakkan kode berikut setelah kode diatas,

<style type="text/css"> 
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important} 
div.sexy-bookmarks-expand{height:29px; overflow:hidden} 
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://img31.imageshack.us/img31/176/sexytrans.png') !important; background-repeat:no-repeat} 
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important} 
div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left} 
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important} 
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important} 
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important} 
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important} 
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz: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-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://img512.imageshack.us/img512/3131/sexysprite.png') no-repeat !important;border: 0;outline: none;} 
.sexy-digg{background-position:-980px bottom !important} 
.sexy-digg:hover{background-position:-980px top !important} 
.sexy-reddit{background-position:-700px bottom !important} 
.sexy-reddit:hover{background-position:-700px top !important} 
.sexy-stumbleupon{background-position:-630px bottom !important} 
.sexy-stumbleupon:hover{background-position:-630px top !important} 
.sexy-delicious{background-position:-1190px bottom !important} 
.sexy-delicious:hover{background-position:-1190px top !important} 
.sexy-yahoobuzz{background-position:-1120px bottom !important} 
.sexy-yahoobuzz:hover{background-position:-1120px top !important} 
.sexy-blinklist{background-position:-1260px bottom !important} 
.sexy-blinklist:hover{background-position:-1260px top !important} 
.sexy-technorati{background-position:-560px bottom !important} 
.sexy-technorati:hover{background-position:-560px top !important} 
.sexy-myspace{background-position:-770px bottom !important} 
.sexy-myspace:hover{background-position:-770px top !important} 
.sexy-twitter{background-position:-490px bottom !important} 
.sexy-twitter:hover{background-position:-490px top !important} 
.sexy-facebook{background-position:-1330px bottom !important} 
.sexy-facebook:hover{background-position:-1330px top !important} 
.sexy-mixx{background-position:-840px bottom !important} 
.sexy-mixx:hover{background-position:-840px top !important} 
.sexy-scriptstyle{background-position:-280px bottom !important} 
.sexy-scriptstyle:hover{background-position:-280px top !important} 
.sexy-designfloat{background-position:-1050px bottom !important} 
.sexy-designfloat:hover{background-position:-1050px top !important} 
.sexy-newsvine{background-position:left bottom !important} 
.sexy-newsvine:hover{background-position:left top !important} 
.sexy-google{background-position:-210px bottom !important} 
.sexy-google:hover{background-position:-210px top !important} 
.sexy-comfeed{background-position:-420px bottom !important} 
.sexy-comfeed:hover{background-position:-420px top !important} 
.sexy-linkedin{background-position:-70px bottom !important} 
.sexy-linkedin:hover{background-position:-70px top !important} 
.sexy-friendfeed{background-position:-1750px bottom !important} 
.sexy-friendfeed:hover{background-position:-1750px top !important} 
.sexy-link{ margin-left:25px; float:left} 
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>

3. Selanjutnya, letakkan kode berikut setelah <data:post.body/>. Untuk template blog yang sudah ada fungsi auto-readmore, biasanya ada dua buah <data:post.body/>, jika demikian letakkan kode berikut setelah <data:post.body/> yang kedua (sebelum </b:if>).

<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'> 
<ul class='socials'> 
<li class='sexy-delicious'><a class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li> 
<li class='sexy-digg'><a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li> 
<li class='sexy-stumbleupon'><a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li> 
<li class='sexy-reddit'><a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li> 
<li class='sexy-google'><a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li> 
<li class='sexy-twitter'><a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li> 
<li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li> 
<li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li> 
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' title='Subscribe'>Subscribe</a></li> 
<li class='sexy-yahoobuzz'><a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li> 
<li class='sexy-linkedin'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li> 
<li class='sexy-designfloat'><a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li> 
<li class='sexy-technorati'><a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li> 
<li class='sexy-scriptstyle'><a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to Script &amp; Style'>Submit this to Script &amp; Style</a></li> 
<li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li> 
<li class='sexy-blinklist'><a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li> 
<li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li> 
<li class='sexy-newsvine'><a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li> 
</ul> 
<div style='clear:both;'/> 
</div> 
<div class='sexy-link'> Widget by <a href='http://www.cssreflex.com/' title='Web Design Blog, Blogger Hacks and Blogger templates'>Css Reflex </a>|<a href='http://www.tutzone.org/' title='Tutorials, Rare Downloads, Link Heaven, Tips Tricks, Hacks, Make How, Blogger Tricks And Tutorials, Internet, News, And Many More'> TutZone</a></div>

Jika menemui kendala dalam pemasangan widget ini, silahkan isi kolom komen dibawah.

Tks (ari-sty)