Thư viện

Trải nghiệm

Thứ Bảy, tháng 11 15, 2014

[Tips] - Hiệu ứng tải trang mờ có ảnh cho Blogspot Blogger V2

Tạo Hiệu ứng tải trang mờ có ảnh cho Blogspot, hiệu ứng tải trang mờ ảo cho blogger nhanh. Thủ thuật blog tạo hiệu ứng chờ trang cho blogspot cùng Terocket!

Chia sẻ:
[Tips] - Hiệu ứng tải trang mờ có ảnh cho Blogspot Blogger V2
Hiệu ứng tải trang mờ có ảnh cho Blogspot Blogger V2 là hiệu ứng cực kỳ chuyên nghiệp cho Blogger hiện nay

Trước đây Terocket có hướng dẫn mọi người làm [Tips] - Thiết kế trang loading chờ tải trang cho Blogger P.1 rồi. Đây là hiệu ứng khá đẹp nhưng nó không chuyên nghiệp và đơn giản giống mẫu mà Terocket sắp giới thiệu sau đây. Và mẫu này có tên là Hiệu ứng tải trang mờ có ảnh cho Blogspot Blogger V2 Phiên bản 2.

Live Demo

Mẫu này khi bạn chuyển trang sẽ trông mờ mờ ảo ảo rất là huyền bí, nhưng không làm giảm tốc độ tải trang, tạo cảm giác cực kỳ chuyên nghiệp và kích thích người đọc. Màu chủ đạo của thủ thuật Hiệu ứng tải trang mờ có ảnh cho Blogspot Blogger V2 là màu bạc đen nhé. Và giờ hãy cũng Terocket thực hiện thủ thuật blog tạo hiệu ứng tải trang này nào.

Bạn chỉ cần thêm đoạn mã sau vào HTML trước </body> là xong

Đầu tiên bạn vào Blog Title → Template → Edit HTML. Nhấn tổ hợp Ctrl + F và tìm kiếm cho </body> và copy đoạn mã sau vào trước nó. Và Lưu lại. Thế là xong!

<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Vậy là xong thủ thuật blogspot [Tips] - Hiệu ứng tải trang mờ có ảnh cho Blogspot Blogger V2 rồi nhé. Rất đơn giản đúng không nào? Đây là thủ thuật rất hay mà Terocket sưu tầm được và hy vọng rằng các bạn sẽ hài lòng.

Nếu bạn nào chưa làm được, hãy gửi một bình luận ở dưới đây nhé, Terocket sẽ giải đáp mọi thắc mắc của các bạn. Còn bạn nào đã làm được rồi, hãy khoe thành quả của mình ở đây lun nha.
Trứng Vịt - Terocket

5 nhận xét:

  1. Blog mình đang xài cái này nè! Nhìn rất là oai :-> Nhưng nhiều khi mạng lag thì đến là mệt (-, * )

    Trả lờiXóa
  2. A Thành ơi blog có làm dc kiểu như zing tạo nút share FB cho từng ảnh trong post dc ko ak? http://news.zing.vn/Doi-no-thay-giao-cu-post475750.html

    Trả lờiXóa
    Trả lời
    1. Được chứ, để mình làm cái thủ thuật đấy giới thiệu đến anh em nào!

      Xóa
  3. Hay quá hi vọng a sớm có bài hướng dẫn :)))

    Trả lờiXóa
  4. sao em áp dụng mà ko được anh :
    trang em là : duy3s.com

    Trả lờiXóa