Demo TẠI ĐÂY
1. Share code Popup hiện quảng cáo giữa trang
Code:
<style type="text/css">
/* Huong dan boi vuvanphong.com */
#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/AVvXsEjkDsEFgIdSWCydg9fVdKoNcY5rHILnFhmGq-8wl6QRLY3u2xWtZzi1pv2SvASolk7jatqqjGwVA8shl_e3CsIglijJ8suJs2d3N_nlatAzX1_Iwj9SMEwErUPaHkmSkRwvdvmlXUg1ucjD/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="http://www.vuvanphong.com" target="_blank">Blog Vũ Văn Phong</a></h2>
<script type='text/javascript' src="https://fileitviet360.googlecode.com/svn/trunk/popup-counter.js"></script>
<a class="close-reveal-modal">×</a>
</div>
Trong đó:
- Nội dung màu đỏ là hiển thị của nội dung quảng cáo.
- Link ảnh: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkDsEFgIdSWCydg9fVdKoNcY5rHILnFhmGq-8wl6QRLY3u2xWtZzi1pv2SvASolk7jatqqjGwVA8shl_e3CsIglijJ8suJs2d3N_nlatAzX1_Iwj9SMEwErUPaHkmSkRwvdvmlXUg1ucjD/s1600/happy-new-year.png là ảnh nền
- Dòng chữ: Chúc bạn vui vẻ! bạn thay bằng nội dung của bạn nhé
2. Cách thêm popup thông báo vào giữa trang Web, Blogspot
- Đối với Website thì code trên được dán vào nội dung của <body> ... </body>- Đối với Blogspot bạn có thể tạo 1 Widget HTML/Javascript để thực hiện. Vào bảng điều khiến Blogger -> Bố cục -> Thêm tiện ích -> HTML/Javascript. Và dán code trên vào tiện ích vừa thêm
Chúc các bạn vui vẻ !
0 comments:
Post a Comment