Trước đây namkna đã giới thiệu đến các bạn tiện facebook likebox dạng popup tự động hiển thị fanpage facebook ra trước blog (xem lại Tại đây), tuy nhiên nó không chuyên nghiệp và rất bất tiện khi khách thăm blog bạn không muốn "click". Chính vì vậy, sử dụng hộp tiện ích với hiệu ứng trượt sẽ giúp blog/web bạn nhìn chuyên nghiệp và mượt hơn.
Các bạn có thể xem Demo. Demo ViewẢnh minh họa:
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu
3- Chọn Chỉnh sử HTML (Edit HTML)
4- Thêm đoạn code dưới đây sau thẻ </head> trong template của bạn rồi "lưu lại":
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
5- Chọn Phần Tử Trang => Thêm Tiện Ích => HTML/Javascript.-Nếu template của bạn có file Jquery này rồi thì cso thể bỏ qua bước này.
6- Copy và Paste toàn bộ code bên dưới vào:
<!-- Facebook Widget Start -->Trong đó:
<script type="text/javascript">
/*<![CDATA[*/jQuery(document).ready(function() {jQuery(".noopslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});/*]]>*/
</script>
<style type="text/css">
.noopslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg-V2o7N0cFkBto-8z_XaEV4OFPWQv-p7z-YIluXZv91uJ2yIIc5CHAAnjfG-aN9sXR_drscGhgrXg__FXFqulB12OAeQ6tL3ni5TVm6vr05Hgjp7hUKODs767hie9uUJcEgnm72CnQi4/s1600/button-facebook-namkna-1.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 42px;width: 245px;z-index: 9999999;position:fixed;right:-250px;top:20%;}
.noopslikebox div{border:none;position:relative;display:block;}
.noopslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}
.noopslikebox span a{color: gray;text-decoration:none;}
.noopslikebox span a:hover{text-decoration:underline;}</style>
<div class="noopslikebox"><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/namkna&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe>
</div>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi664AJVeWY3jpL6ir38dIJjkT48lDoOjMNLC-GOZSgKl7mxbbkZjctyTkc5fWXQznfEOxToAKDzLuF6H4kCUmBP1rnIx3KtpKsEN-mPXhmoo4phFGpfrwm2Riv0Modq1D7hQDAK2BFuSE/s1600/1-namkna-blogspot.png'/></a></div>
<!-- http://namkna.blogspot.com/ -->
<!-- Facebook Widget End -->
- Thay http://www.facebook.com/namkna thành URL trang face book cá nhân của bạn
- Thay link ảnh mầu đỏ thành link ảnh khác nếu bạn muốn. Thêm cho các bạn một số ảnh khác để lựa chọn. Nếu thích hình nào hãy bấm chuột vào hình đó để tải về và Uploaf lên blog để lấy link nha.
7- Lưu lại và xem thành quả.Chúc các bạn thành công !!!
Theo: Namkna.blogspot.com
0 nhận xét:
Biểu tượng mặt cười ( Copy & paste xuống phần Comment )
Hãy Luôn Comment Để Tạo Động Lực Cho Tác Giả
Emoticon