Membuat Social Share Button Keren Warna Warni

Tahukah sobat apa funsi tombol share ini ? adalah widget yang bertujuan untuk memudahkan pengunjung dalam merefrensikan maupun merekomendasikan konten-konten bermanfaat di blog kita, dengan hanya satu klik saja mereka (pengunjung) sudah dapat membagikan artikel tersebut secara otomatis.kita juga bisa memberikan warna tombol sesuai dengan social medianya, misalnya Facebook warna biru, Google+ warna merah, dan Twitter warna biru muda.

Sobat mau ? Sosial Shre Button seperti diatas ?, Kalau mau silahkan ikuti langkah-langkah nya berikut ini :

1. Login Ke Blogger Sobat

2. Pilih Template > Edit HTML

3. Cari kode <data:post.body/> (gunakan CTRL+F) untuk mempercepat pencarian , jika di blog sobat terdapat banyak kode <data:post.body/> pilihlah yang terakhir / yang terakhir kedua. dan Letakkan kode di bawah ini tepat dibawah <data:post.body/> (jika ingin tombol share bawah) / tepat diatas <data:post.body/> (jika ingin tombol share diatas)

<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://digg.com/submit?url=&quot; + data:post.url' style='color: #fff; background: #808080; text-decoration: none; border: 1px solid #000000; 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><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></div></b:if>

Keterangan: (kode warna : disini)

• 3b5998 = kode warna HTML background tombol facebook
• 313c7d = kode warna HTML border tombol facebook
• 808080 = kode warna HTML background tombol digg
• 000000 = kode warna HTML border tombol digg
• 4099FF = kode warna HTML background tombol twitter
• 3a8be8 = kode warna HTML border tombol twitter
• c0361a = kode warna HTML background tombol google+
• 9c2c15 = kode warna HTML border tombol google+

7. Klik "Save Template", dan selesai.

sumber