Giờ mình đi vào nội dung chính vấn đề này nhé !
Tạo Popup quảng cáo trên Website
<style type="text/css">Trong đó:
#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/AVvXsEhtsgGgBTKf2aqZHPiU9Lmf8j8L1R1p2iM4wpoo7Ymux6u3vBhf5a0PnK2PLT3tphsrcIFA33W3LmiI1iWqBfpWDFi8D_1ugZUX3FAkl8G3zll15JOk2cgDz2XZ6ek5l2RWg4JvHqtvEio4/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="đích đến của bạ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">×</a>
</div>
- 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.
Chúc các bạn thành công nha !
0 Nhận xét
Nhập nội dung