Cara Membuat Social Share Button Keren

Social social share nutton sangat bermanfaat bagi blog kita, karena sosial share ini bisa menyebarluaskan artikel dari blog kita pada sosial media besar seperti facebook , twitter , dan masih banyak lagi agar blog kita lebih terkenal dan diingat banyak orang. Saya sendiri menerapkan cara ini di blog saya ,agar para pengunjung yang suka artikel saya bisa membagikannya di sosial media mereka.

Social share button ini sangatlah menarik karena disain yang sangat profesional yaitu warna-warninya yang disesuaikan warna sosial media yang ada , seperti halnya facebook berwarna biru maka sosial sharenya pun berwarna biru. Anda bisa melihat contoh gambarnya berikut ini :

Bila anda ingin menerapkannya di blog anda , bisa dilakukan dengan cara berikut :

1. Login ke blogger anda

2. Klik Template > Edit HTML

3. Cari kode <data:post.body/> (gunakan CTRL+F) untuk mempercepat pencarian , jika di blog anda 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>

4. Simpan template anda dan lihat hasilnya

Demikianlah artikel singkat pada malam hari ini tentang  Cara Membuat Social Share Button Keren , semoga artikel ini dapat dimengerti dan bermanfaat , Wassalamualaikum.