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


tombol share html
  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:
  6. <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>
  7. Cari ]]></b:skin> lalu paste kode berikut ini tepat diatasnya:
  8. #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}
  9. 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.

tombol counter

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).

penampil share

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.

21 komentar:

  1. subhanallah,,,kemana-mana gua nyari,nemunya disini,yg lain banyak hawe,
    maksih kafesia

    BalasHapus
  2. klw membuat tombol share sama seperti punya agan gimana ya ??

    BalasHapus
    Balasan
    1. Ambil kodenya di http://donreach.com/social-share-buttons
      lalu paste kodenya seperti cara di atas

      Hapus
  3. mantap gan udah saya cari kemana mana ternyata ada di sini,

    BalasHapus
  4. keren gan, coba view blog saya cocok gk gan http://musik-keren17.blogspot.co.id/

    BalasHapus
  5. saya sudah coba, tapi kok nggak berhasil ya?

    BalasHapus
    Balasan
    1. Barusan sudah saya coba lagi di blog baru dan cara di atas masih bisa kok. Pastikan kodenya dipaste di bawah <data:post.body/> yang terakhir (kalau memang ada lebih dari satu)

      Hapus
    2. ternyata bisa... tapi koq udah ada like FB 97 ya....???

      Hapus
  6. tengkyu gan. yang ini ringan. pernah coba bkin sendiri malah kadang gak ke load di halaman.

    BalasHapus
  7. Balasan
    1. halo ruangdesign, saya intip blognya di ekspresivisual sudah muncul tombolnya

      Hapus
  8. udah bisa gan, ternyata tadi salah kode, tq gan.salam sukses

    BalasHapus
  9. Terimakasih banyak ilmunya sangat bermanfaat :)

    BalasHapus
  10. Keren, gan. Tapi itu tombol berbagi Google Plus seharusnya sudah gak ada. Karena pada template bawaan (default) blogger saja Google telah lama meniadakannya :)

    Hanya buat update dan menutup celeh saja karena linknya kalau kosong bisa melipat gandakan DOM, kalau berisi jadi beban loading.

    BalasHapus