Hướng dẫn tạo popup quảng cáo giữa màn hình website, blog

Hình thức popup là hình thức quảng cáo banner mà khi người dùng truy cập vào một website nào đó sẽ tự động bật ra website mình muốn quảng cáo, lần trước Thế Giới Blog đã giới thiệu một số kiểu popup
, các bạn có thể tham khảo:


Hôm nay Thế Giới Blog chia sẻ một code popup nữa là  popup quảng cáo giữa màn hình website, blog, một loại popup được sử dụng khá phổ biến trong các site phim, website game.

Code: 
<style>
#popup{
    position:absolute;
    width: 100%;
}
#overlay{
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 400;
    background-color: rgba(0, 0, 0, .9);
    margin:0;
    padding:0
}
#lightbox{
    position:relative;
    width:500px;
    height:300px;
 
    display:block;
    text-align: center;
    top:0;
    margin:20px auto;
    z-index: 500;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function getCookie(c_name)
{
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
        x=x.replace(/^\s+|\s+$/g,"");
        if (x==c_name)
        {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, expires)
{
    var today = new Date();
    today.setTime( today.getTime() );
    if ( expires )
    {
        expires = expires * 1000 * 60 * 60 * 24;
    }
    var expires_date = new Date( today.getTime() + (expires) );
    document.cookie = c_name + "=" +escape( value ) +
    ( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" );
}
$(document).ready(function()
{
    var ever = getCookie("ever");
    if(ever)
    {
        $("#popup").css("display", "none");
        return false;
    }
    else
    {
        $("#popup").css("display", "block");      
        var $scrollingDiv = $("#lightbox");
        $(window).scroll(function () {
            setCookie("ever",1,1);
            if ($(window).scrollTop() > 100)
            {
                $scrollingDiv.stop().animate({
                        "marginTop": ($(window).scrollTop()+20)+"px"                    
                    }, "slow");
            }
            else
            {
                $scrollingDiv.stop().animate({
                        "marginTop": "20px"                    
                    }, "slow");
            }
        });
    }
});
function close()
{
    setCookie("ever",1,1);
    console.log('a');
    $("#popup").hide();
}

</script>
<div id="popup">
    <div id="overlay"></div>
    <div id="lightbox">
        <a href="javascript:close()">Close</a>
        <a href="http://www.share123.vn" target="_blank"><img alt="chơi game onine" src="http://st.web.gate.vn/Images/Editor/TK/AS/nh_minh_ha_bai_vit/ND1_434x274.jpg" height="202" title="chơi game onine" width="300" /></a>
    </div>  
</div>
<div style="height:2000px;display:block">
 
</div>
Chúc bạn thành công

Like This Post? Please share!

  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

9 comments :

  1. Đoạn code này chèn vào đâu vậy bạn?

    ReplyDelete
    Replies
    1. download template Wordpress, Blogspot, OPencart...
      tại đây => http://watchingbook.com

      Delete
  2. Bác chia sẻ thì cũng nên hướng dẫn tý xíu để anh em newbie còn biết mà mò. bác chia kiểu này các pro đã biết cách làm thì cũng chẳng cần cái code của bác chi nữa

    ReplyDelete
  3. Tìm thẻ body sau đó thêm đoạn code đó dưới thẻ body nhé!
    (Trường hợp báo lỗi thì thêm 1 dòng nữa là : "/body" nữa nhé

    ReplyDelete
  4. http://tinhocabdongnai.blogspot.com/

    ReplyDelete
  5. Thêm Facebook Popup Vào Bloggger Với Thời Gian Hẹn Và Số Lần Lập Lại
    http://vnminhtriet.blogspot.com/2015/03/them-facebook-popup-vao-bloggger-voi.html

    ReplyDelete
  6. cho e hỏi s e demo thì đc nhưng mà bỏ vào web của e thì nó hok chạy đc v a :((

    ReplyDelete
  7. download template Wordpress, Blogspot, OPencart...
    tại đây => http://watchingbook.com

    ReplyDelete

Scroll to top