2 bình luận · lượt xem

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



Tạo nút like facebook g+ trượt dọc bài viết 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ỏ.



DEMO ngay trên bài viết này. Nguyên nhân bạn chỉ thấy +1 của G+ thôi là do bài viết đã có like của facebook nên không thể hiển thị like trượt facebook nữa. Thực hiện bài viết này ngay bạn sẽ thấy ấy mà, lười chụp ảnh Demo quá ^^



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 2Tì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.
CHÚC CÁC BẠN THÀNH CÔNG!
P/s Nếu không hiểu phần nào vui lòng comment bên dưới!




Có thể bạn thích

2 nhận xét:

NỘI QUY:
  • Mọi bình luận sai điều khoản sử dụng sẽ bị xóa mà không cần báo trước.
  • Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi Admin phản hồi.
  • Khi xuất bản bài viết chắc chắn không tránh khỏi lỗi về chính tả, cú pháp.

Hãy cùng tham gia bình luận về bài viết này nhé!