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.

Popup Dồng hồ dếm ngược chào năm mới

Điểm đặc biệt của tiện ích này là nó tích hợp chức năng kiểm soát cookie của trình duyệt để kiểm soát cách thức popup hiển thị. Bạn có thể cài đặt để nó xuất hiện một lần duy nhất (và chỉ xuất hiện khi người dùng thoát hẳn khỏi trình duyệt đó và đăng nhập lại. Bạn có thể thêm nó cho blogger hay bất cứ một nền tảng web nào khác.

Các bạn có thể xem hình ảnh minh họa bên trên hoặc xem blog demo bên dưới nha.

» VIEW DEMO

☼ 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.
  • 2/1/2014 12:00 AM là ngày đích bạn cần đếm ngược, với các thông số lần lượt là Tháng/ngày/năm Giờ kiểu giờ. Trong đó giờ là 12 tiếng gồm từ 0h00 đến 12h00, Kiểu giờ gồm buổi sáng AM và buổi tối PM. Ngày và giờ ở đây phải sau ngày bạn muốn đếm ngược nha.
  • Bạn có thể thay đổi lại định dạng ngày tháng đếm ngược bằng cách thay đổi đoạn  
    • %%D%% days: %%H%% hrs: %%M%% mins: %%S%% secs
    Không được thay đổi các biến bắt đầu và kết thúc bằng %%. Tức là bạn chỉ có thể thay đổi những phần màu xanh ví dụ: 
    %%D%% Ngày: %%H%% giờ: %%M%% phút: %%S%% giây
  • It is finally here! là dòng chữ sẽ xuất hiện khi thời gian đếm ngược kết thúc bạn có thể chỉnh sửa lại nó theo ý muốn của bạn nha.
  • Bạn có thể kiểm soát kích thước, tốc độ, số lượng (flakeCount) và hình dạng của bông tuyết bằng cách chỉnh sửa đoạn code: deviceorientation : true, round : true, minSize: 1, maxSize:8,  flakeCount : 250. Nếu để giá trị deviceorientation  là false bông tuyết sẽ có hình vuông;
  • Nếu bạn muốn popup này chỉ xuất hiện một lần duy nhất với một khách truy cập nhất định thì bạn hãy thay thế sessionStorage thành localStorage. Khi đó popup chỉ xuất hiện  lại khi người dùng đóng trình duyệt đang xem (Kết thúc phiên duyệt web của họ) và truy cập lại trang của bạn. Hoặc truy cập bằng một trang khác thì mới hiển thị.
  • Bạn có thể chọn một phong cách hiển thị popup khác nhau trong 3 kiểu mà mình đưa ra đó là fadeAndPop hay mờ ảo fade hoặc không có hiệu ứng none.
  • Để viết được tiếng việt ở những phần có thể chỉnh sửa bạn vui lòng xóa phần màu xanh, hoặc thay thế nó thành link font tiếng việt 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/AVvXsEgIzmd49bQOSDK1XFg2esrkcimnWBhfy5CgAy20zzNSyVEsshHmGkL_UR2y-cTsThGtVDDJ0R6UcAp4O-z18rVtcOqOkpqadNLlNsduw7fHfZtP3vMYyG3p1T8plMo4-GNlcdKeyAnD6l6l/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>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 mẫu của bạn lại và kiểm tra thành quả nha.