Tạo hộp thoại thông báo với hiệu ứng trượt

Một hộp thoại thông báo rất cần thiết cho bất kỳ website hay webblog, có tác dụng đặt một đoạn text với nội dung chào mừng bạn đọc hoặc gửi lời nhắn đến bạn đọc về một vấn đề gì đó. Có nhiều cách để tạo một thông báo như vậy, trong số đó nổi bật nhất có sử dụng thư viện jQuery để tạo hiệu ứng trượt, như bạn có thể thấy tại trang Demo (kéo xuống đáy trang).

Nếu bạn muốn tạo một hộp thoại thông báo như vậy, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước thẻ </head>.

<style>
#slidebox{
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:3px solid #E28409;
position:fixed;
bottom:0px;
right:-430px;
-moz-box-shadow:-2px 0px 5px #aaa;
-webkit-box-shadow:-2px 0px 5px #aaa;
box-shadow:-2px 0px 5px #aaa;
}
</style>

Bước 2. Đặt đoạn code bên dưới vào trước thẻ </body>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js ' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(window).scroll(function(){
var distanceTop = $('#last').offset().top - $(window).height();

if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});

$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
//]]>
</script>

Bước 3. Đặt đoạn code bên dưới vào trước thẻ <div id='footer'>.

<p id='last'/>
<div id="slidebox">
<a class="close">[×]</a>
<p>Nội dung thông báo.</p>
</div>

Lưu Template.

Hy vọng bạn sẽ hài lòng với thủ thuật nhỏ này và mong nhận ý kiến góp ý của bạn đọc để có thêm ý tưởng mới.

Posted in: Thủ Thuật blogspot