Thư viện

Trải nghiệm

Thứ Sáu, tháng 1 03, 2014

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

Tạo đồng hồ đếm ngược cho blog và website để chào mừng các ngày lễ lớn, Hiệu ứng popup đẹp chỉ hiện một lần dựa trên cookie.

Chia sẻ:
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(http://1.bp.blogspot.com/-DrMdgQi7Uq4/UsMDvui64fI/AAAAAAAAM3k/QLhbbmjPwnM/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.

23 nhận xét:

  1. ANH ƠI KHUNG NHẬN XÉT CỦA EM MẤT RỒI GIỜ SỬA SAO ĐÂY ANH ,
    EM CŨNG ĐÃ CHỈNH SỬA Ở CHỖ GOOG+ NHƯNG VẪN KHÔNG ĐƯỢC
    TRANG EM LÀ :
    http://giasudaihocvinh.blogspot.com/

    Trả lờiXóa
  2. Trả lời
    1. Uk chịu khó mày mò chút, nếu lần sau gặp lỗi đó mình sẽ dễ dàng khắc phục nó hơn. Chúc mừng e,

      Xóa
  3. đoạn code này không hoạt động đối với blog em anh Nam ơi?

    Trả lờiXóa
    Trả lời
    1. Mẫu đó của em bị xung đột Jquery và Css với đoạn này rồi em ak. Nguyên nhân chính có thể nằm trong đoạn mã được mã hóa. bản thân mẫu đó hiện nay sử dụng quá nhiêu javas nên rất hay bị treo với những máy có tốc đọ mạng chậm em nên cân nhắc khi thêm các tiện ích có sử dụng scrip nặng nha e,

      Xóa
  4. ẢNH MÔ TẢ

    anh xem ảnh mô ta trên - xem vùng em khoang màu đỏ - em muốn các hình ảnh bài đăng mới nhất đó nó truot tu ảnh này rồi đến ảnh khác ứng với các bài (slide) thì có được không anh -
    trang em :http://giasudaihocvinh.blogspot.com/

    anh xem giuos em với

    Trả lờiXóa
    Trả lời
    1. Tất nhiên là được nhưng phải viết lại code phần đó em ak.

      Xóa
  5. http://allbumcoto.blogspot.com/

    Namkna mến nhờ bạn 1 chút mình vào temp chỉnh sửa bị lỗi như thế này giờ mình khắc phục thế nào chỉ giú mình nhé mình mày mò mãi mà ko đc thanks bạn nhiều nhé Email :haithienlonghp@gmail.com.mong chờ hồi âm

    Trả lờiXóa
  6. Mong nhận Hồi âm Bạn Namkna ơi...mình gửi qua mail của bạn rùi ...xem giúp mình nhé

    Trả lờiXóa
    Trả lời
    1. Oke lát mình sẽ kiểm tra lại mail :) Mấy hôm bận quá giờ mới online được một lát ...

      Xóa
  7. NÊN CHỈNH THANH TIÊU ĐỀ ROBOT NHƯ THẾ NÀO ĐƯỢC ANH NAM - CHO DEO NÓ LÊN

    Trả lờiXóa
  8. Làm sao để thêm link vào popup kia hả b Nam ơi?

    Trả lờiXóa
    Trả lời
    1. Câu hỏi của bạn chưa thực sự rõ ràng. Ý bạn là thêm khi bấm vào khung hay như thế nào. Có rất nhiều cách bạn có thể chọn ở đây: CÁC LOẠI POPUP CHO BLOG

      Xóa
  9. Trả lời
    1. Nó tạo ra sự mới mẻ tương đối cho các blog :)

      Xóa
  10. Chào Nam Ta! Bạn có thể viết một bài viết hướng dẫn chi tiết cách sử dụng Jquery Cookies được không bạn? Cảm ơn bạn nhiều!

    Trả lờiXóa
    Trả lời
    1. Hiện nay trên các diễn đàn có rất nhiều bài viết chi tiết và cụ thể về vấn đề này bạn có thể tìm hiểu ở đó. Mình không viết lại vì có nhiều trùng lặp nội dung bạn ak.

      Xóa
  11. Cảm ơn namkna mình chờ lâu quá lên thay teampl rùi ...chúc trang của bạn ngày 1 nhiều bài hay để anh em copy nhé

    Trả lờiXóa
  12. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa