Cara Membuat Tombol Share Dibawah Posting Blog

Share

Untuk memaksimalkan kegunaan dari layanan jejaring sosial, pada kesempatan kali ini saya sudah menyiapkan sebuah widget yang bisa dibilang sederhana namun memiliki efektivitas yang tinggi, tepatnya adalah widget social sharing atau yang lebih dikenal dengan berbagi di jejaring sosial, jadi nantinya dengan widget ini, diharapkan para pengunjung akan lebih mudah untuk merekomendasikan konten di blog kita kepada kerabat atau rekan-rekan mereka.

Cara Membuat Tombol Share Dibawah Posting Blog

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML.

4. Klik tanda panah hitam disebelah kode <b:skin>...</b:skin> (untuk membuka css).

5. Cari kode <data:post.body/> (gunakan CTRL+F), letakkan kode berikut ini dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:3px dotted #ccc;border-bottom:1px solid #b8b8b8;width:100%;height:25px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>
<div style='float:left;padding:1px 0;margin-right:15px;font:bold 13px Arial;color:#777'><strong>Share this article</strong> :
</div>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' style='color: #fff; background: #3b5998; text-decoration: none; border: 1px solid #313c7d; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Facebook'>Share on FB</a> <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' style='color: #fff; background: #4099FF; text-decoration: none; border: 1px solid #3a8be8; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Twitter'>Tweet</a> <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' style='color: #fff; background: #c0361a; text-decoration: none; border: 1px solid #9c2c15; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Google+'>Share on G+</a>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' style='color: #fff; background: #808080  ; text-decoration: none; border: 1px solid #808080; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Submit to Digg'>Submit to Digg</a>
</div>
</b:if>

6. Klik "Save/Simpan" Template, dan selesai.

Demikian informasi terbaru seputar tutorial blog tentang Cara Membuat Tombol Share Dibawah Posting Blog, semoga bermanfaat, dan selamat mencoba.