Tạo thanh Floating Social Sharing Bar cố định cực đẹp

posted in: Thủ thuật Blogspot, Tin tức | 0

Không thể phủ nhận tầm quan trọng của mạng xã hội trong SEO và việc một website/blog thiếu các nút chia sẻ này là một sai lầm lớn trong thiết kế. Thanh widget  trong Blog 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.

Tạo thanh Floating Social Sharing Bar cố định cực đẹp
Tạo thanh Floating Social Sharing Bar cố định cực đẹp

 

Cách cài 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é

<b:if cond=’data:blog.pageType == &quot;item&quot;’> <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> <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/>

<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: “http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/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 :

background:#FFFFFF;

Chúc các bạn thành công!

Bình luận