Thêm nút Like Facebook và G+ trượt mượt góc màn hình

5:17:00 PM
Mạng xã hội – Giúp phần rất lớn vào việc thúc đẩy Website của bạn đối với công cụ tìm kiếm, bạn cũng có thể tiếp thị được với đông đảo người đọc hơn nhờ mạng xã hội.
Một thủ thuật dành cho web, Blog dưới đây mình chia sẻ cũng đang được áp dụng ở khá nhiều Website, nó không gây cảm giá phiền toái cho người truy cập website mà lại khuyến khích người truy cập chia sẻ nội dung hữu ích trên website của bạn thông qua nút Like Facebook và G+ trượt ở dưới góc màn hình.

Làm thế nào để thêm thủ thuật này vào Website, Blog của bạn
Thủ thuật này sử dụng một đoạn mã CSS + HTML + JS khá nhẹ và chỉ cần bạn dán vào vị trí body của Website, blog là chạy được. Đối với những bạn mới sử dụng Website, blog thì mình hướng dẫn trên Blogspot hoặc WordPress dưới đây.

Thêm nút Like Facebook và G+ trượt mượt góc màn hình

Đối với Blogspot và WordPress bạn có 2 cách thêm: 1 là tạo 1 widget HTML và dán code vào là được, 2 là bạn dán code vào mẫu của Blogspot hoặc WordPress. (Dán trong thẻ BODY)
Bước 1: Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a widget) -> HTML/Javascript
Bước 2: Dán code dưới đây vào tiện ích vừa thêm
<style>
#socialslide{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70vCA7lIWs87UOcnnT_lcmy8GW42kR-jeB0-Q0XqYVrzelUGiqBQxm_BQAbRCZ3oZQf-am4VknayMdwmgiZlNoLKjhQGTsMQsOwWw1bbJFnWjx3kFoKIVe4qIsDYETcxIaE22jYd9V2U/s1600/recbg-btrix.png) left top repeat-x;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow: inner 0 0 3px #333;
padding: 12px 14px 12px 14px;
width: 250px;
position: fixed;
bottom: 13px;
left: 2px;
display: none;
z-index: 3;
height: 75px;
}
</style>
<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/10)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#socialslide').remove();}</script>
<div style="display: none;" id="socialslide">
<a style="position:absolute;top:11px;right:10px;color:#fff;font-size:14px;font-weight:bold;" href="javascript:void(0);" onclick="return closesocialslide();"> (x) </a>
<span style="font-family: arial; font-size: 16px; margin: 10px 0; color:#fff;">Hãy like website nhé!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>
<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=LINKPAGEFACEBOOK&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>
</div>
<div class='clear'></div>
Trong đó phần được bôi đỏ bạn thay link Page FAcebook của mình vào
Bước 3: Lưu lại widget và xem kết quả
Nếu bạn gặp bất kỳ khó khăn nào trong việc thêm thủ thuật này thì vui lòng ghi nội dưới comments, mình sẽ hỗ trợ sớm nhất cho bạn.

Chia sẻ:

Tác giả:

- Là một học sinh cấp 3 ,đam mê viết Blog để chia sẻ những kiến thức về internet mà mình biết

Bài viết liên quan

Xem tiếp
« Bài trước
Bài trước
Bài tiếp theo »

Bình luận Facebook: