Tạo nút share ẩn hiện khi click vào

Thủ thuật trước Tanchau123 đã giới thiệu đến các bạn thủ thuật tạo Button Facebook Like, Follow Twitter và Google +1 cho bài viết . Thủ thuật này cho phép khách tham quan share bài viết lên các mạng xã hội tuy nhiên nó nhìn không thẩm mỹ vì đôi khi lại "chèn" lên các tiện ích khác. Chính vì vậy hôm nay Tanchau123 sẽ cho ra đời tiện ích share với phiên bản V2 dựa trên code lần trước nhưng các nút share sẽ ẩn đi và hiện ra khi ta "click" vào.

XEM DEMO

BẮT ĐẦU THỦ THUẬT:

1. Đăng nhập Blogger.

2. Vào Thiết Kế => Phần Tử Trang.

3. Thêm tiện ích HTML/Javascript.

4. Copy và paste đoạn code sau vào:

<style type="text/css">#gb{position:fixed;bottom:385px;z-index:+1000;}* html #gb{position:relative;}
.gbtab{height:100px;width:74px;float:right;cursor:pointer;background:url('http://www.facebookad.vn/wp-content/plugins/slick-social-share-buttons/css/images/tab_left_vertical.png') no-repeat;}.gbcontent{float:left;background:none;padding:3px;}</style><script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 65-w) : moveGB(71-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 10 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;gb.style.left = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script><div id="gb"><div class="gbtab" onclick="showHideGB()"></div><div class="gbcontent"><!-- SHARING BOX Fixed-Positioned Toolbox --><div class='sharing_box_namkna'><div style='text-align:center; margin-top:5px'></div><!-- TWITTER --><div class='item twitter_float' style='margin-left:3px'><a class='twitter-share-button' data-count='vertical' data-lang='en' href='https://twitter.com/share'>Tweet</a></div>
<!-- FACEBOOK --><div class='item' style='margin-left:3px'><div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='true' data-width='44'></div><div id='fb-root'></div></div><!-- G+ --><div class='item' style='margin-left:5px'><!-- Place this tag where you want the +1 button to render --><g:plusone size='tall'></g:plusone></div><!-- OTHERSHARE --><div class='item' style='margin-left:5px'><!-- AddThis Button BEGIN --><div class='addthis_toolbox addthis_default_style '><a class='addthis_counter'></a></div><!-- AddThis Button END --></div></div><!-- FAST SHARING SCRIPT --><!-- TWITTER SCRIPT --><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><script>(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><!-- G+ SCRIPT --><!-- Place this render call where appropriate --><script type='text/javascript'>gapi.plusone.go();</script><!-- STUMBLEUPON SCRIPT --><!-- Place this snippet wherever appropriate --><script type='text/javascript'>  (function() {      var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;       li.src = 'https://platform.stumbleupon.com/1/widgets.js';       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);  })();  </script></div></div><script type="text/javascript">var gb = document.getElementById("gb");gb.style.left = (65-gb.offsetWidth).toString() + "px";</script> 

CHÚ Ý: Nếu muốn đổi "nút share" sang bên phải thì bạn chỉ việc thay left thành right trong đoạn code trên.

5. Lưu lại và thưởng thức.

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