Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot

Làm thế nào để thêm nút Like Facebook, chia sẻ G+, theo dõi Twitter cho 1 trang Web hoặc blog?
Thủ thuật hôm nay mình giới thiệu tới các bạn cách thêm 1 nút Like Page FB, chia sẻ G+, theo dõi twitter cực đẹp và rất tiện dụng.
Điểm nổi bật của thủ thuật này là khi các bạn kéo thanh cuộn trình duyệt ra khỏi Top thì nút khung Like đó tự xuất hiện và khi lên Top thì nó lại tự động biến mất.
tin shock, shock360
Demo tại blog: Tin shock (kéo thanh cuộn trình duyệt và xem kết quả nhé các bạn)
- Cách làm thủ thuật trên Blogspot (trên những nền Web khác nhau thì các bạn làm tương tự nhé)
1. Vào bảng điều khiển blogger - > Bố cục (Layout) -> Thêm tiện ích (Add a widget) -> HTML/Javascript
2. Dán Code dưới đây vào tiện ích vừa thêm.


<style>
#socialslide{background: rgb(41, 40, 40) url(http://3.bp.blogspot.com/-FZRJ9cS-Mkk/UXpZC0CGyrI/AAAAAAAAAgg/tnE5hftHXuM/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: 300px;
position: fixed;
bottom: 13px;
right: 2px;
display: none;
z-index: 3;
height: 65px;
}
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div style="display: none;" id="socialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closesocialslide();">(ĐÓNG)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Tham gia cùng Shock360 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=https%3A%2F%2Fwww.facebook.com%2F511574655544346&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 style="float:left; margin:15px;"><a href="https://twitter.com/#" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @hannygames</a>
<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></div>
</div>

<div class='clear'></div>

-Trong đó
Tham gia cùng Shock360 nhé! : là lời nhắc trên tiêu đề khung (Nhớ Like cho shock360 cái nhá các bạn)
511574655544346 : là con số id của Page FB các bạn. Nếu Page FB của các bạn đã đổi tên thì lấy nó là tên link id của Page đó nhé. Ví dụ "https://www.facebook.com/thuphapVietNam1" thì thay con số này bằng thuphapVietNam1
#: là Page twitter của các bạn.
Xong rồi. Xem kết quả nhé :)
Chúc các bạn thành công !

Chuyên mục: , , ,

0 nhận xét:

Đăng một bình luận