TẠO HIỆU ỨNG LOAD BÀI VIẾT NGOÀI TRANG CHỦ GIỐNG FACEBOOK CHO BLOGSPOT

Một hiệu ứng mới, một thủ thuật mới đánh lừa thị giác độc giả cũng như góp phần làm blog có cảm giác load mượt hơn... Hôm nay Khanh sẽ giúp các bạn làm điều đấy !

Những bạn hay tương tác cũng như thường qua blog Khanh cũng đã biết blog mình vừa thêm một hiệu ứng load giống Facebook. Ngay sau đó đã có nhiều bạn xin code và mình hứa sẽ viết bài cho mọi người. Tuy nhiên CSS load của blog mình giống Facebook thôi nên nó không phù hợp với một số Blog hiện tại. Vậy nên mình đã khảo sát qua một vòng và đưa ra CSS mới tích hợp cho đa phần giao diện các blog cá nhân hiện tại. Demo các bạn có thể xem ở ảnh phía dưới !


Tạo hiệu ứng load trang giống facebook cho Blogspot

Các bước thực hiện
Bước 1: Đăng nhập Blogger > Chủ đề > Chỉnh sửa HTML > Chèn đoạn CSS này vào dưới thẻ <style>:
.abls_tkn, .abls_2_tkn, .abls_3_tkn , .abls_4_tkn , .abls_5_tkn , .abls_6_tkn {
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: loadingAnimation;
-webkit-animation-timing-function: linear;
background: #f6f7f8;
background-image: -webkit-linear-gradient(left,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);
background-image: linear-gradient(left,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);
background-repeat: no-repeat;
background-size: 200% auto;
}
.abls_tkn{
height: 135px;
width: 250px;
position: relative;
overflow: hidden;
float: left;
margin-right: 10px;
}
.abls_2_tkn{
height: 19px;
width: 332px;
display: inline-block;
position: relative;
overflow: hidden;
margin-top: 8px;
}
.abls_3_tkn{
height: 13px;
width: 430px;
position: relative;
overflow: hidden;
margin-top: 5px;
}
.abls_4_tkn{
height: 10px;
width: 420px;
position: relative;
overflow: hidden;
margin-top: 20px;
}
.abls_5_tkn{
height: 10px;
width: 450px;
position: relative;
overflow: hidden;
margin-top: 14px;
}
.abls_6_tkn{
height: 10px;
width: 180px;
position: relative;
overflow: hidden;
margin-top: 14px;
}
.loadabcs_tkn { margin-bottom: 15px;
height: 136px;
background: #fff;
padding: 5px;
}

Bước 2: Chèn JS này vào trên thẻ đóng </head>:
<script>
// JS load blog by Khanh Blogger.com
var copyrighttkn = "Ban quyen thuoc KhanhBlogger.com";
var _0x4216=["\x42\x61\x6E\x20\x71\x75\x79\x65\x6E\x20\x74\x68\x75\x6F\x63\x20\x4B\x68\x61\x6E\x68\x42\x6C\x6F\x67\x67\x65\x72\x2E\x63\x6F\x6D","\x64\x69\x73\x70\x6C\x61\x79","\x73\x74\x79\x6C\x65","\x6C\x6F\x61\x64\x74\x6B\x6E\x69\x64","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x62\x6C\x6F\x63\x6B","\x6E\x6F\x6E\x65","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x6B\x68\x61\x6E\x68\x62\x6C\x6F\x67\x67\x65\x72\x2E\x63\x6F\x6D"];if(copyrighttkn== _0x4216[0]){document[_0x4216[4]](_0x4216[3])[_0x4216[2]][_0x4216[1]]= _0x4216[5];setTimeout(function(){document[_0x4216[4]](_0x4216[3])[_0x4216[2]][_0x4216[1]]= _0x4216[6]},1000)};if(copyrighttkn!= _0x4216[0]){window[_0x4216[7]]= _0x4216[8]}
</script>

Bước 3: Tìm đoạn <b:section class='main' id='main' showaddelement='no'> hoặc <b:section class='main' id='main' showaddelement='yes'> và chèn đoạn code phía dưới ngay phía trên đoạn code vừa tìm:
<b:if cond='data:blog.pageType == &quot;index&quot;'><div id='loadtknid'><div class='loadabcs_tkn'><div class='abls_tkn'></div><div class='abls_2_tkn'></div><div class='abls_3_tkn'></div><div class='abls_4_tkn'></div><div class='abls_5_tkn'></div><div class='abls_6_tkn'></div></div><div class='loadabcs_tkn'><div class='abls_tkn'></div><div class='abls_2_tkn'></div><div class='abls_3_tkn'></div><div class='abls_4_tkn'></div><div class='abls_5_tkn'></div><div class='abls_6_tkn'></div></div><div class='loadabcs_tkn'><div class='abls_tkn'></div><div class='abls_2_tkn'></div><div class='abls_3_tkn'></div><div class='abls_4_tkn'></div><div class='abls_5_tkn'></div><div class='abls_6_tkn'></div></div><div class='loadabcs_tkn'><div class='abls_tkn'></div><div class='abls_2_tkn'></div><div class='abls_3_tkn'></div><div class='abls_4_tkn'></div><div class='abls_5_tkn'></div><div class='abls_6_tkn'></div></div><div class='loadabcs_tkn'><div class='abls_tkn'></div><div class='abls_2_tkn'></div><div class='abls_3_tkn'></div><div class='abls_4_tkn'></div><div class='abls_5_tkn'></div><div class='abls_6_tkn'></div></div><div class='loadabcs_tkn'><div class='abls_tkn'></div><div class='abls_2_tkn'></div><div class='abls_3_tkn'></div><div class='abls_4_tkn'></div><div class='abls_5_tkn'></div><div class='abls_6_tkn'></div></div><div class='loadabcs_tkn'><div class='abls_tkn'></div><div class='abls_2_tkn'></div><div class='abls_3_tkn'></div><div class='abls_4_tkn'></div><div class='abls_5_tkn'></div><div class='abls_6_tkn'></div></div><div class='loadabcs_tkn'><div class='abls_tkn'></div><div class='abls_2_tkn'></div><div class='abls_3_tkn'></div><div class='abls_4_tkn'></div><div class='abls_5_tkn'></div><div class='abls_6_tkn'></div></div><div class='loadabcs_tkn'><div class='abls_tkn'></div><div class='abls_2_tkn'></div><div class='abls_3_tkn'></div><div class='abls_4_tkn'></div><div class='abls_5_tkn'></div><div class='abls_6_tkn'></div></div><div class='loadabcs_tkn'><div class='abls_tkn'></div><div class='abls_2_tkn'></div><div class='abls_3_tkn'></div><div class='abls_4_tkn'></div><div class='abls_5_tkn'></div><div class='abls_6_tkn'></div></div><div class='loadabcs_tkn'><div class='abls_tkn'></div><div class='abls_2_tkn'></div><div class='abls_3_tkn'></div><div class='abls_4_tkn'></div><div class='abls_5_tkn'></div><div class='abls_6_tkn'></div></div></div></b:if>

Vậy là mình đã hướng dẫn xong cho các bạn ! Hi vọng bài viết này sẽ giúp cho blog các bạn thêm phần chuyên nghiệp cũng như tạo cảm giác mượt mà hơn !
Nếu không thành công hay gặp vấn đề gì, đừng ngần ngại bình luận phía dưới nhé.
Chúc các bạn thành công !
Tác giả: Lê ANh Đức

Tôi là Đức, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Admin của trang web này đã qua đời ! Hãy để lại một comment để thể hiện lòng biết ơn, tiếc thương đối với người đã mất. Chúng tôi hy vọng những người yêu quý Lê Anh Đức sẽ cảm thấy được an ủi khi truy cập trang web này, cùng nhớ lại và tôn vinh cuộc đời của anh ấy. Cảm ơn rất nhiều !!!
    ^_^
    =r
    :))
    ;)
    =))
    :((
    <3
    ==
    :v
    :)
    :(
    :*
    :D
    (yy)
    (y)
    =hi
    :P
    =s
    =ok
    =clap
    =he
    =hl
    =hr
    :-)
    =hup
    =hd
    =l
    =ht
    =aa
    =no
    =hum
    =haizz
    =ask

    61 nhận xét:

    1. tuyệt. cơ mà sao bước 3 cho hỏi ngu xí là code mình thấy nhiều đoạn lặp lại quá nhỉ

      Trả lờiXóa
      Trả lời
      1. như demo thì nó tạo ra nhiều mảng load nhìn như các bài viết đang load đó bạn

        Xóa
    2. à hóa ra để em làm cái này á hả :v

      Trả lờiXóa
      Trả lời
      1. e định làm mak ko hiểu sao lỗi bm ở 1 vài temp test nên thôi làm thủ công :v

        Xóa
    3. Nhiều khi vô blog này cứ ngỡ như đang vô Facebook, và còn quen tay hay bấm vào Thông báo xem nữa chứ :v

      Trả lờiXóa
      Trả lời
      1. bấm thông báo để xem thông báo mới từ KhanhBlogger.com là đúng r :v

        Xóa
    4. ~~ Nhân Dzai đã để lại dấu răng trên bài viết

      Trả lờiXóa
    5. Cái hiện sinh nhật kia hay nhỉ? mà nó lấy theo bạn bè trên fb của e à?

      Trả lờiXóa
      Trả lời
      1. có form đăng ký trên blog e đó a. https://www.khanhblogger.com/p/add-happy-birthday.html

        Xóa
    6. hồng hải đã đi qua bài viết và để lại 1 dấu (.)(.)

      Trả lờiXóa
    7. kg có <b:section class='main' id='main' showaddelement='no'> thì làm sao

      Trả lờiXóa
      Trả lời
      1. <b:section class='main' id='main' showaddelement='yes'> xem có không

        Xóa
    8. mọi người xem nhé ! bộ mặt thật đây nha ! người mà mọi người tôn thờ nè
      https://i.imgur.com/OmCPEOm.png

      Trả lờiXóa
    9. Trả lời
      1. ủa sao cmt blog nào cũng câu này hết v :3 rải rác tâm trạng à :v

        Xóa
    10. https://i.imgur.com/wRN2HjZ.png
      mình không binh vực hay nói ai cả. chỉ là thấy hơi vô lý thôi,
      bạn vào đây để xem comments mình nhé

      Trả lờiXóa
      Trả lời
      1. ủa sao mình dùng thẻ <a href='' mà nó chuyển sang trang chặn link là sao nhỉ.
        thôi bạn vào bacsiwindows.com tìm bài porn hub là có comments mình

        Xóa
      2. Vì bên Khanh Blogger mới edit thêm để can thiệp link bsw vừa cho nó giống thêm fb đó bạn

        Xóa
      3. liên kết đã bị chặn. bạn có thể kham khảo tại đây. để biết lý do và gửi đơn kiện tại đây

        Xóa

    Một số lưu ý khi bình luận

    Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

    Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

    Để bình luận một đoạn code, hãy mã hóa code trước nhé !