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.
Đ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
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">×</a> </div>7- Lưu mẫu của bạn lại và kiểm tra thành quả nha.
Nhận xét
ANH ƠI KHUNG NHẬN XÉT CỦA EM MẤT RỒI GIỜ SỬA SAO ĐÂY ANH ,
Trả lờiXóaEM CŨNG ĐÃ CHỈNH SỬA Ở CHỖ GOOG+ NHƯNG VẪN KHÔNG ĐƯỢC
TRANG EM LÀ :
http://giasudaihocvinh.blogspot.com/
em mò ra ròi anh ạ ,hi
Trả lờiXóaUk 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đoạn code này không hoạt động đối với blog em anh Nam ơi?
Trả lờiXóaMẫ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ẢNH MÔ TẢ
Trả lờiXóaanh 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
Tất nhiên là được nhưng phải viết lại code phần đó em ak.
Xóahttp://allbumcoto.blogspot.com/
Trả lờiXóaNamkna 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
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óaOke 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óaNÊN CHỈNH THANH TIÊU ĐỀ ROBOT NHƯ THẾ NÀO ĐƯỢC ANH NAM - CHO DEO NÓ LÊN
Trả lờiXóaEm có thể xem một số hướng dẫn sau" Cài đặt "Thẻ tiêu đề robot tùy chỉnh" (Custom Robots Tags) cho blogger
XóaTối ưu thẻ Title trong Blogspot cho Search Engine
Làm sao để thêm link vào popup kia hả b Nam ơi?
Trả lờiXóaCâ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óaCái này công nhận hay
Trả lờiXóaNó tạo ra sự mới mẻ tương đối cho các blog :)
XóaChà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óaHiệ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óaCả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óaUi trời :((
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóadep nhi
Trả lờiXóa