Membuat/Memasang Widget Social Share Di Bawah Postingan

Membuat/Memasang Widget Social Share Di Bawah Postingan - widget social share memang penting untuk memenuhi kebutuhan blog agar sebagai upaya untuk menyebarluaskan postingan blog kita ke dalam jejaring-jejaring sosial seperti facebook, twitter, RSS, dll. Tombol share sangat penting untuk meningkatkan pengunjung ke blog. Namun untuk menarik perhatian pengunjng blog agar mau berbagi artikel yang dibaca ke berbagai jejaring sosial, tentunya anda membutuhkan tombol share yang menarik. Berikut Cara Membuat/Memasang Widget Social Share Di Bawah Posting Blog :

1. Pada Dashboard Blogger anda klik Template > Edit Html > Lanjutkan (centang kotak Expand Widget Templates).

2. Gunakan tombol Ctrl + F untuk mencari kode <data:post.body/>

3. Copy salah satu kode dibawah kemudian letakan di bawah kode <data:post.body/>

<style>
.sharebelow a { display:block; height:48px; width:48px; padding:0 4px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3A3gkdGWWopdN5MgTuhfnkKn7UFaNLSN1CCthThhU5De-jX0mkvBzhB1GPGOofeYNmF0WxLy6xMMJQ8hhOwaypJFp6-nc1Hv40xaxPi0qTRBrm5klutHnxMKwwg9L1VFZyR7nzUIACIg/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; }
</style>
<div class='sharebelow'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="shareandbookmark">
</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.