Popup Đồng hồ đếm ngược chào đón năm mới cho blogger

Tết âm lịch với người việt nam nói riêng và người châu á nói chung là một ngày tết vô cùng ý nghĩa. Nhà nhà đều sắm sửa đón tết, còn những blogger chúng ta cũng dộn dịp trang trí blog bằng những hiệu ứng đẹp như: Thay đổi hình nền ngày tết, trang trí hoa đào tết,... Để góp phần đưa không khí tết đến với mọi nhà Bài viết này namkna sẽ hướng dẫn các bạn cách tạo một cửa sổ Popup đồng hồ đếm ngược khi độc giả truy cập vào trang của bạn đọc nội dung.

☼ Thêm Next & Previous kèm tiêu đề bài viết từ Jquery cho blogger

Lưu ý: Hướng dẫn này sẽ can thiệp lớn vào phần mẫu của bạn do vậy hãy tải mẫu của bạn về lưu lại dự phòng trước khi tiến hành theo bất cứ bước nào namkna hướng dẫn sau đây.

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- Thêm đoạn code bên dưới vào trước thẻ </head>.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
            <script type="text/javascript" src="http://tools.mybloggertricks.com/mbt-popup.js"></script>
            <script type='text/javascript'>
                //<![CDATA[
           
                //Setting Time
                TargetDate = "2/1/2014 12:00 AM";
                CountActive = true;
                CountStepper = -1;
                LeadingZero = true;
                DisplayFormat = "%%D%% days: %%H%% hrs: %%M%% mins: %%S%% secs";
                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=Oswald' rel='stylesheet' type='text/css'/>

Tùy chỉnh:

• Nếublog bạn đã có file Jquery rồi thì xóa phần màu xanh đi nha.
• Nếu không muốn có hiệu ứng tuyết rơi thì hãy xóa đoạn màu vàng đi nha.

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: 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-left: -300px;
        width: 550px;
        height: 305px;
        background: rgba(51, 51, 51, 0) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA_xsBcVgEjTLbglZJmQNZmxnz7h1PxcAjwHjbxbNaJSe4pUdsMvjZkigugDv3-A8odJdBVH8QTvXtHdv9pSAM39ZG-0JNOoCdFm19Y_f3if-v1uh4ybmka7A9vd0Dxs5sF_azZhNjERhl/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;
        } 

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

<div id="myModal" class="reveal-modal" >
  <h2>Count Down Begins!</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 mẫu của bạn lại và kiểm tra thành quả nha.