Pasang Social Bookmark & Share Unik Di Blog

Untuk teman teman blogger yang sedang berburu widget social bookmark seperti contoh diatas saya yakinkan bahwa anda tepat sekali datang ke blog ini yang mana secara kebetulan disini sedang mengadakan acara cara pemasangan widget social bookmark atau kalau bahasa inggrisnya "Social Bookmarking Widget"  he..he..he.english man ! dibawah ini telah saya siapkan untuk tata cara pembuatan atau pemasangan widget social bookmark di blogspot. Saya jelaskan terlebih dulu bahwa setiap ikon bila tersentuh kursor akan melipat bagian sudutnya dan inilah ciri khas widget ini.

Langkah #1

1. Login ke Blogger.com --> Layout -->Edit HTML
2. Carilah kode ]]></b:skin>
3. Dan paste kode di bawah ini tepat di atas ]]></b:skin>

/*--------mbt Bookmarking Widget (CSS#1)------*/
.mbt-bookmarking a {
display:block;
height:42px;
width:48px;
padding:0 9px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJcmIANADnOYG7KKEeRzYDIQr5K9RGneyqNOXHVLoEZtknxCSH4TTNY3V53DB86klXFvSmmuXMVWfOIaiMYHrmrIOPNJOCr52hnAO6Y9otjcZxdL8hhupAcBf9T6U2t1nDiSKcUs2wfBvo/s1600/flapper.jpg) no-repeat;
}
.mbt-bookmarking a.delicious {
background-position:0px 0px;
}
.mbt-bookmarking a.delicious:hover {
background-position:0px -43px;
}
.mbt-bookmarking a.digg {
background-position:0px -86px;
}
.mbt-bookmarking a.digg:hover {
background-position:0px -129px;
}
.mbt-bookmarking a.stumbleupon {
background-position:0px -344px;
}
.mbt-bookmarking a.stumbleupon:hover {
background-position:0px -387px;
}
.mbt-bookmarking a.technorati {
background-position:0px -430px;
}
.mbt-bookmarking a.technorati:hover {
background-position:0px -473px;
}
.mbt-bookmarking a.twitter {
background-position:0px -516px;
}
.mbt-bookmarking a.twitter:hover {
background-position:0px -559px;
}
.mbt-bookmarking a.facebook {
background-position:0px -172px;
}
.mbt-bookmarking a.facebook:hover {
background-position:0px -215px;
}
.mbt-bookmarking a.reddit {
background-position:0px -258px;
}
.mbt-bookmarking a.reddit:hover {
background-position:0px -301px;
}
.mbt-bookmarking a.yahoo {
background-position:0px -602px;
}
.mbt-bookmarking a.yahoo:hover {
background-position:0px -645px;
}
.mbt-bookmarking a.rss {
background-position:0px -774px;
}
.mbt-bookmarking a.rss:hover {
background-position:0px -817px;
}

Langkah #2
Cari kode berikut <data:post.body/> ATAU kode ini <p><data:post.body/></p> sisipkan kode dibawah ini setelah kode diatas.

<!--mbt Bookmarking Widget (HTML)-->
<div class='mbt-bookmarking'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/><font color='#289728' face='ms sans serif' size='3'><b>Kindly Bookmark and Share it:</b></font>
<br/><br/>
<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>

<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

<!-- Technorati -->
<a class='technorati' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Fave this :&gt;'/>

<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Bookmark and tag this :&gt;'/>

<!-- Yahoo -->
<a class='yahoo' expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Bookmark this :&gt;'/>

<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'/>
</b:if></div>

Save template anda. Terima kasih dan happy blogging
Catatan :

• Untuk yang disorot berwarna merah anda bisa mengganti kode warna tersebut dengan warna Font yang di inginkan.
• Untuk yang disorot warna biru silahkan anda ganti kata-katanya sesuai keinginan.