Cara memasang tombol berbagi ringan tapi keren untuk template blogspot essential 2021

Tombol ini sangat ringan tidak memberatkan loading blog karena: Tampilan ikon medsosnya tidak dibentuk dengan font awesome tetapi menggunakan ikon SVG. Ketika font awesome mengharuskan kita memasang atau menanamkan link penghubung ke librari mereka yang hasilnya dapat merugikan kecepatan loading blog, maka font SVG hanya di tulis langsung ke dalam HTML nyaris tidak melukai kecepatan halaman blog.

Tentu saja tidak ada java script.

Tombol yang akan Anda dapatkan adalah:

1. Facebook
2. WhatsApp
3. Pinterest
4. Linkiden
5. Tumblr

Intinya jika kita dapat menghindarkan JS dan font awesome, mengapa tidak dilakukan, Kita harus melakukannya sekarang di zaman blogging mobile dengan prioritas kecepatan loading halaman. Tinggalkan saja paradigma lama dalam blogging.

Dan dengan memasang tombol berbagi ini performa blog akan naik dan lebih optimal.

Dan apakah ia responsif? Banget! Lihat tampilannya pada tampilan seluler (mobile) dan Laptop:

Atau Lihat saja :

DEMO

Menarik bukan?

Cara memasangnya ke template essential adalah sebagai berikut:

1. Masuk ke dalam pengaturan atau dasbor blogger, pilih tema, pilih Edit HTML. 

2. Setelah masuk ke halaman editor HTML blog cari kode ]]></b:skin, dan letakan kode pengaturan CSS sederhana berikut tepat di atasnya:

.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:#6f0}

.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.linkedin{background-color:#2554bf}

.Share a.tumblr{background-color:#314358}

.Share a.whatsapp{background-color:#4dc247}

Tapi perlu di perhatikan walaupun sangat umum memasukan kode CSS ke dalam tag ]]></b:skin> dalam beberapa kondisi meletakan kode CSS di atas ]]></b:skin> namun ia bisa saja tidak bekerja jika sebelumnya terdapat kode CSS lain yang memiliki sintaks 'bertabrakan' dengan kode CSS di atas. 

Akibatnya ikon SVG tombol berbagi tampak berwarna hitam dan besar besar, untuk mengatasi hal ini. Copy kembali dan hapus seluruh kode CSS yang baru kita pasang tersebut lalu tambahkan kode styling <style> pada awalnya dan tutup dengan </style>, jadinya seperti berikut:

<style>.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:#6f0}
.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.linkedin{background-color:#2554bf}
.Share a.tumblr{background-color:#314358}
.Share a.whatsapp{background-color:#4dc247}
</style>

Lalu cari kode tag penutup </head> dan letakan tepat diatasnya.

3. Langkah berikutnya cari kode <data:post.body/> yang hanya satu di dalam template essential, dan letakan kode berikut tepat di bawahnya:

<div class='Share'>

<a class='facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href,&quot;sharer&quot;,&quot; toolbar=0,status=0,width=626,height=436&quot;);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='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; - &quot; + data:post.url' onclick='window.open(encodeURI(this.href),&quot; sharer&quot; ,&quot;toolbar=0,status=0,width=626,height=500&quot;); 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='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title + &quot; (by: @sufyan331) &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); 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='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); 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='linkedin' expr:href='&quot;https://www.linkedin.com/sharing/share-offsite/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot;toolbar=0,status=0,width=626,height=500&quot;); return false;' rel='nofollow' title='Share to Linkedin'><svg viewBox='0 0 24 24'><path d='M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z'/></svg></a>

<a class='tumblr' data-notes='right' expr:href='&quot;https://www.tumblr.com/share/link?url=&quot; + data:post.url' onclick='window.open(this.href,&quot; sharer&quot; ,&quot;toolbar=0,status=0,width=626,height=500&quot;); 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>

Sekali lagi pasang denganc cermat ya. Tombol berbagi ringan ini tidak masalah jika di pasang pada template lama dengan layout versi ke 2 atau template terbaru dengan layout versi ke 3 seperti template essential ini.

Dalam banyak kasus, pemasangannya pada template bawaan (default blogger) adalah sama saja.