Tạo code Popup quảng cáo hiện giữa trang Website, Blog

Vietchiase.com | Góc chia sẻ dành cho người Việt | 18/7/14

Với tiêu chí mỗi ngày share 1 thủ thuật hoặc 1 bài viết hữu ích cho bạn đọc. Blog Vũ Văn Phong dần hướng tới toàn diện về Thủ thuật Blogspot, thủ thuật dành cho Website và những tiện ích internet cần sử dụng. Và bài viết này mình sẽ share với các bạn 1 Code Popup quảng cáo hiện giữa trang Website, Blogspot. Với code dưới đây sẽ là tối ưu nhất về tốc độ load, yêu thích của người xem trang và nhấn được sự chú ý nhất khi người đọc vào site của bạn. Tùy chỉnh Popup chỉ xuất hiện 1 lần :) điều này thật cần thiết.

Thủ thuật liên quan: Tạo khung like Page Facebook vào Blogspot

Demo trực tiếp DEMO TẠI ĐÂY

Hướng dẫn tạo Popup quảng cáo hiện giữa trang Website, Blog

1. Tạo Popup trên trang Blogspot

- Đối với Blogspot, 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">
/* 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/AVvXsEjCHjCfoFXn2VVvgJBYwMMZUmKPiaH3kP-QknrvlV5aNSfSyfHFfwmkyzxJgIuXFU6BBnUgnP8tiNf_nLOTSTTwWpSUQ0d3iZjJaGtNkMJ3IgpVF0gTeIpqciyeqaq1mPNQjC8oO4MCWZuC/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


});

//]]>
</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 đó:
- 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.

2. Tạo Popup trên trang Website

- Đối với mã nguồn Website tự code, Wordpress, Joomla, Drupal, ASP.Net... thì các bạn hoàn toàn có thể dán code trên vào vị trí <body> của Website để hoạt động.