Widget Social Share Button Blog yang Simple dan Responsive

Widget Social Share Button Blog yang Simple dan Responsive - Bagi para blogger muncul di halaman pertama pencarian adalah satu hal yang penting, namun jangan lupa satu hal lain yang sama pentingnya, berbagi artikel.


Memiliki tombol berbagi atau Social Share Button di setiap halaman artikel blog menjadi poin penting agar artikel tersebut dapat disebarluaskan oleh para pengunjung blog dan juga dapat memengaruhi peringkat pencarian di Google. Nah, kali ini saya bermaksud membagikan sebuah tutorial bagaimana caranya membuat tombol social share di blog. Social Share Button ini dibuat oleh donReach, sebuah situs yang berisi tools-tools yang berhubungan dengan sosial media.

Apa kelebihan Social Share Button dari donReach ini?

1. Responsive
2. Simple (sederhana)
3. Tampilan Menarik dan pernuh warna
4. Banyak tombol berbaginya
5. Menghitung total berapa kali artikel dibagi

Cara Membuat Tombol Social Share Simple dan Responsive di Blog

1. Login ke dashboard Blogger

2. Pilih menu Template

3. Setelah itu tekan Edit HTML

4. Klik pada kolom HTML template dan tekan CTRL + F. Lalu masukkan kode dan temukan kode dibawah ini dibawahnya.

<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

6. Jika sudah ketemu, masukkan kode dibawah ini diatas </div> pada kode diatas.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="don-share" data-limit="3">
<div class="don-share-total"></div>
<div class="don-share-facebook"></div>
<div class="don-share-twitter"></div>
<div class="don-share-google"></div>
<div class="don-share-linkedin"></div>
<div class="don-share-pinterest"></div>
<div class="don-share-tumblr"></div>
<div class="don-share-stumbleupon"></div>
<div class="don-share-reddit"></div>
<div class="don-share-pocket"></div>
</div>
<div class='clear'/>
</b:if>

6. Pada kode data-limit="3", silahkan ganti 3 untuk menyesuaikan banyak tombol utama yang tampil dengan lebar kolom postingan blog kamu. Kalau saya tetap memasang 3, jadi yang muncul tombol utamanya ada 3 pas dengan lebar postingan blog Exelog. Silahkan lihat demo nya dibawah artikel ini.

7. Setelah itu cari kode </head> dan masukkan kode dibawah diatasnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.don-share{padding-left:80px}
.don-share .don-share-total{margin-left:-80px!important}
.don-share .don-active .don-share-total:after{bottom:15px!important}
.don-share .don-share-expand:before{line-height:20px!important}
</style>
</b:if>

8. Simpan template kamu dan lihat hasilnya dihalaman artikel blog kamu.

Bagaimana, apakah kamu berhasil membuat tombol berbagi responsive nya diblog kamu? Jika berhasil, selamat blog kamu jadi makin kece dimata pengunjung tetapi jika belum berhasil silahkan tanyakan apa masalahnya dikolom komentar. Oh iya, terimakasih kepada KompiAjaib atas kode CSS nya.

Sekian dari saya tentang Widget Social Share Button Blog yang Simple dan Responsive, semoga dapat bermanfaat bagi kamu semua. TERIMAKASIH!

Share :

Terima Kasih Atas Kunjungan Anda!
Judul: Widget Social Share Button Blog yang Simple dan Responsive
Ditulis Oleh: Harrys
Jika mengutip harap berikan link yang menuju ke artikel Widget Social Share Button Blog yang Simple dan Responsive ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya.

Artikel Terkait