Bài viết này RÈN LUYỆN TƯ DUY hướng dẫn bạn tạo nút like trượt dọc theo bài viết đẹp mắt Ưu điểm: được thiết kế đẹp bắt mắt có hiệu ứng đổ...
Ư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óm 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á ^^
Bắt đầu 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">P/s Các bạn có thể tùy chỉnh CSS mà mình đã tô màu theo ý của mình.
#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>
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!