Chỉ còn vài ngày nữa là tới Giáng Sinh rồi. Ngoài đường hay trong nhà ai đó thì chúng ta đều dễ dàng bắt gặp hình ảnh ông già Noel hay cây thông. Vậy còn blog của bạn thì sao? Bạn đã trang trí blog của bạn nhân dịp giáng sinh chưa? Hôm nay mình sẽ giới hướng dẫn các bạn làm Christmas popup coutdown kết hợp hiệu ứng tuyết rơi đẹp mắt.
Lưu ý: Popup này chỉ xuất hiện 1 lần với mỗi lần truy cập vào trang đó chứ tải lại(reload) trang là nó không hiện ra đâu.
2. Mẫu > Chính sửa HTML
3. Tìm thẻ </head>
4. Dán code dưới vào trên thẻ vừa tìm
3. Lưu lại
Lưu ý: Popup này chỉ xuất hiện 1 lần với mỗi lần truy cập vào trang đó chứ tải lại(reload) trang là nó không hiện ra đâu.
#Thêm script
1. Đăng nhập Blogger2. Mẫu > Chính sửa HTML
3. Tìm thẻ </head>
4. Dán code dưới vào trên thẻ vừa tìm
<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 = "12/25/2013 12:00 AM";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% days: %%H%% hrs: %%M%% mins: %%S%% secs";
FinishMessage = "Merry chrismas ";
//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'/>
#Thêm CSS
1. Tìm thẻ ]]></b:skin>
2. Dán 1 trong 2 code dưới vào trên thẻ vừa tìm
- Christmas popup 1
/* --------------------------------------------------
Christmas Popup 1
-------------------------------------------------- */
#mbt-counter {
padding: 10px;
font-family: oswald, verdana;
background-color: rgba(0, 0, 0, 0)!important;
color: #FFF!important;
position: absolute;
left: 53%;
top: 68%;
font-size: 17px;
}
.reveal-modal h1 {
position: absolute;
left: 45%;
font-size: 3em;
color: #FFEA00;
font-family: oswald;
top: 30%;
text-shadow: 2px 4px 12px #000;
}
.reveal-modal h2 {
position: absolute;
left: 57%;
top: 20%;
font-family: oswald, arial;
font-size: 1.7em;
text-shadow: 2px 4px 10px #000;
color: #FFF;
}
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL5qgQQnOW9LETppN0HtyF-f-eVJZZSRNyHOOEEa2i9LbSzeWgXZVT7st11WowhqZkD8qIKAGrC4o-Ic2L3G9BR4NmLppN55PYh-V8VReYeT15NlQpAypOC_UYIRgvPdksrT35xCOk4H8/s1600/christmas.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: .5;
position: absolute;
top: 25px;
right: 25px;
color: #bebebe;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
.reveal-modal .close-reveal-modal:hover {
color:#2d2d2f;
}
- Christmas popup 2
/* --------------------------------------------------
Christmas Popup 2
-------------------------------------------------- */
#mbt-counter {
padding: 10px;
font-family: oswald, verdana;
background-color: rgba(0, 0, 0, 0)!important;
color: #FFF!important;
position: absolute;
left: 5%;
top: 49%;
font-size: 17px;
}
.reveal-modal h1 {
position: absolute;
left: 5%;
font-size: 3em;
color: #FFEA00;
font-family: oswald;
top: 15%;
text-shadow: 2px 4px 12px #000;
}
.reveal-modal h2 {
position: absolute;
left: 5%;
top: 5%;
font-family: oswald, arial;
font-size: 1.7em;
text-shadow: 2px 4px 10px #000;
color: #FFF;
}
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz2pTehWpoGcjwji7h9221t5YHPG8_UQQALKkV4cQV9jf56F4NdmNWpefq_R-4Q0YEFo8x9AKOzmXZAKWZ_dRaGjeHef1yRJ5vQg4y2cqtDXQla6xCfGhrlvIO5aCe4WHmUfAYzx0pmc4/s1600/christmas1.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: .5;
position: absolute;
top: 25px;
right: 25px;
color: #bebebe;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
.reveal-modal .close-reveal-modal:hover {
color:#2d2d2f;
}
#Thêm HTML
1. Tìm thẻ <body> hoặc
<body expr:class='"loading" + data:blog.mobileClass'>
2. Dán code dưới vào dưới thẻ vừa tìm
<div id="myModal" class="reveal-modal" >
<h2>Count Down Begins!</h2>
<h1>Happy holidays!</h1>
<script type='text/javascript' src="http://tools.mybloggertricks.com/mbt-counter.js"></script>
<a class="close-reveal-modal">×</a>
</div>
Comments
Post a Comment
» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.