Memasang Widget Share Terkeren di Bawah Postingan

Memasang Widget Share Terkeren di Bawah Postingan - Sebenarnya telah banyak aneka widget share yang terdapat pada blog dan diletakkan di bawah postingan. Salah satunya seperti yang akan saya bagikan kali ini.

Widget share berikut ini terlihat keren dan menarik, sehingga tidak ada salahnya jika anda mencoba mengganti widget share yang anda gunakan dengan widget berikut ini.

_:: Screen Shoot ::_

Jika anda tertarik à berikut ini cara Memasang Widget share Terkeren dibawah Postingan.

1. Login ke blog anda.

2. Pilih Edit HTML à Jangan lupa Centang Expand Widget Template à Cari kode <data:post.body/>

3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 2.

<style>

/*--------Social Sharing Widget Below Blog Post ------*/

.sharebelow a {

display:block;

height:48px;

width:48px;

padding:0 4px;

float:left;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtqd0-RKRhuOjHIRiRkGD658mbwPC-HLSublUhUcKvnGtGglLtiu90E2MfaIy9iHL_BnjgLHqGRrIn9aylYnOSSFYX0k0OTMpP1pSC2j0sRILSDai-OoPFC5F-lfOyHPaNoLqIAQMUJi0/s1600/sharebelow.png) no-repeat;

}

.sharebelow  a.googleplus {

background-position: 0px -348px;

}

.sharebelow  a.googleplus:hover {

background-position: 0px -406px;

}

.sharebelow  a.pinterest {

background-position: 0px -464px;

}

.sharebelow  a.pinterest:hover {

background-position: 0px -522px;

}

.sharebelow  a.delicious {

background-position: 0px 0px;

}

.sharebelow  a.delicious:hover {

background-position: 0px -58px;

}

.sharebelow  a.digg {

background-position: 0px -116px;

}

.sharebelow  a.digg:hover {

background-position: 0px -174px;

}

.sharebelow  a.stumbleupon {

background-position: 0px -812px;

}

.sharebelow  a.stumbleupon:hover {

background-position: 0px -870px;

}

.sharebelow  a.technorati {

background-position: 0px -928px;

}

.sharebelow  a.technorati:hover {

background-position: 0px -406px;

}

.sharebelow  a.twitter {

background-position: 0px -928px;

}

.sharebelow  a.twitter:hover {

background-position: 0px -986px;

}

.sharebelow  a.facebook {

background-position: 0px -232px;

}

.sharebelow  a.facebook:hover {

background-position: 0px -290px;

}

.sharebelow  a.reddit {

background-position: 0px -580px;

}

.sharebelow  a.reddit:hover {

background-position: 0px -638px;

}

.sharebelow  a.rss {

background-position: 0px -696px;

}

.sharebelow  a.rss:hover {

background-position: 0px -754px;

}

.shareandbookmark{

margin:10px 0px;

color:#333333;

font-weight:bold;

font-size:18px;

font-family:sans-serif;

}

</style>

<div class='sharebelow'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="shareandbookmark">

Kindly Bookmark and Share it:</div>

<!--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;'/>

<!--Google Plus-->

<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&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;'/>

<!-- Pinterest -->

<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>

<!-- 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;'/>

<!--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;'/>

<!--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;'/>

<!-- 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='Add this to Reddit :&gt;'/>

<!--RSS -->

<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank' title='Bookmark :&gt;'/>

</b:if></div>

<div style="clear:both"/>

4. Simpan dan Lihat Hasilnya.