Share code popup hiện quảng cáo giữa trang [Hướng dẫn]

Khi mình chia sẻ Code Popup hiện quảng cáo hoặc thông báo ở giữa trang tại Blog cá nhân Vũ Văn Phong thì có khá nhiều bạn quan tâm tới loại Code Popup này. Gần đây khi sử dụng những code Popup làm khó chịu cho người xem khiến tỷ lệ thoát khỏi trang web nhiều đã không còn được ưa chuộng và sử dụng. Mặc dù vậy, người quản trị Web vẫn phải có những hình thức cho thuê quảng cáo hoặc tạo những thông báo khác nhau làm chú ý được ngay với người xem. Không phiền toái và không khó khăn, Popup hiện quảng cáo giữa trang dưới đây sẽ giúp bạn thực hiện được điều đó.

• Xem thêm Code popup tổng hợp

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/AVvXsEir6h8Zt5vhadRdBpwVmNJF2hp2eyIuAb_Q_HIqS-DXwQCKwP3XFMlsUe4REJBGQFExU-Znzt8PVgRr4RrlEgfB96P9p0Wwo51Q49_Uyq27bNZwQ3xpRpomUBXSnH4dchqau66KqeG6LVPb/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 đó:
- 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/AVvXsEir6h8Zt5vhadRdBpwVmNJF2hp2eyIuAb_Q_HIqS-DXwQCKwP3XFMlsUe4REJBGQFExU-Znzt8PVgRr4RrlEgfB96P9p0Wwo51Q49_Uyq27bNZwQ3xpRpomUBXSnH4dchqau66KqeG6LVPb/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ẻ ! Chuyên mục: javascript, Source code, Thu thuat blogspot, thu-thuat-blogger