Tạo nút like facebook trượt dọc cho blogspot

nút like facebook trượt dọc cho blogspot

Hướng dẫn các bạn tạo nút like trượt dọc bài viết cho blogspot

Ưu điểm: được thiết kế đẹp bắt mắt có hiệu ứng đổ bóng, vì được thiết kế trượt dọc nên visitor có thể thích bài viết bất cứ khi nào, mình đã chỉnh lại màu của nút like để trông nó khác biệt và đẹp mắt.


Nhược điểm: Hầu hết tiện ích like nào cũng làm giảm tốc độ load website, một nhược điểm tiếp theo là tốn diện tích, nếu bạn load trên web trên di động thì tiện ích sẽ chạy theo che bài viết mà màn hình di động lại khá nhỏ.

Nào bắt đầu tạo nút like trượt nào!

Bước 1: Các bạn vào lại trang tổng quan của blog của bạn » Mẫu » Chỉnh sửa HTML
Bước 2: Tìm đến thẻ </body> và thêm đoạn mã sau lên trên thẻ đó.

<style type="text/css">
#chiase {position:fixed; bottom:40%; margin-left:-96px; float:right; background-color:#914500;z-index:10;box-shadow:#914500 0 0 0 4px,0px 7px 1px 0px #000;-webkit-box-shadow:#914500 0 0 0 4px,0px 7px 1px 0px #000;-moz-box-shadow:#914500 0 0 0 4px,0px 7px 1px 0px #000;border: 1px dashed #fff;}
#chiase .nut {float:left;clear:both;}
</style>
<div id='chiase'>
<div style="margin:4px;">
          <div class='nut' id='facebook'>
          <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
          <fb:like layout='box_count' show_faces='false'></fb:like>
          </div>
          <br /><br />
        <div class='nut' id='google'>
     <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
     </script>
        <g:plusone size="tall"></g:plusone>
        </div>

    </div>
</div>

Thêm một code tạo nút like trượt cho blogger

Tiện ích này sẽ có 3 nút like gồm facebook, google và twitter và còn nút share lên các bạn xã hôi khác nữa

Cách thực hiện tạo nút like trượt blogspot vẫn như trên

Bạn tạo 1 HTML/JAVACTIPT mới, và dán code bên dưới vào là xong.

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
<style>
/* Fixed Positioned AddThis Toolbox */
.sharing_box_ibiet {    border-bottom: 5px solid #FF3D00;
    position: fixed;    z-index: 99999;
    top: 10%;
    left: 5px;
    border-top: 5px solid #FF3D00;
    padding: 5px 5px 1px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #FFFFFF;
    width: 60px;
    min-height: 275px;
}
.sharing_box_ibiet .item {
width: 50px;
margin: 5px 0 5px 0;
}
.twitter_float iframe
{
width:55px!important;
}
</style>
<!-- SHARING BOX Fixed-Positioned Toolbox -->
<div class='sharing_box_ibiet'>
<div style='text-align:center; margin-top:5px'>
<!-- 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>
<!-- 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>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script></div></div>

P/s Các bạn có thể tùy chỉnh CSS mà mình đã tô màu theo ý của mình.