Tiếp tục với những chuỗi thủ thuật blog hay cùng Terocket, hôm nay chúng tớ sẽ hướng dẫn cả nhà cách để tạo một Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger, với thủ thuật blog tạo nút buttons share này thì hiệu ứng cực kỳ đẹp mắt, nó sẽ tự động hiện lên ở dưới màn hình khi chúng ta lăn xuống xem trang. Với việc này, gây ấn tượng mạnh mẽ với người đọc, làm họ có cảm giác kích thích và muốn share ngay lập tức.

Tiện ích này chỉ hoạt động với bài viết dài

Các widget có chứa bốn nút chia sẻ xã hội gồm Facebook, Twitter, Google+, LinkedIn. Và có một nút đóng X khi người dùng không muốn nó xuất hiện nữa. Rất tiện dụng với Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger này đúng không nào. Trước đây thì Terocket đã cho ra nhiều thủ thuật blog khác cực kỳ hay liên quan đến nút share buttons này rồi, các bạn có thể xem list ở cuối  bài viết nha.

Nút share buttons này sẽ tự động hiện lên khi ta lăn trang xuống.

Còn giờ, chúng ta sẽ bắt tay vào để thực hiện Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger này nào. Chuẩn bị nhé các thành viên Terocket.

Đầu tiên cần thêm mã sau vào code HTML của trang.

Đầu tiên bạn vào Blog Title → Template → Edit HTML. Nhấn tổ hợp Ctrl + F và tìm kiếm cho <data:post.body/> và copy đoạn mã sau vào sau <data:post.body/>. 

NOTE : Nhớ rằng có rất nhiều đoạn mã <data:post.body/> , khoảng 3 cái gì đó, bạn cần tìm đúng cái cần chèn vào nhé.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='md-active-share-comment-marker'/>
</b:if>

Tiếp theo các bạn chỉ cần thêm đoạn mã sao vào trong HTML của trang.

Đầu tiên bạn vào Blog Title → Template → Edit HTML. Nhấn tổ hợp Ctrl + F và tìm kiếm cho </body> và copy đoạn mã sau vào trước nó. Và lưu lại. Thế là xong!

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://googledrive.com/host/0B-0uHUanipfMNGNkeEYwazNLT2M' type='text/javascript'/>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; bottom: -450px; left: 0px; background-color: rgba(128, 128, 128, 0.6); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'> <a class='boxclose' id='boxclose'/>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import &quot;//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css&quot;;
#share-buttons{border-radius:5px;background:#FFF;width:660px;overflow:hidden;margin-left:60px;box-shadow:0 2px 3px rgba(71,71,71,0.31);padding:14px 7px}.share-button{background:#DCE0E0!important;position:relative;display:block;float:left;height:40px;overflow:hidden;width:150px;border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0 7px}.icon{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}.icon i{color:#fff;line-height:42px}.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin:0}.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}.share-button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.facebook iframe{display:block;position:absolute;right:16px;top:10px;z-index:1}.twitter iframe{width:90px!important;right:5px;top:10px;z-index:1;display:block;position:absolute}.google #___plusone_0{width:70px!important;top:10px;right:15px;position:absolute;display:block;z-index:1}.linkedin .IN-widget{top:10px;right:22px;position:absolute;display:block;z-index:1}.facebook:hover .slide{left:150px}.twitter:hover .slide{top:-40px}.google:hover .slide{bottom:-40px}.linkedin:hover .slide{left:-150px}.facebook .icon,.facebook .slide{background:#305c99}.twitter .icon,.twitter .slide{background:#00cdff}.google .icon,.google .slide{background:#d24228}.linkedin .icon,.linkedin .slide{background:#007bb6}</style>
<div id='share-buttons'> <div class='facebook share-button'> <i class='icon'> <i class='icon-facebook'> </i> </i> <div class='slide'> <p> facebook </p> </div> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FTerocket&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=20&amp;appId=568581339861351' style='border:none; overflow:hidden; width:80px; height:20px;'> </iframe> </div> <div class='twitter share-button'> <i class='icon'> <i class='icon-twitter'> </i> </i> <div class='slide'> <p> twitter </p> </div> <a class='twitter-share-button' data-via='AllBloggerTrick' href='https://twitter.com/share'> Tweet </a><script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
</script>
  </div> <div class='google share-button'> <i class='icon'> <i class='icon-google-plus'> </i> </i> <div class='slide'> <p> google+ </p> </div> <div class='g-plusone' data-size='medium'> </div><script type='text/javascript'>
    (function() {
      var po = document.createElement(&#39;script&#39;);
      po.type = &#39;text/javascript&#39;;
      po.async = true;
      po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
      var s = document.getElementsByTagName(&#39;script&#39;)[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
</script>
 </div> <div class='linkedin share-button'> <i class='icon'> <i class='icon-linkedin'> </i> </i> <div class='slide'> <p> linkedin </p> </div> <script data-counter='right' type='IN/Share'> </script> <script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US </script> </div></div><div style='display:block; margin: 0 200px; padding: 5px 0px 0px;font-family: Oswald; font-weight: 700;color: #000'> Don&#39;t You Think this Awesome Post should be shared ??<br/> <span style='color: #000; font-size: 18px;'>| <data:blog.pageName/> |</span> </div> </div> </div> </b:if>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Note: Ở trong đoạn mã trên có 2 phần cần chú ý đó là Terocket bạn cần thay đổi lại chính là đường link Fanpage của mình nhé.Thứ 2 là đoạn mã http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js Các bạn để ý, nếu có mã Jquery.min.js đó trong web của mình rồi thì xóa nó đi nha.

Ở trên là thủ thuật tạo Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger cực kỳ hay cho cả nhà, chắc chắn thủ thuật này của Terocket nhiều bạn sẽ cực kỳ thích thú. Nếu các bạn thấy hay hãy share đến bạn bè nha, và nếu thấy chưa làm được hoặc chưa hiểu chổ nào, hãy gửi bình luận ở dưới đây, chúng tớ sẽ giải đáp đầy đủ cho các bạn.

Tham khảo thêm một số thủ thuật blogger liên quan đến Share Buttons nào

  1. [Tips] - Nút buttons động bằng CSS3 cho Blogger V1
  2. [Tips] - Nút Facebook share trượt hai bên cho Blogger
  3. Button Lên Trên - Xuống dưới ẩn hiện với hiệu ứng trượt nhẹ nhàng
  4. Tạo nút bấm nhảy xuống cuối trang, lên đầu trang (back to top - bottom)
  5. Tạo nút Back to Top cho blogger với JQuery
  6. Tạo social button với hiệu ứng xoay tròn trên header
  7. Nút like với hiệu ứng ẩn hiện trên sidebar cho blogspot
  8. Mã iframe nút Google +1 cho mọi blog
  9. Nút like ẩn hiện khi xem bài viết blogger
  10. Thêm nút Social bookmark cho blogger
  11. Floating Social Bookmark trượt đẹp cho blogspot
  12. Hộp like và đăng ký ở cuối bài viết cho blogger
  13. Nút Share trượt hình quả trứng cho blogspot
  14. Nút Google+1,Tweet,Like, Pin It buttons theo chiều ngang
  15. Nút Share hặc Menu quay vòng bằng CSS3 cho Blogger
  16. Tiện ích các nút Share trượt dọc cho Blogspot (sticky sidebar)
  17. Chèn nút nhúng Linkhay và Tagvn vào Blogger
  18. Facebook like button cho Blogspot
An Thành Adthinks - Terocket