Cara membuat tombol berbagi postingan yang responsive, ringan dan sederhana tanpa javascript

Tombol berbagi postingan atau share button di blog, fungsinya adalah untuk memudahkan pengunjung membagikan artikel yang telah mereka baca ke media sosial melalui akun media sosial mereka, baik itu Facebook, Twitter maupun WhatsApp dan media sosial lainnya.

Pada template yang kamu gunakan di blog, pasti sudah terdapat tombol berbagi postingan, hanya mungkin strukturnya menggunakan script javascript. Sedangkan tombol berbagi postingan yang Blogizty bagikan ini tanpa menggunakan script JavaScript sehingga murni hanya menggunakan HTML dan CSS.

Adapun Blogger telah menyediakan fitur tombol berbagi ini, hanya fitur yang disediakan kurang menarik dan sama beratnya untuk loading blog.

Untuk diketahui bahwa penggunaan script JavaScript yang berlebihan atau terlalu banyak di blog dapat menyebabkan perangkat yang digunakan untuk mengakses blog akan sedikit terbebani, terutama untuk perangkat handphone lawas yang tidak mendukung JavaScript modern.

Di mana ketika perangkat tersebut mengakses blog yang penuh dengan script JavaScript maka perangkat akan mengalami sedikit lag, setidaknya begitulah hasil dari eksperimen yang dilakukan oleh Blogizty sendiri menggunakan browser Mobile Safari versi 7.

Penggunaan JavaScript memang diperlukan untuk memaksimalkan kinerja widget dan fitur di blog. Akan tetapi, untuk tombol berbagi postingan ini sebaiknya tidak menggunakan JavaScript.

Maka dari itu, apabila kamu ingin mengganti tombol berbagi postingan bawaan template dengan tombol berbagi postingan yang Blogizty bagikan, maka kamu boleh coba dan rasakan perbedaannya.

Sebagai catatan

• Fitur tombol berbagi postingan harus diletakkan di bagian bawah postingan atau di akhir artikel karena ketika pengunjung telah selesai membaca dan menyukai artikelnya, kemudian mereka tertarik untuk membagikannya ke media sosial, maka mereka akan dengan mudah menemukan tombol berbagi yang terdapat di akhir artikel.

  Berbeda halnya jika tombol berbagi berada di atas. Untuk membagikan artikel, pengunjung harus kembali ke bagian atas halaman setelah mereka selesai membaca.

  Untuk itulah di sini Blogizty menempatkan tombol berbagi di bagian bawah postingan, sebagai cara untuk memudahkan dan memberikan kenyamanan untuk pengunjung.

• Tombol berbagi postingan ini hanya menyertakan 3 layanan media sosial untuk digunakan berbagi postingan karena 3 layanan ini merupakan yang paling populer. Namun apabila kamu ingin menambahkan layanan lain, maka silakan cari kode share-nya untuk kemudian ditambahkan saja oleh sendiri.

• Alasan hanya menyertakan 3 layanan media sosial ini dikarenakan supaya tampilan responsive saat dibuka di perangkat seluler tablet dan mobile. Sedangkan apabila layanan media sosial ditambah, maka kemungkinan akan tidak responsive.

Tombol berbagi postingan hanya menggunakan HTML dan CSS tanpa JavaScript

Untuk memulai, silakan buka editor HTML template blog, kemudian salin script CSS di bawah ini untuk kemudian ditempelkan di atas atau sebelum tag </style> atau ]]></skin>.

Script CSS

/* ShareButton JellyBlogizty */
.jellyshare {margin:20px 0;text-align:center}
.jellyshare span {display:block;position:relative;margin:0 auto 20px;padding:0}
.jellyshare span:before {content:"";background:#ccc;width:100%;height:1px;position:absolute;top:11px;left:0}
.jellyshare p {background:#fff;display:inline-block;position:relative;font-size:16px;font-weight:500;padding:0 10px}
.share {display:flex}
.share a {flex:1 100%;color:#fff;margin:0 2px;padding:5px}

Setelah itu, salin kode HTML di bawah ini untuk ditempelkan di atas <div class="post-footer-line post-footer-line-3">. Atau jika kamu paham mengenai struktur template Blogger, maka terserah kamu akan dipasang di bagian mana.

Script HTML

<!--ShareButton JellyGlassBlogizty-->
<div class='jellyshare'>
<span><p><b>Bagikan</b></p></span>
<div class='share'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a>
<a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'>Twitter</a>
<a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#43d854' target='_blank' title='WhatsApp'>WhatsApp</a>
</div></div>

Simpan pengaturan, lihat blog, dan selesai.

Apabila terdapat pertanyaan, jangan ragu untuk bertanya di kolom komentar. Blogizty akan senang untuk membantu.

©Blogizty