Sebelumnya mau curhat dikit, maaf karena baru sempat posting karena belakangan ini banyak tugas campus dan juga kesehatanku yang kurang baik. Nah, di weekend yang ceria ini saya ingin berbagi widget sosial share floating atau melayang horizontal. Pasti Anda sudah tidak asing lagi mendengarnya karena pada postingan sebelum saya banyak membahas tentang tutorial widget sosial melayang dengan gaya horizontal maupun vertikal. Tapi widget ini berbeda dengan yang telah saya bahas sebelumnya, karena widget ini akan ditempatkan di bawah judul posting dan akan melayang bersama dengan layar saat Anda scroll ke bawah. Berikut fitur widget horizontal sosial share floating:
- widget dilengkapi dengan tombol sosial sepert facebook, twitter dan google+.
- menggunakan jQuery yang sederhana sehingga lebih cepat saat load
- mengapung sampai bagian komentar blog
- sebuah ikon link komentar yang akan mengarahkan pengunjung ke kotak komentar
Artikel Terkait :
Menambahkan Horizontal Floating Share Bar di blog :
- Login ke Blogger Anda - klik Template dan pilih Edit HTML
- Cari tag </head>, gunakan Ctrl+F untuk mencari
- Selanjutnya salin kode dibawah ini tepat sebelum tag </head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.horizontalsocial .sharertitle{float: left; border-right: 1px solid #d2d2d2; padding: 3px 10px 2px 0px; margin: 0 0px 0 0; color: #b1a9a5; font-family:'Oswald', Arial, Helvetica, sans-serif;text-transform: uppercase; line-height: 25px; vertical-align: middle; font-size: 14px;}
.horizontalsocial .fb-like{width: 100px; float: left; border-right: 1px solid #d2d2d2; padding: 3px 0 2px; height: 25px; }
.horizontalsocial .sharertwitter{float: left; width: 115px; border-right: 1px solid #d2d2d2; margin: 0 15px 0 0; padding: 3px 0 2px; height: 25px;}
.horizontalsocial .sharergplus{float: left; width: 90px; margin: 0 15px 0 15px; padding: 3px 0 2px; border-right: 1px solid #d2d2d2; height: 25px;}
.horizontalsocial .sharerbubble{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3zQlyIZnYhItmjkNVRYnFO9Y6olQWQTlDjq-jebz0urj1VvsxUnAPOVu6dvK5TE5QFfK1gHp_QEC83n6lalaA256C8CZtnkSjYeGEKBrhKFu2StLTe1Ew5uMwBrjjE8-Fz5H4p4LGvMI/s1600/Commentz.png) no-repeat; height: 25px; min-width: 25px; float: left; margin: 7px 0 0; line-height: 18px; vertical-align: top;}
.horizontalsocial .sharerbubble a{color: #2d2520; padding: 0px 0 0px 30px; font-size: 18px !important; font-family: 'Lora', Arial, Helvetica, san-serif !important; }
.horizontalsocial.fixed{ position:fixed; top: -2px; z-index: 99999;}
#w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
#w2bSocialFloat td{padding:4px;margin:0;border:none;}
#w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
#w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;
jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pinit.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
// Google + (plus)
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>
- langkah selanjutnya cari kode dibawah ini, gunakan Ctrl+F :
<data:post.body/>
- kemudian salin script dibawah ini tepat diatas <data:post.body/> :
<b:if cond='data:blog.pageType == "item"'>
<div class='horizontalsocial social-buttons' id='horizontalsocial'>
<div class='w2bSocialFloat' id='w2bSocialFloat'>
<table class='w2bSocialFloat' width='100%'>
<tr>
<td><div class='sharertitle'>Socialize It →</div>
</td>
<td>
<div class='sharertwitter'><a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
</td>
<td>
<div class='fb-like'> <iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/></div>
</td>
<td>
<div class='sharergplus'> <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></div>
</td>
<td>
<div class='sharerbubble'><span class='thecomments'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/> </b:if></a>
</b:if>
</span></div>
</td>
</tr>
</table>
</div></div>
</b:if>
- Terakhir, klik Simpan template - selesai !
Tambahan :
Untuk menghilangkan fitur melayang, hapus script yang berwarna merah dan Anda juga bisa mengganti ikon komentar dengan ikon yang komentar yang Anda miliki cukup ganti link url yang berwarna kuning dengan link url ikon Anda.
Saya telah menambahkan Widget Horizontal Floating Share Bar ini diblog saya, bisa Anda lihat dibawah judul posting. Seperti biasa semoga artikel ini bermanfaat buat Anda semua dan bila Anda mengalami kesulitan tidak ada salahnya untuk berbagi dengan saya. Salam satu-delapan!
