Thursday, February 25, 2016

Cara Buat Tombol Social Media Share Fast Loading



Salah satu hal yang paling disukai para blogger ketika tulisannya di share oleh pembacanya. Maka dari itu adanya tombol Share di sebuah blog atau situs seperti menu wajib yang tidak akan ditinggalkan oleh pemiliknya. Tombol share social media seperti Facebook, twitter, Google plus dan lain sebagainya mempunyai sisi komunitas pembaca tersendiri. Terkadang penempatan tombol share maupun kode HTML yang disematkan membuat pemilik situs harus kreatif untuk mengakalinya karena ada beberapa jenis penempatan serta kode share social media yang memberatkan loading blog.

Rata-rata pemilik situs tidak menyadari page speed blognya juga akan terpengaruh dengan tombol-tombol atau widget yang luput dari perkiraan sebelumnya. Salah satu penghambat cepatnya loading halaman artikel blog adalah tombol share social media yang menggunakan tipe kode java script (js) dalam implementasinya. padahal ada cara yang mudah dan tergolong ringan untuk menjalankan sebuah script tombol share tanpa kode javascript yaitu dengan bermodal kode CSS dan HTML saja.

button share social media di blog

Dan salah satu kelebihahan yang nanti admin bahas dari kode tombol share adalah kode ini valid HTML5. Tombol share nantinya dibuat simple, ringan dan tentu saja tepat guna. lihat contoh tombol share simple pada gambar diatas.

Dan di bawah ini adalah cara meletakkan tombol social media share di blog :

1. Buka Blogger dan masuk ke tab Template ( copy dahulu seluruh kode HTML template sobat untuk berjaga-jaga apabila terjadi kesalahan )

2. Klik edit HTML, copy dan paste-kan kode di bawah ini letakkan diatas kode ]]></b:skin>
#share-button{overflow:hidden}#share-button p{float:left;display:block;padding:5px 8px!important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff}#share-button a{float:left;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff}#share-button a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}
3. Setelah itu tempelkan kode berikut ini, letakkan di bawah kode <data:post.body/> yang kedua atau yang ketiga, pokoknya post body yang terakhir.
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='share-button' style='margin-top:8px;'> <p><span style='font-size:17px;font-weight: bold;'>Share This Post</span></p><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;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' style='background:#c0361a;' target='_blank' title='Google+'>Google+</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></div> </b:if>
4. Silahkan simpan dan coba anda lihat hasilnya

Bagaimana, sudah semakin cepat loading page-nya ?, semoga tips membuat tombol share di blog yang super ringan tanpa java script diatas bermanfaat.

2 komentar

Hatur nuhun dulur, kodenya sudah saya pajang di blog saya.


Emoticon Emoticon