Hướng dẫn tạo thanh Floating Social Sharing Bar cố định cực đẹp

Hướng dẫn tạo thanh Floating Social Sharing Bar Widget cho các bạn

Thanh widget này sẽ xuất hiện khi bạn kéo xuống ,cố định ngay trên đầu bài viết.Tuy nhiên nó chỉ hỗ trợ cho các social sau :  Twitter, Facebook, Google plus, Pinterest, StumbleUpon, Digg buttons.

Live DEMO

How to Add Floating Social Sharing Bar Widget?

Trước tiên

1. Login vào New Blogger Dashboard > chọn More Options
2. Chọn Template > Edit HTML > Proceed
3. Chọn Expand Template Widgets .

Tiếp tục,gắn code dưới vào trước thẻ </head>

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

Và cuối cùng bạn là code The Social Scripts ,cũng gắn vào trước thẻ </head> nhé

1

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> /*<![CDATA[*/ #w2bSocialFloat {clear:both;padding: 6px ;display:block;background:#FFFFFF;} #w2bSocialFloat td{padding:4px;margin:;border:none;} #w2bSocialFloat td iframe{max-width:82px;width:82px !important;} #w2bSocialFloat.w2bFloatSocial{position: fixed;top:;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow: 1px 1px rgba(0,0,0,0.15);-moz-box-shadow: 1px 1px rgba(0,0,0,0.15);box-shadow: 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)})(); // 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> </b:if>

Vậy là xong 2 bước rồi,bước cuối cùng là bạn chèn code vào Widget

Thêm code sau vào trước thẻ <data:post.body/>

1

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

Save Template và refresh để xem kết quả bạn vừa làm !

Chú ý : bạn muốn thay đổi màu sắc Horizontal bar ,nhìn màu trắng mờ quá thì ctrl F tìm dòng code sau

1	<span style="background-color: #ffff99;"><code data-second_best="[object Object]" data-result="[object Object]">background:#

Nguồn Đôiguốcmộc.com

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..