CARA BUAT TOMBOL SOCIAL SHARE

 

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.

CONTOH SEPERTI INI BOS Q

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:
DISINI SCRIPTNYA:
<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:

DISINI SCRIPTNYA:
#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}




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.