Code popup quảng cáo giữa màn hình đẹp cho Blogspot

Code popup quảng cáo giữa màn hình đẹp cho Blogspot

 

Xin chào mọi người trong bài viết nào mình sẽ chia sẻ code popup hiện quảng cáo giữa trang cho blogspot. Code này mình đọc được từ Blog Vũ Văn Phong, mọi người copy đoạn code này, chỉnh sửa và đưa vào blog của mình nhé hi vọng với dạng popup quảng cáo giữa trang này không làm cho khách ghé thăm của bạn khó chịu.

Đầu tiên các bạn Đăng nhập => Bố cục => Thêm tiện ích => HTML/JavaScript. Đưa code bên dưới vào.

Code popup quảng cáo giữa màn hình đẹp cho Blogspot

<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/AVvXsEi2iKIfF7YuhE6Hs4344hcaMYmkiEUl5kEzMrX373gct-4YyYOy9NK3s-PMRjkKmq6GJYcMKYpovZEPhdxKSqWzHZuTUEv7wDaBxzfgP9qkoLZi-tqZkSn3jMJiEeWsfTcKEol-QfGDj8Yo/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.softwarecrack.ga" target="_blank">Softwarecrack Blog</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>

Phần tùy chỉnh code:

• Nội dung màu xanh là hiển thị của nội dung quảng cáo
• Link ảnh: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2iKIfF7YuhE6Hs4344hcaMYmkiEUl5kEzMrX373gct-4YyYOy9NK3s-PMRjkKmq6GJYcMKYpovZEPhdxKSqWzHZuTUEv7wDaBxzfgP9qkoLZi-tqZkSn3jMJiEeWsfTcKEol-QfGDj8Yo/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é.

Ok như vậy là bạn đã có popup quảng cáo giữa trang cho blog rồi còn chần chừ gì nữa...Chúc các bạn có một blog đẹp!

SHARE THIS