Tết âm lịch với người việt nam nói riêng và người châu á nói chung là một ngày tết vô cùng ý nghĩa. Nhà nhà đều sắm sửa đón tết, còn những blogger chúng ta cũng dộn dịp trang trí blog bằng những hiệu ứng đẹp như: Thay đổi hình nền ngày tết, trang trí hoa đào tết,... Để góp phần đưa không khí tết đến với mọi nhà Bài viết này namkna sẽ hướng dẫn các bạn cách tạo một cửa sổ Popup đồng hồ đếm ngược khi độc giả truy cập vào trang của bạn đọc nội dung.
Điểm đặc biệt của tiện ích này là nó tích hợp chức năng kiểm soát cookie của trình duyệt để kiểm soát cách thức popup hiển thị. Bạn có thể cài đặt để nó xuất hiện một lần duy nhất (và chỉ xuất hiện khi người dùng thoát hẳn khỏi trình duyệt đó và đăng nhập lại. Bạn có thể thêm nó cho blogger hay bất cứ một nền tảng web nào khác.
Các bạn có thể xem hình ảnh minh họa bên trên hoặc xem blog demo bên dưới nha.
» VIEW DEMO
☼ Thêm Next & Previous kèm tiêu đề bài viết từ Jquery cho blogger
Lưu ý: Hướng dẫn này sẽ can thiệp lớn vào phần mẫu của bạn do vậy hãy tải mẫu của bạn về lưu lại dự phòng trước khi tiến hành theo bất cứ bước nào namkna hướng dẫn sau đây.
1- Đăng nhập vào Blog
2- Vào thẻ Mẫu (Template)
3- Bấm vào nút Chỉnh sửa HTML (Edit HTML)
4- Thêm đoạn code bên dưới vào trước thẻ </head>.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://tools.mybloggertricks.com/mbt-popup.js"></script>
<script type='text/javascript'>
//<![CDATA[
//Setting Time
TargetDate = "2/1/2014 12:00 AM";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% days: %%H%% hrs: %%M%% mins: %%S%% secs";
FinishMessage = "It is finally here!";
//Hiding snowfall
$(document).ready(function()
{
$('a.close-reveal-modal').click(function() {$(document).snowfall('clear');});
//Setting cookie
if(sessionStorage.getItem("Hide-MBT-Popup") == 1) {
$(document).snowfall('clear');
$(document).snowfall.hide();
$("#myModal").hide();
}
sessionStorage.setItem("Hide-MBT-Popup", 1);
});
$(function() {
// Setting Animation
$('#myModal').reveal({
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: false, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
});
//Revealing Snowfall
$(document).snowfall({deviceorientation : true, round : true, minSize: 1, maxSize:8, flakeCount : 250});
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
Tùy chỉnh:
- Nếublog bạn đã có file Jquery rồi thì xóa phần màu xanh đi nha.
- Nếu không muốn có hiệu ứng tuyết rơi thì hãy xóa đoạn màu vàng đi nha.
- 2/1/2014 12:00 AM là ngày đích bạn cần đếm ngược, với các thông số lần lượt làTháng/ngày/năm Giờ kiểu giờ. Trong đó giờ là 12 tiếng gồm từ 0h00 đến 12h00, Kiểu giờ gồm buổi sáng AM và buổi tối PM. Ngày và giờ ở đây phải sau ngày bạn muốn đếm ngược nha.
- Bạn có thể thay đổi lại định dạng ngày tháng đếm ngược bằng cách thay đổi đoạn
%%D%% days: %%H%% hrs: %%M%% mins: %%S%% secsKhông được thay đổi các biến bắt đầu và kết thúc bằng %%. Tức là bạn chỉ có thể thay đổi những phần màu xanh ví dụ:
%%D%% Ngày: %%H%% giờ: %%M%% phút: %%S%% giây
5- Thêm đoạn css bên dưới vào trước thẻ đóng ]]></b:skin>
#mbt-counter {
padding: 10px;
font-family: oswald, verdana;
background-color: rgba(0, 0, 0, 0)!important;
color: #FFF!important;
position: absolute;
left: 59%;
top: 12%;
font-size: 15px;
}
.reveal-modal h2 {
position: absolute;
top: 5%;
font-family: oswald, arial;
font-size: 1.7em;
text-shadow: 2px 4px 10px #000;
color: #FF9D0F;
left: 4%;
}
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
left: 50%;
top:170px;
margin-left: -300px;
width: 550px;
height: 305px;
background: rgba(51, 51, 51, 0) url(http://1.bp.blogspot.com/-DrMdgQi7Uq4/UsMDvui64fI/AAAAAAAAM3k/QLhbbmjPwnM/s1600/happy-new-year.png) no-repeat -17px 0px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
color: #FFF;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 32px;
line-height: 0.5;
position: absolute;
right: 25px;
font-weight: bold;
cursor: pointer;
bottom: 25px;
color: #9C6417;
}
.reveal-modal .close-reveal-modal:hover {
color:#2d2d2f;
}
6- Thêm đoạn mã bên dưới vào trước thẻ mở <body>.<div id="myModal" class="reveal-modal" >
<h2>Thời gian còn lại!</h2>
<script type='text/javascript' src="http://tools.mybloggertricks.com/mbt-counter.js"></script>
<a class="close-reveal-modal">×</a>
</div>
7- Lưu mẫu của bạn lại và kiểm tra thành quả nha.
