Cara Membuat Share Buttom di bawa Postingan Blog

Tombol share pada postingan blog serasa sngat penting untuk di pasang, tombol share sendiri berguna untuk membagikan artikel milik kita ke berbagai social media seperti contoh Facebook, Twitter dan lainnya. Tombol share ini sendiri sangat berguna, karna semakin banyak pengunjung yang membagikan artikel anda ke media sosial maka semaking banyak pula orang yang mengetahui atau mungkin mengunjungi blog kita.
 
Sebetulnya untuk template asli bawaan dari blogger sdh menyediakan, tpi jika menggunakan template keren hasil download anda kadang masih ada yang belum menyertakannya. jadi bagi sobat yang berminat untuk memasangnya maka silahkan ikuti langka -langka berikut ini

1. Masuk ke Template > Edit HTML dan cari <data::post.body/>
2. Setelah ketemu Paste Kode di berikut ini tepat di bawa kode <data:post.body/>

HTML CODE                                                                                                                              </>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-keren'>
<div class='tombol-berbagi-keren-fb'>
<a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='tombol-berbagi-keren-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
</div>
</div>
</b:if>

3. Selanjutnya cari kode ]]></b:skin> dan Paste kode berikut ini tepat di atasnya.

HTML CODE                                                                                                                              </>

/* CSS Share Button */

.tombol-berbagi-keren{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-keren-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-keren-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU8QyfauDu2urTxcWc0689aptdtgMLz_H2k_7Z4DCUcW6pathpd66MCy8MaCbtnRlcoUqpJPehFUvHTLXcjvS2n5vwj_dbi9a5OYY0Vf-XsiPZ3NPl_R2B-rf5YeHylHu4O7PB38N912_6/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-keren a{color:#999;transition:all .3s;}
.tombol-berbagi-keren a:hover{color:#7cb0ed}
@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-keren-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-keren-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}

4. Simpan Template anda dan lihat hasilnya.

Demikian - Cara Membuat Tombol Share keren di bawa Postingan Blog