Tạo Popup quảng cáo Trên Trang Blogspot

Tạo popup quảng cáo trên trang blog của các bạn là việc làm rất hay, nó giúp bạn quảng cáo hay thông báo bất cứ cái gì mà bạn có nhu cầu. chúng tôi đã xây dựng và tối ưu Popup này , chúng ta nên để Popup này xuất hiện một lần thôi nhé . kẻo độc giả khó chịu khi vào xem.


Tạo Popup quảng cáo Trên Trang Blogspot


OK. Bây giờ các bạn làm theo những hướng dẫn sau .
bạn chỉ cần tạo 1 Widget HTML/Javascript và dán code dưới đây vào.
Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript.
Code:


<style type="text/css">
#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: -200px -200px -200px -600px;
width: 550px;
height: 305px;
background: rgba(51, 51, 51, 0) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrde6ykJ3Y1MkVhlx163o_BMaVcO121UGnGjANrdrTCjzOh8Sm2POZT3swFlVjFdZrNBqQkBCmOuZwwgXcjx1-Lq63kn8vNfqmEB1qu-5dvorrdoDXZG8h8jN1stL1r78mvZrJp4WUhTwS/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;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="https://fileitviet360.googlecode.com/svn/trunk/vuvanphong-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 = "Chúc bạn vui vẻ !";
//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'/>
<div id="myModal" class="reveal-modal" >
<h2><a href="link các bạn muốn đến" target="_blank">Thủ


Thuật Blogger</a></h2>
<script type='text/javascript' src="https://fileitviet360.googlecode.com/svn/trunk/popup-counter.js"></script>
<a class="close-reveal-modal">&#215;</a>
</div>

Trong đó:
- Khu vực chữ bôi đỏ là mã HTML hiển thị nội dung của quảng cáo.
- Dòng chữ Chúc bạn vui vẻ ! bạn thay bằng câu của bạn hoặc có thể xóa đi nếu muốn.
- Link hình ảnh nền được bôi xanh.

Cơ bản đến đây là các bạn có thể làm được rồi
Chúc các bạn thành công .