Floating Social Sharing Bar, Yang ini Beda

Floating Social Sharing Bar

Bismillah..., 

Yang rajin blogwalking ke blog-blog tutorial pasti sudah tidak asing lagi dengan artikel tentang cara membuat Floating Social Sharing Bar, kebanyakan kita dapati adalah Floating Social Sharing Bar yang berbentuk Vertikal (memanjang dari atas kebawah) tapi yang sahabat lihat saat ini adalah Floating Social Sharing Bar dengan style Horisontal (memanjang dari kanan kekiri atau sebaliknya), letaknya berada dibawah judul post dan saat scroll mouse digulung.


Floating Social Sharing Bar ini sengaja tidak dimunculkan di homapage dengan maksud agar tidak memberatkan dan yang uniknya lagi Floating Social Sharing Bar ini hanya akan muncul pada area posting.., saat scroll diputar kebawah melebihi/melewati area posting maka Floating Social Sharing Bar-nya akan menghilang.

Cara Memasangnya.

1. Masuk ke akun blogger sahabat, Pilih Design, Klik pada Edit HTML, Centang Expand Widget Templates 

2. Cari tag </head> dan masukkan kode dibawah ini sebelum </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>

3. Cari tag </head> dan masukkan kode dibawah ini sebelum </head>

<b:if cond='data:blog.pageType == "item"'><br /> <style type='text/css'> /*<![CDATA[*/ #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><br /> <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><br /> <script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_blogger_pinit.js"></script><br /> <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)})(); // Stumbleupon (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); // Digg (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})(); /*]]>*/ </script><br /> </b:if>

4. Cari tag <data:post.body/> dan masukkan kode dibawah ini sebelum <data:post.body/>

<b:if cond='data:blog.pageType == "item"'><br /> <div id="w2bSocialFloat" class="w2bSocialFloat"> <table width="100%" class="w2bSocialFloat"> <tr> <td><br /> <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a><br /> </td> <td><br /> <iframe 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"" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe><br /> </td> <td><br /> <div expr:id=""w2bPinit-" + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> <data:post.body/><br /> <script type="text/javascript"> w2bPinItButton({ url:"<data:post.url/>", thumb: "\<data:post.thumbnailUrl/>", id: "<data:post.id/>", defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2obRq1_MdkUjqFgLBMAVtfUV8-Z4NaAiip9prLHtFwmejsWL4YNZrhfhv3d2JQ3VpTKLUyYsc5MspDi0Uczd8Gq2Lq1uctimwUI04jD-ekEGK2O6gj4dCnAnHDUHmUdrvROEEvi-ka-m6/s1600/w2b-no-thumbnail.jpg", pincount: "horizontal" }); </script> <br /> </div> </td> <td><br /> <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"> </div> </td> <td><br /> <su:badge layout="1" expr:location="data:post.url"></su:badge><br /> </td> <td><br /> <a class="DiggThisButton DiggCompact"></a><br /> </td> </tr> </table> </div> </b:if>

5. Kilik Pratinjau, kalau tidak terjadi kesalahan, simpan dan lihat hasilnya

Semoga Bermanfaat.

Kalau tutorial diatas tidak berhasil sahabat terapkan, silahkan bertanya ke http://www.way2blogging.org

lihat Demonya

Sumber : http://www.way2blogging.org