Cara memasang tombol berbagi sederhana dan ringan di Blogspot tahun 2021

Sebenarnya menurut saya, tombol berbagi (share button) pada template varian terbaru blogger blogspot sudah cukup bagus dan ringan, akan tetapi jika Kalian masih menginginkan tampilan lain dari tombol berbagi sebaiknya kalian perhatikan hal hal berikut:

1. Gunakan tombol berbagi custom buatan sendiri atau buatan para senior blogger saja (cari tutorial di google, termasuk tutorial editblogtema, cieelah :D)
   
2. Jangan sertakan lagi tombol Gplus karena itu hanya sia sia, google plus telah lama mati.
3. Jangan sertakan tombol Linkedin karena akhir akhir ini linknya sudah tidak bekerja sebagaimana mestinya
4. Hindari tombol berbagi yang di 'embed' melalui cara pemasangan link eksternal, misalnya hindari menggunakan tombol berbagi pihak ketiga seperti sharethis, addthis addtoAny dll ke dalam template karena itu sangat merugikan kecepatan halaman blog. (Saya tidak melarang ya, cuma menyarankan kepada Kalian yang mulai perduli terhadap kecepatan loading halaman blog)
   

Kalau dari kami (ediblogema) menyarankan tombol berbagi berikut yang kami rangkum dari model template template terbaru premium. Cara pemasangannya adalah sebagai berikut:

Langkah pertama:

1. Masuk ke dalam dasbor pengaturan blog
2. Pilih tema
3. Pilih edit HTML

Di dalam halaman editorial HTML blogger cari kode ]]></b:skin>

Letakan kode pengaturan CSS berikut tepa di atas kode tersebut:

.Share{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;margin-top:20px}
.Share svg{width:17px;height:17px;vertical-align:-4px}
.Share svg path{fill:#fff}
.Share a{width:100%;padding:7px 0;text-align:center;box-shadow:none}
.Share a:hover{box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.25)}
.Share a.facebook{background-color:#3a579a}
.Share a.twitter{background-color:#00abf0}
.Share a.pinterest{background-color:#cd1c1f}
.Share a.tumblr{background-color:#314358}
.Share a.whatsapp{background-color:#4dc247}


Langkah kedua:

Masih di halaman editorial HTML blogger cari kode <data:post.body/> yang kedua atau yang ketiga, dan letakan kode HTML berikut tepat di bawahnya:

<div class='Share'>
          <a class='facebook' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url' onclick='window.open(this.href,"sharer","   toolbar=0,status=0,width=626,height=436");return false;' rel='nofollow' title='Share to Facebook'><svg viewBox='0 0 24 24'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'/></svg></a>
          <a class='whatsapp' expr:href='"whatsapp://send?text=" + data:post.title + " - " + data:post.url' onclick='window.open(encodeURI(this.href),"   sharer"   ,"toolbar=0,status=0,width=626,height=500");   return false;' rel='nofollow' title='Share to WhatsApp'><svg viewBox='0 0 24 24'><path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/></svg></a>
          <a class='twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title + " (by: @sufyan331) "' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=436"   );   return false;' rel='nofollow' title='Share to Twitter'><svg viewBox='0 0 24 24'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg></a>
          <a class='pinterest' data-pin-config='beside' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.featuredImage + "&description=" + data:post.title' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=500"   );   return false;' rel='nofollow' title='Share to Pinterest'><svg viewBox='0 0 24 24'><path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'/></svg></a>
                   <a class='tumblr' data-notes='right' expr:href='"https://www.tumblr.com/share/link?url=" + data:post.url' onclick='window.open(this.href,"   sharer"   ,"toolbar=0,status=0,width=626,height=500");   return false;' rel='nofollow' title='Share to Tumblr'><svg viewBox='0 0 24 24'><path d='M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17'/></svg></a>
        </div>

Save template

Kelebihan tombol berbagi ini:

1. Ringan karena tidak ada kode embed.
2. Tidak ada javascript link eksternal, hanya HTML dan pengaturan CSS dan script internal saja.
3. Menggunakan ikon SVG alami yang ringan dan kompatibel dengan struktur on page halaman blog.

Lihat hasilnya pada template bawaan blogger SOHO dengan mengklik tombol demo di bawah ini:

DEMO

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: