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

Việc tạo một hộp thoại thông báo ở góc phải/trái dưới màn hình, như trong mục bài viết liên quan (Related posts):

• Code Chèn Quảng Cáo cho Web Blog

 mà các bạn có thể vào tham khảo, là việc cần thiết cho website thiết kế Blogger Dashboard, 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.

Để tạo một hộp thoại thông báo như vậy, chúng ta hãy thực hiện Cài đặt (Setting) theo các bước như sau:

Bước 1. Đăng nhập Blogger, vào Design Template>> Edit HTML. Đặt đoạn code bên dưới Khung Source Code 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>

Kết thúc, Bạn cần nhớ Sao lưu dữ liệu, Lưu lại Template.

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

Nguồn tham khảo: http://nghiencuuseo.blogspot.com/2015/03/tao-hop-thoai-thong-bao-voi-hieu-ung-truot.html
Demo: Bạn có thể lấy link Demo trong khung bên dưới để vào xem thư trang mà mình đã ứng dụng cho Code trong bài hướng dẫn.

http://tinhockhanhdat16.blogspot.com/

Ghi chú:
Một điều đặc biệt trong bước Cài đặt (Setting) nầy, Source Code được đặt thẳng vào trong Mẫu Template, không cần phải sử dụng đến phần thiết kế layout (Bố cục).
Trong phần: <p>Nội dung thông báo</p>, bạn có thể thử mở thêm trang nầy để chép dán  vào kiễm tra thử, dùng mã Html/JavaScrip để chèn vào giữa 2 thẻ <p> và </p>:

• Hộp thử Test Html/JavaScript

Trong trang Demo, Hộp thoại chỉ xuất hiện khi bạn kéo thanh cuộn bên di chuyển về phía đáy màn hình trong trang Blog.

Người viết: Nguyễn Đạt Khánh

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..