 |
| 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 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ữaCá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: 'en-US'} </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!
» CEO/FOUNDER tại Giải Pháp WebSFY - Solution For You
» Chuyên viên tư vấn chiến lược Marketing Online: 0932 913.631 - Mr.Huỳnh Phụng