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

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.
BẠN XEM BẢN CHI TIẾT HƠN CỦA THỦ THUẬT NÀY TẠI LINK GỐC: Code popup giữa trang thì bạn sẽ thấy được nhiều tùy chỉnh hơn

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/AVvXsEgFlAnWWaOTcC38S-0XA25Q78YysjKglR3ikTVtHepjvcfsQKQNu3nwvAYhffAb5eidoK3TsSEvIMVXJ06UtVAXNy73qkDLW2T1CzxSg9X54eP0A12Rmg0MicluaH0BcpIzzsPxekLIQbMT/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">&#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.

• 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.

• 3. Nếu bạn gặp rắc rối trong tạo POPup

Bạn có thể để lại Comment rắc rối của bạn, mình sẽ hỗ trợ tốt nhất giúp bạn tạo POPup hiển thị giữa trang của bạn thành công.
Chúc các bạn vui vẻ !