Tạo hộp tiện ích trượt khi dê chuột vào

Một số blogger có sử dụng tiện ích ẩn / hiện hộp thoại khi click chuột vào, 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. XEM DEMO

BẮT ĐẦU THỦ THUẬT:

1. Đăng nhập tài khoản blogger của bạn.

2. Vào Thiết Kế => Chỉnh Sửa HTML => mở rộng tiện ích => 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://tanchau123.googlecode.com/files/hoptienich_truot.txt"></script>

3. Chọn Phần Tử Trang => Thêm Tiện Ích => HTML/Javascript.

4. Copy và Paste toàn bộ code bên dưới vào:

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5fZIm7Yq39NcuKFgnGwKsFmJcOiv_SUDMiCvM_sYXp3bNo2xgGtpSDkn2YGAUxYfO2NXmktnAX3XWhJ6F6kjsMVgRUynDQVjHmDrgK0YgeCsDKxHHQBRDqxp0SRSVKjEGKnhN8k9jiYee/s1600/facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>CODE NỘI DUNG BẠN MUỐN THÊM VÀO<span>By <a href="http://24work.blogspot.com/">Blogspot tutorial</a> / <a href="http://24work.blogspot.com/">+Get This!</a></span></div></div> </div>

5. Lưu lại và thưởng thức.

Chúc các bạn thành công !!!

Theo cayxadenhoabinh