Menambahkan Social Bookmark ke Blogger

Setelah surfing di om Google, akhirnya saya menemukan tutorial yang keren, yaitu cara menambahkan Sosial Bookmark. Mungkin sudah banyak blogger mania menulis tentang sosial bookmark ini. Tapi, saya baru menemukan yang se-sexy ini. Yups ini lebih sexy dibandingkan dengan sosial bookmark yang lain. Ok langsung saja, mari kita lihat tutorial di bawah ini:

Mari Kita Mulai.

Catatan: Sebelum mulai, backup dulu template dan widgetmu.

1. Pertama, Login ke blogger
2. Klik Tata Letak >> Edit Html
3. Centang tanda "expand widget templates"
4. Kemudian Cari Kode </head>, dan letakan kode di bawah sebelum kode
</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>

Ini Juga:

<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://i712.photobucket.com/albums/ww123/ricosa3a/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://i712.photobucket.com/albums/ww123/ricosa3a/sexy-sprite-new.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>

5. Lalu letakan kode di bawah setelah <data:post.body/>

<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=&q
uot;+ 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&quo
t;+ 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/addblin
k.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>

6. Terakhir klik Save Template

Nah sexy bukan!?
Selamat mencoba...

Bagi yang ingin copy-paste artikel ini silahkan, tapi jangan lupa cantumkan backlinknya! :-)