Social button atau tombol sosial merupakan sebuah embel-embel yang hampir semua blog menggunakannya. Karena dengan kehadirannya dapat menghadirkan suasana yang berbeda pada blog. Social button merupakan kumpulan dari beberapa tombol yang difungsikan untuk membagikan artikel yang ada di blog ke jejaring social, misalnya Facebook, Twitter, dan G-Plus. Tentunya dengan adanya social button ini akan menambah ramai traffic blog sobat semua, karena ketika artikel sudah dibagikan ke jejaring sosial maka sama halnya artikel kita dipromosikan ke jejaring sosial tersebut.
Meskipun memiliki fungsi yang cukup menarik dan memiliki banyak manfaat tentang penambahan traffic blog, tetapi layaknya semua widget yang menggunakan javascript, hal tersebut akan berefek pula terhadap lama muat/loading blog sobat, oleh karena itu perlu dilakukan optimasi pada social button tersebut.
Oleh karena itu muncullah inovasi lazy load social button ini, sehingga dapat mengurangi lama loading blog sobat. Karena social button ini baru akan memuat javascript social button setelah terkena hover dari mouse sobat.
Untuk menggunakannya ikuti langkah-langkah berikut.
Login ke akun Blogger sobat ==> Template ==> Edit HTML ==> centang Expand Template Widget
Lalu cari tag ini ]]</b:skin> , lalu tambahakan baris CSS berikut sebelum tag tersebut.
.fb-like {display:inline !important;}
#facebook-widget, .twitter-widget, .google-widget, .facebook-widget,#google-widget,#twitter-widget { color: #ffffff !important; display: inline-block; line-height: 22px; text-align: center; text-decoration: none;width: 55px;}
#facebook-widget, .facebook-widget { background: #3b5b99; }
#google-widget, .google-widget { background: #dd4b39; }
#twitter-widget ,.twitter-widget {background: #33ccff;}
Lalu cari tag </body> , lalu tambahkan script berikut sebelum kode tersebut<script type='text/javascript'>
//<![CDATA[
var element, script ;
element = document.getElementById('google-widget');
element.onmouseover = function () {
this.onmouseover = null;
this.parentNode.removeChild(this);
script = document.createElement('script');
script.async = true;
script.src = '//apis.google.com/js/plusone.js';
document.body.appendChild(script);
};
element = document.getElementById('facebook-widget');
element.onmouseover = function () {
this.onmouseover = null;
this.parentNode.removeChild(this);
script = document.createElement('script');
script.async = true;
script.src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=133083533456136";
document.body.appendChild(script);
};
element = document.getElementById('twitter-widget');
element.onmouseover = function () {
this.onmouseover = null;
this.parentNode.removeChild(this);
script = document.createElement('script');
script.async = true;
script.src = '//platform.twitter.com/widgets.js';
document.body.appendChild(script);
};
//]]>
</script>
Berikutnya untuk penampilan social button ini kita punya pilihan1. Hanya untuk halaman post
Cari kode berikut <div class='post-header-line-1'/> , lalu tambahkan kode HTML berikut setelahnya
<div style="margin: 0px auto;text-align: center;" > <b:if cond='data:blog.pageType == "item"'> <a href="#" id='twitter-widget' >Tweet</a> <a class='twitter-share-button' data-count='horizontal' data-related="Your-Twitter-Handle" href='https://twitter.com/share'/> <a href="#" id='google-widget' >+1</a> <span class='g-plusone' data-size='medium'/> <a href="#" id='facebook-widget' >Like</a> <div class='fb-like' data-layout='button_count' data-send='false'/> </b:if> </div>2.Untuk halaman Indek dan juga halaman post
Cari kode <div class='post-header-line-1'/> , lalu tambahkan kode HTML berikut.
<div style="margin: 0px auto;text-align: center;" > <b:if cond='data:blog.pageType == "item"'> <a href="#" id='twitter-widget' >Tweet</a> <a class='twitter-share-button' data-count='horizontal' data-related="Your-Twitter-Handle" href='https://twitter.com/share'/> <a href="#" id='google-widget' >+1</a> <span class='g-plusone' data-size='medium'/> <a href="#" id='facebook-widget' >Like</a> <div class='fb-like' data-layout='button_count' data-send='false'/> <b:else/> <a class='twitter-widget' expr:href='"http://twitter.com/share?url=" data:post.url "&text=" data:post.title' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); return false;'>Tweet</a> <a class='google-widget' expr:href='"https://plus.google.com/share?url=" data:post.url' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); return false;'>+1</a> <a class='facebook-widget' expr:href='"http://www.facebook.com/share.php?u=" data:post.url "&title=" data:post.title' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); return false;'>Like</a> </b:if> </div>Terakhir simpan template sobat.
Wassalamu 'alaikum wr.wb
Sumber: http://www.stylifyyourblog.com/2012/06/lazy-loading-social-buttons-for-blogger.html
Artikel Sejenis
Tidak ada komentar:
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">Kode Anda</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">Kode Panjang Anda</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL Gambar</i>
Untuk menyisipkan judul, gunakan tag <b rel="quote">Kata-kata Anda</b>