Thanh mạng xã hội trượt ra khi cuộn trang cho Blogger
Trước đây khi template mới này mình không biết phải thêm mấy cái nút like, +1, với cả Tweet ở đâu cho hợp lý cả. Thì qua nhiều lần suy nghĩ mình đã dục nó qua bên phải và cho nó trượt ra khi người dùng cuộn trang xuống. Việc cho thanh mạng xã hội trượt ra mình cảm thấy khá ổn vì nó khiến người dùng để ý hơn trong quá trình thao tác trên trang web, từ đó chúng ra dễ dàng nhận được sự ủng hộ nhiều hơn từ những nút chia sẻ qua mạng xã hội này.
Với thiết kế hiện tại thì mình làm nó khá là đơn giản, lấy 2 tông màu chủ đạo của hai mạng xã hội làm màu nền và cho hiển thị 2 nút like và +1 bự với số lượt chia sẻ giúp cho người dùng có hứng thú hơn. Ok, ngay sau đây mình xin hướng dẫn một cách đơn giản nhất cách thêm nó vào Blogger / Blogspot của bạn.
Sau khi hoàn tất bạn chèn hết đoạn mã sau đây lên trên thẻ </body>
Xong thì tiếp tục chèn đoạn mã sau đây xuống dưới thẻ <body> nhé
 |
| Thanh mạng xã hội trượt ra trong Blogger |
Thanh mạng xã hội trượt vào Blogger
Đầu tiên thì bạn thêm đoạn css sau đây lên trên thẻ ]]></b:skin> nhé/* KslZone Social Dock */
.kslsocialdock{
position:fixed;
visibility:hidden;
overflow:hidden;
transition:all .5s ease-in-out;
transition-delay:.1s;
left:-70px;
top:200px;
}
.google-plus-now,.facebook-like-now {
background: red;
padding:7px;
width:68px;
}
.google-plus-now{
padding:5px 7px 0px;
}
.facebook-like-now{
background: blue;
}
.kslsocialdock.show{visibility:visible;left:0}Sau khi hoàn tất bạn chèn hết đoạn mã sau đây lên trên thẻ </body>
<!-- Ksl Social Dock -->
<div class='kslsocialdock'>
<div class='google-plus-now'><div class='g-plusone' data-size='tall'></div></div>
<div class='facebook-like-now'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false'/></div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 150) {
$('.kslsocialdock').addClass('show');
} else {
$('.kslsocialdock').removeClass('show');
}
});
});
//]]>
</script>Xong thì tiếp tục chèn đoạn mã sau đây xuống dưới thẻ <body> nhé
<div id="fb-root"></div>
<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/vi_VN/sdk.js#xfbml=1&appId=191743990857285&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="https://apis.google.com/js/platform.js" async="" defer=""></script>
lúc 20:38 3 tháng 2, 2015
Mình vẫn chưa biết nên để thế nào cho thích hợp, vừa mắt nên vẫn chưa để :D
lúc 20:39 3 tháng 2, 2015
Blog này cũng cân nhắc mãi mới thấy chỗ này tương đối hợp lý :D
lúc 16:01 7 tháng 2, 2015
mình thì chưa có blog nào thực sự hoạt động nên cũng chưa để :)
lúc 16:52 7 tháng 2, 2015
Vậy làm cho nó hoạt động liền đi bác :D
lúc 16:58 7 tháng 2, 2015
thôi thì để sang cuối năm đi :D
lúc 16:59 7 tháng 2, 2015
nhầm thôi thì để sang đầu năm đi =))
lúc 23:04 11 tháng 2, 2015
Sao mình không dùng addthis, một plugin khá hay... Trước đây anh có hướng dẫn một cách chèn ở đây... Mọi người có thể tham khảo
http://blog.nguoiaolam.net/2012/12/huong-dan-tuy-chinh-tien-ich-addthis.html
lúc 08:38 12 tháng 2, 2015
Cái thanh của Addthis là dạng share lên các mạng xã hội rồi, em thấy thế này khách cảm thấy có hứng nhấn like và +1 nhiều hơn nhiều hơn là bấm vào đó rồi chia sẻ lên facebook.
Ngoài ra thì cũng tùy đối tượng và nhu cầu sử dụng thôi, cái này đơn giản và nhẹ hơn, nhưng cái kia lại có analytics và đủ thứ :D
lúc 17:34 18 tháng 2, 2015
Chúc bác và gia đình năm mới an khang thịnh vượng và chăm blog ngày càng phát triển nhé :)
lúc 21:33 20 tháng 2, 2015
Chúc mừng năm mới nha <3
lúc 21:35 20 tháng 2, 2015
Thanks bác nhiều chúc bác cũng thế nhé :)
lúc 21:35 20 tháng 2, 2015
Chúc anh nhiều hồng ân của chúa nhé :D
lúc 14:38 1 tháng 3, 2015
Tiện ích củng khá hay đó nhỉ
lúc 18:19 1 tháng 3, 2015
Anh cho em hỏi mấy câu:
1. Có cách nào để bắt buộc người đọc phải bật Javascript của trình duyệt lên không?
2. Trong Javascipt thì có thể gán giá trị vào tên hàm hay không?
Ví dụ em có một hàm Check, vậy em có thể gán giá trị true hay false vào tên hàm Check được không
3. Lệnh nào giúp em dừng việc tải trang lại ?
lúc 19:59 1 tháng 3, 2015
Nếu là Blogger mà dựng việc tải trang lại thì bó tay rồi, ý tưởng thế này bạn dùng đoạn mã này
<noscript><meta http-equiv="refresh" content="0; url=địa_chỉ_trang_báo_lỗi" /></noscript>
thẻ noscript xác định nếu người dùng không sử dụng Javascript thì nó sẽ dùng thẻ meta redirect qua trang khác báo lỗi :D
lúc 05:42 2 tháng 3, 2015
Năm mới phát đạt nhé Lâm
lúc 13:58 4 tháng 4, 2015
Em làm theo chẳng thấy có thay đổi gì a ơi -_-
lúc 15:27 4 tháng 4, 2015
Mình check ở trang phanhung.info không thấy bạn chèn gì vào hết á :D
lúc 23:38 4 tháng 5, 2015
Sao của mình k thấy hiện chi cả bạn nhỉ ?
lúc 12:51 5 tháng 5, 2015
À chết hình như bài thiết mất một thứ nhỏ rồi ^^, để tối về mình sẽ cập nhật lại sau.
lúc 12:55 6 tháng 5, 2015
Có thể áp dụng chưa bạn
lúc 20:46 7 tháng 5, 2015
Rồi nhé :D
lúc 00:25 8 tháng 5, 2015
Hình như thiếu phần ID cho facebook và Google + hay sao mà e làm mãi k hiện bác nhỉ ?
lúc 08:31 8 tháng 5, 2015
Bạn để cho mình địa chỉ blog bạn mình xem thử nhé.
lúc 09:18 8 tháng 5, 2015
blog của em là http://manhtriphuong.blogspot.com/, tiện thể hỏi bác cách thêm font chữ Roboto, sans-serif; vào blog với được không ạ, nhìn dễ đoc quá, thank bác
lúc 01:43 6 tháng 6, 2015
Sao em thêm vào mà nó không hiện ra admin nhỉ?
blogcủa em: http://gsuhue.blogspot.com/
lúc 17:02 15 tháng 6, 2015
Sao mình làm y hệt bạn hướng dẫn mà không có xuất hiện nhỉ
lúc 02:16 16 tháng 6, 2015
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js'></script>
them cai vao sau the < head> nhe
lúc 16:21 28 tháng 7, 2015
Chào bạn ! mình làm giống bạn nhưng không hiện ra. Khi mình chỉnh thông số thì nó hiện ra nhưng chỉ cố định 1 chỗ không giống trên trang của bạn. Mong bạn giúp đỡ mình xin chân thành cám ơn! blog của mình : cuongcad.blogspot.com