Tạo hiệu ứng load bài viết ngoài trang chủ giống facebook cho Blogspot

Ấn +1 Để xem phim nhanh hơn

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 !

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ừ Khóa Seo :Xem phim online Tạo hiệu ứng load bài viết ngoài trang chủ giống facebook cho Blogspot tap 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100,tap 1, tap 2, tap 3, tap 4, tap 5, tap 6, tap 7, tap 8, tap 9, tap10, tap 11, tap 12, tap 13, tap 14, tap 15, tap 16, tap 17, tap 18, tap 19, tap 20, tap 21, tap 22, tap 23, tap 24 , tap 25, tap 26, tap 27, tap 28, tap 29, tap 30, tap 31, tap 32, tap 33, tap 34, tap 35, tap 36, tap 37, tap 38, tap 39, tap 40, tap 41, tap 42, tap 43, tap 44, tap 45, tap 46, tap 47, tap 48 , tap 49, tap 50, tap 51, tap 52, tap 53, tap 54, tap 55, tap 56, tap 57, tap 58, tap 59, tap 60,Tap cuoi,phim cũ,phim truyền hình .