Tạo Popup đồng hồ đếm ngược cho Blog/Web

Lê An    2/26/2015    Thủ thuật blog    Comments   

Demo Tiện ích này tạo ra cửa sổ Popup đồng hồ đếm ngược cho Blog/Web nhằm thông báo đến người xem một sự kiện nào đó sắp diễn ra VD: Nhưng mừng Noel, Năm mới hay các ngày lễ trong năm.

Sau đây là cách thực hiện:

Lưu ý: Do tiện ích này can thiệp Code trong Mẫu để an toàn cho Blog bạn hãy sao lưu mẫu trước khi tiến hành theo các bước nhé.

1- Đăng nhập vào Blog
2- Vào thẻ Mẫu (Template)
3- Bấm vào nút Chỉnh sửa HTML (Edit HTML)
4- Tìm và thêm đoạn code bên dưới vào trước thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type="text/javascript" src="http://tools.mybloggertricks.com/mbt-popup.js"></script>
            <script type='text/javascript'>
                //<![CDATA[
                //Setting Time
                TargetDate = "1/1/2016 12:00 AM";
                CountActive = true;
                CountStepper = -1;
                LeadingZero = true;
                DisplayFormat = "%%D%% Ngày: %%H%% Giờ: %%M%% Phút: %%S%% Giây";
                FinishMessage = "It is finally here!";
                //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=Arial' rel='stylesheet' type='text/css'/>           
            

Tùy chỉnh:

• Hàng 6: Bạn chỉnh sửa các giá trị "1/1/2016 12:00 AM"
• Hàng 11: "It is finally here!" Khi hết thời gian sẽ hiện bản thông báo bạn có thể tùy chỉnh. 
• Hàng 1: Nếu Blog/Web bạn có file Jquery thì xóa bỏ
• Hàng 44: Nếu Blog/Web bạn có CSS Font thì xóa bỏ

5- Thêm đoạn css bên dưới vào trước thẻ đóng ]]></b:skin>

#mbt-counter {

        padding: 10px;

        font-family: oswald, verdana;

        background-color: rgba(0, 0, 0, 0)!important;

        color: #FFF!important;

        position: absolute;

        left: 49%;

        top: 10%;

        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-left: -300px;

        width: 550px;

        height: 305px;

        background: rgba(51, 51, 51, 0) url(http://i.vimeocdn.com/video/497620299_640.jpg) 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;

        }

Tùy chỉnh

• Bạn có thể thay thế Link ảnh: http://i.vimeocdn.com/video/497620299_640.jpg để phù hợp hơn với từng sự kiện.

6- Thêm đoạn mã bên dưới vào trước  thẻ mở <body>

<div id="myModal" class="reveal-modal" >

  <h2>Thời gian còn lại!</h2>

    <script type='text/javascript' src="http://tools.mybloggertricks.com/mbt-counter.js"></script>

   <a class="close-reveal-modal">&#215;</a>

</div>

7- Lưu lại mẫu và bạn kiểm tra. Chúc các bạn thành công

Nguồn: mybloggertricks.com