Kirana

Artikel Terkait :

• Cara Membuat Tombol Share Media Sosial di Blog
• Cara Menambah Tombol Share Sosial Media Floating atau Melayang di Blogger
• Tombol Share Sosial Floating Bar di Blogger
• Membuat Stickybar Dengan Tombol Sosial Di Blogger

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 == &quot;item&quot;>
<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/AVvXsEgmR2ippVfI62UES0-q-hhyphenhyphenR-Gu4Ech6eC5y19q0F082afaJ8uPHt8QZO6ZmkIxaD3b5Dzzf9NQjD1ZT2YR-5h7XheZK3NQJtQzquPEcQHfnoPE3h_R4eWUTYB0_ZzUQdU9ZvFGkmypLCM/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[*/
　　　 // Twitter
　 　　 (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 == &quot;item&quot;>
<div class=horizontalsocial social-buttons id=horizontalsocial>
<div class=w2bSocialFloat id=w2bSocialFloat>
<table class=w2bSocialFloat width=100%>
　　　 <tr>
<td><div class=sharertitle>Socialize It &#8594;</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=&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot; 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 !