Popup Đồng hồ đếm ngược chào đón năm mới cho blogger - Thanh'sBlog - Blog công nghệ, chia sẻ niềm đam mê!

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

16/07/2013 Đăng bởi: Admin , Nhận xét(0) , Đọc(1374) Lớn | Vừa | Nhỏ

  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


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.j...t;/script>            <script type="text/javascript" src="http://tools..../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....y=Oswald' rel='stylesheet' type='text/css'/>
  Tùy chỉnh:
%%D%% days: %%H%% hrs: %%M%% mins: %%S%% secs
%%D%% Ngày: %%H%% giờ: %%M%% phút: %%S%% giây
      
  •     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
  •   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ụ:  
  •     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ị deviceorientationfalsebô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.b...-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....bt-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.


Nhấn Like và +1 nếu thấy bài viết có ý nghĩa!

  • Đăng lên ZingMe
  • Đăng Lên Facebook
  • Đăng Lên Twitter
  • LinkedIn
  • Đăng lên ZingMe
  • Đăng Lên Google Buzz
  • Đăng Lên FriendFeed
  • Đăng Lên Reddit
  • Đăng Lên MySpace
  • Đăng Lên Yahoo! Bookmarks
  • Đăng Lên Digg
  • Đăng Lên Yahoo Buzz
  • Đăng Lên Baidu
Đăng bình luận lên Facebook của bạn:
Khuyến cáo: Không hổ trợ comment bằng facebook nhé!


Sửa lần cuối bởi Admin Sửa vào 16/07/2014 10:54
Viết nhận xét

Tên gọi

Facebook của bạn

Email

You can also login with your OpenID:
HTML code BBcode Mặt cười Ẩn giấu Hãy nhớ [Đăng nhập] [Đăng ký. ]
               
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot

Bạn muốn hình đại diện hiển thị ngay bên cạnh lời bình luận của bạn không?
Hãy tham gia vào Gravatar và thiết lập hình đại diện hoàn toàn miễn phí!
Gravatar là gì? Avatar hình đại diện toàn cầu, bạn đã có avatar chưa? click đăng ký ngay!
TÌNH HÌNH WEBSITE

Thống kê Online trên website.

Hiện có 107 người đang online
(0 thành viên và 107 khách)

Tổng quan tình hình trên ThanhBlog.InFo

Thống kê đến thời điểm hiện tại số lượt khách ghé thăm blog là: 4511763
Số người đã ghé thăm blog trong ngày là: 2816
Số bài viết: 6859 Số comment hiện tại là: 2843 Số trích dẫn 1
Số thành viên đã đăng ký là: 24511
Nào cùng nâng ly chào mừng bạn binak đến với ThanhBlog. Chúc các bạn có những giây phút bổ ích và hạnh phúc !