Membuat Social Share Button Responsive Tanpa JavaScript di Blog

Tutorial blog kali ini ialah bagaimana cara membuat widget social share button atau tombol berbagi sosial media full responsive di blog tanpa menggunakan JavaScript. Konsep share button kali ini lebih simple dan cukup ringan.

Terkait: Membuat Tombol Social Share dengan Counter di Blog

Selain responsive, widget ini sudah valid HTML5 dan CSS3, sehingga tidak akan menggangu pikiran anda untuk memperbaiki nilai errornya di webtools validasi HTML5 ataupun CSS3.

Widget tombol share ini sangat cocok diletakkan dimana saja, baik di atas maupun di bawah postingan. Seperti yang saya gunakan sekarang ini (saat postingan ini diturunkan) dibagian bawah judul postingan terdapat tombol berbagi ke social media, itulah widget tomboh share yang hendak saya bagikan.

Cara Membuat Widget Tombol Berbagi ke Sosial Media Responsive di Blog

Berhubung widget ini adalah responsive, maka kita perlu menambahkan kode media queries di template blog, yang berisi CSS pemanggil responsivitas dari widget tersebut.

Tombol share ini tidak menggunakan FontAwesome, namun mengguna icon dalam 1 gambar (png).

1. Seperti biasa, login ke blogger, masuk ke dashboard, kemudian klik pada menu Template > Edit HTML
2. Kopi kode CSS berikut ini dan letakkan di atas kode ]]></b:skin> atau </style>

/* share button ala Bungfrangki.com */
#share-this{overflow:hidden;margin:10px 18px;line-height:1.4em}#share-this a{float:left;display:block;color:#fff;padding:10px 14px;text-align:center;margin:0 3px 3px;font-size:12px}#share-this a.this-fb{background:#395796;}#share-this a.this-tw{background:#4cb0ea;}#share-this a.this-gp{background:#de3425;width:44px;padding:0;text-align:center;height:41px;overflow:hidden;}#share-this a.this-gp i{margin:5px 0 0;text-align:center;padding:0}#share-this a.this-fb:hover,#share-this a.this-tw:hover,#share-this a.this-gp:hover {opacity:.9}#share-this i {margin-right:12px}
.this-fb i,.this-tw i,.this-gp i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUwhrni9l1rBmU5-zYm4s64YRzXoqOw1g0_wmoM7l2mwijIzaMsLwwOUma_cNXHjRhK_WdIEczP-KZd5Wq8grDBci-XJRWUtYTdS9nQZqFZBichiGb90-5pdfFJLsPjcW9t4xGCPUpEiA/s1600/sosmed22.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}.gp-del{display:none}
.this-fb i{background-position:0 -100px;margin-top:-4px}.this-tw i{background-position:0 -150px}.this-gp i{background-position:0 -200px}.notpay {font-size:13px;line-height: 22px;border:2px #df3f2a solid;padding:3px 15px;text-align:center;margin:0 0 25px;}.pay {font-size:13px;line-height: 22px;border:2px #5973b0 solid;padding:3px 15px;text-align:center;margin:0 0 25px;}
@media screen and (max-width:414px){#share-this{margin:10px 15px}.gp-del{display:block}#share-this a{min-width:100%;padding:0;text-align:center !important;height:45px;line-height:45px;margin:0 auto 3px !important}#share-this a.this-gp i, #share-this i{display:none}#share-this a.this-gp{height:auto;margin:0 auto;padding:0}}

3. Cari lagi kode <data:post.body/> (yang kedua) lalu letakkan kode di bawah ini tepat di bawahnya

<div id='share-this'>
<a class='this-fb' 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' target='_blank' title='Facebook'><i class='fb-1'/>Share on Facebook</a><a class='this-tw' 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' target='_blank' title='Twitter'><i class='tw-2'/>Tweet on Twitter</a><a class='this-gp' expr:href='&quot;https://plus.google.com/share?url=&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' target='_blank' title='Google+'><i class='gp-2'/><span class='gp-del'>Plus on Google+</span></a></div>

4. Simpan Template.

Lalu lihat hasilnya dengan membuka salah satu postingan di blog anda. Bagaimana, cukup mudah bukan?

Begitulah cara membaut social share button responsive tanpa memuat unsur JavaScript di blogger atau blogspot. Selamat mengujicobakan di template blog anda, semoga berhasil.