Cara Membuat Tombol Berbagi Di Atas Postingan Bergaya Profesional

Cara Membuat Tombol Berbagi atau Share Button Di Atas Postingan ala web profesional keren. Dalam dunia blogger sangat erat kaitannya dengan soal edit mengedit kode, baik code script, CSS, HTML, posisi widget, dan juga Tombol Berbagi atau Share Button pun tak mau ketinggalan. Namun sayangnya kebanyakan template yang di gunakan para blogger Tombol Berbagi nya biasanya ada di bagian bawah postingan.

Baik saudara pembaca kali ini saya akan berbagi Cara memodifikasi atau Membuat Tombol Berbagi atau Share Button Di Atas Postingan, anda lihat Tombol Berbagi di atas postingan pada halaman ini...keren kan? Cara membuatnya pun sangat gampang kok hanya dua langkah saja sudah beres, dan Tombol Berbagi atau Share Button di blog anda akan terlihat keren. Tombol Berbagi atau Share Button Di Atas Postingan ini banyak di jumpai di situs situs populer seperti Merdeka.com, CNN indonesia, viva.co.id, Tribunnews.com, kompas, Republika, Detik.com, situs situs ini lah yang menginspirasi untuk membuat kode Share Button. Demo seperti pada halaman ini.

Baca juga : Baru ! Cara membuat Tombol Share Button Keren Praktis Nggak ribet

• Pertama Masuk ke akun blogger anda pilih edit HTML.
• Cari kode ]]></b:skin>
• Kemudian paste kode berikut dibawah kode ]]></b:skin>

/* Share Button by triknews */
.tombol-berbagi-triknews{display:block;position:relative;height:50px;line-height:50px;padding:12px;margin:auto}.tombol-berbagi-triknews-fb,.tombol-berbagi{float:left;width:10%;padding:0 10px;height:inherit}.tombol-berbagi-triknews-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:10%;height:inherit;padding:0 10px;}.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/AVvXsEhHU_MsWZ3FyWRAPf9o8DS0WOKOAvSGurvT2iLPMVjbvnHYO_Y9bW9kSnEliZFUpE4NutnQlKD6nyGfEWwkbCqalBxYG8mcBHmxkaBi5Iq0kBLpui0MihuTJdC_W4OU3zeKsXOy_UUym9yz/s1600/share.png') no-repeat;width:43px;height:43px;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:43px;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-triknews a{color:#999;transition:all .3s;}.tombol-berbagi-triknews a:hover{color:#fff;opacity:1;transform:rotate(360deg);}
@media only screen and (max-width:640px){.tombol-berbagi,.tombol-berbagi-triknews-fb{display:inline-block;float:none;width:15%;padding:0;height:inherit}.tombol-berbagi,.tombol-berbagi-triknews-tw,.tombol-berbagi-lk{float:left;width:15%;padding:0;border-left:0}}

• Kedua Pada editor template, kemudian cari kode <data:post.body/> anda akan menemukan dua atau bahkan sampai tiga kode diatas, silahkan pilih salah satu yang benar-benar menampilkan postingan artikel anda, jika sudah menemukan kode <data:post.body/> letakkan kode berikut di atasnya.
  
  Bagi anda yang sudah memiliki adsense, pasti pernah memasang kode iklan adsense tepat diatas postingan kan? nah sama seperti itulah penerapan kode dibawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-triknews'>
<div class='tombol-berbagi-triknews-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'/>
</div>
<div class='tombol-berbagi-triknews-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'/>
</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'/>
</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'/>
</div>
</div>
</b:if>
 

• Klik Simpan

Nah bagaimana saudara pembaca mudah bukan Cara Membuat Tombol Berbagi Di Atas Postingan Bergaya web Profesional. Semoga anda tidak kecewa.