Cara Membuat Tombol Share Di Bawah Postingan (Blogger) 2019

Memasang tombol share seperti Facebook, Twitter, Google+ atau Pinterest memang tidak menjamin bahwa artikel kita akan mendapatkan banyak Like atau Tweet, tapi setidaknya bisa sedikit memperbesar kemungkinan untuk memperolehnya.

Lagipula, menempelkan tombol share di bawah postingan itu tidak susah, kok. Paling cuma nyari-nyari lokasi penempatan kodenya saja yang lumayan agak merepotkan. Jadi gimana caranya? Yuk simak dibawah.

Ada 2 jenis tombol share yang saya bagikan disini:

1. Simpel, tanpa javascript, tanpa gambar, tanpa font awesome.
2. Dilengkapi dengan counter buat pamer jumlah share.

UPDATE: JANUARI 2019

Tombol Berbagi Sederhana Tanpa Icon

1. Pertama-tama, login ke Blogger lalu masuk ke bagian Template, dan backup template sebelum memulai modifikasi. Langkah ini tidak wajib, tapi tidak ada salahnya untuk selalu berjaga-jaga terhadap setiap kemungkinan.
2. Masih di bagian Template, klik Edit HTML.
3. Cari <b:skin>...</b:skin> lalu klik pada bagian titik-titik tersebut untuk membuka isinya.
4. Cari kode berikut ini sampai ketemu (bisa pakai Ctrl + F untuk mempermudah pencarian): <data:post.body/>
5. Setelah ketemu, copy paste dan letakkan kode berikut ini dibawahnya:
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='kafesiashare'> <span id='fontshare'>Share</span> <a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a> <a class='tw' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a> <a class='gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a> <a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url' style='background:#43d854'><i aria-hidden='true' class='fa fa-whatsapp'/>WhatsApp</a> </div> <!--close div kafesiashare--> <div class='clear'/> </b:if>
6. Cari ]]></b:skin> lalu paste kode berikut ini tepat diatasnya:
#kafesiashare {display:block} #fontshare {font-size:120%; margin-right:10px; font-weight:bold} #kafesiashare a {color:#fff; padding:10px 17px; margin:5px 0 5px 0; display:inline-block;} #kafesiashare a.fb {background:#3b5998} #kafesiashare a.tw {background:#01BBF6} #kafesiashare a.gp {background:#D54135} #kafesiashare a.wa {background:#43d854}
7. Klik Simpan Template untuk menyimpan perubahan.

Keterangan

Kalau template blogspot yang dipakai memiliki lebih dari satu <data:post.body/>, coba pilih yang posisinya paling akhir. Jika masih gagal, mau tidak mau kamu mesti mencoba memasukkan kode di atas pada setiap <data:post.body/> sampai ketemu yang pas. Repot? Ngedit template itu memang merepotkan kok, apalagi bikin template sendiri dari nol.

Keterangan Kode

Untuk mengubah ukuran huruf pada 'Share', cari font-size:120% pada #fontshare, lalu ubah nilainya sesuai keinginan, misalnya font-size:90% atau font-size:15px.

Untuk mengubah ukuran tombol, ubah nilai padding pada #kafesiashare. Sebagai contoh, padding:7px 25px;.

Untuk mengubah jenis huruf, tambahkan font-family pada #kafesiashare sehingga menjadi:

#kafesiashare {display:block; font-family:arial}

Font 'arial' bisa diganti font lainnya seperti segoe print, times new roman, verdana, dan lain-lain. Kalau masih belum berubah, tambahkan !important setelah nama font sehingga menjadi:

#kafesiashare {display:block; font-family:arial !important}

Selesai. Sekarang tombol share Facebook, Twitter, Google+ dan WhatsApp resmi terpasang di bawah setiap postingan blog. Hasilnya nanti akan seperti tombol share yang ada di blog ini.

---

Dengan Counter Jumlah Share

Tombol share ini menggunakan script dari layanan Social9. Tidak perlu registrasi.

1. Kunjungi social9, lalu pilih Blogger.

2. Pilih desain tombol sesuai selera pada "Choose A Social Share Theme".

3. Geser layar ke bawah, lalu pilih media sosial yang akan ditampilkan menjadi tombol share.

4. Geser layar ke atas, lalu copy script di kolom Embed yang letaknya di sebelah kanan (lihat kolom 1 pada gambar di bawah).

5. Buka blogger.com di tab baru.

6. Masuk ke Tema > Edit HTML.

7. Paste script di atas sebelum </body>.

8. Kembali ke Social9, lalu copy kode penampil share yang terletak di bawah kolom Embed, yaitu <div class='oss-widget-interface'></div> (lihat kolom 2 pada gambar di atas).

9. Kembali ke Edit HTML, lalu paste kode penampil tersebut di bawah <data:post.body/> seperti berikut:

<data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='oss-widget-interface'></div>
      </b:if>

10. Simpan tema. Selesai.

Catatan: Jika ingin tombol share tampil ketika blog dibuka di perangkat mobile seperti hp, atur blognya menjadi responsive.