Hello, lại là mình đây. Như tiêu đề hôm nay mình sẽ hướng dẫn cho các bạn cách tạo cho blog mình một hiệu ứng chuyển động khá hay và bắt mắt. Tuy nhiên khi đưa hiệu ứng này vào thì Blog của bạn sẽ bị load chậm hơn một chút, nhưng không đáng kể đâu :3. Nào chúng ta cùng bắt đầu xem cách làm nhé !
Demo

tạo chuyển động cho main :

Bước 1: Các bạn truy cập vào Blogger.com, sau đó vào Chủ đề => Chỉnh sửa HTML.
Bước 2: Đặt đoạn CSS này vào trước thẻ ]]></b:skin>
.header-category-box,.post-outer,.breadcrumbs{animation:fadeIn 2s;-webkit-animation:fadeIn 2s;-moz-animation:fadeIn 2s}
@keyframes fadeIn{from{opacity:0;transform:translate(600px,0)}to{opacity:1}}
@-webkit-keyframes fadeIn{from{opacity:0;transform:translate(600px,0)}to{opacity:1}}
@-moz-keyframes fadeIn{from{opacity:0;transform:translate(600px,0)}to{opacity:1}}
@-o-keyframes fadeIn{from{opacity:0;transform:translate(600px,0)}to{opacity:1}}
@media screen and (min-width:1500px){#header-page{display:none!important};
Bước 3: Lưu lại và xem thành quả đạt được.

 tạo chuyển động cho sidebar :


Bước 1: Các bạn truy cập vào Blogger.com, sau đó vào Chủ đề => Chỉnh sửa HTML.
Bước 2: Đặt đoạn CSS này vào ngay sau .sidebar{
-webkit-animation: slideUpsos 2s; 
 -moz-animation: slideUpsos 2s;
 -ms-animation: slideUpsos 2s;
 -o-animation: slideUpsos 2s;
 animation: slideUpsos 2s;}
@-webkit-keyframes slideUpsos {
 from {-webkit-transform: translate(0, 1000px)}
 to { -webkit-transform: translate(0px, 0px)};
Bước 3: Lưu lại và xem thành quả đạt được.

LỜI KẾT :

Chúc các bạn thành công và đừng quên truy cập vào Blog mỗi ngày để nhận những bài viết mới hay và bổ ích nhé ! 
- 42 bình luận
CHUYÊN MỤC

TẤT CẢ BÌNH LUẬN (42)

  1. trường hợp ko có .sidebar{ làm sao??

    ReplyDelete
    Replies
    1. Đúng rồi :v nhưng ít khi mà theme có sidebar mà lại k có thẻ .sidebar lắm :v

      Delete
  2. Replies
    1. Để gây ấn tượng cho người đọc mà ông :v

      Delete
  3. Replies
    1. Thật ra là k cần demo lắm, nhưng thôi :v đã cập nhật

      Delete
  4. A ko hiểu nó có hiệu ứng ntn đây nữa :s

    ReplyDelete
  5. theme ngầu vờ lờ và đỏ nữa

    ReplyDelete
  6. thay lại link liên kết giúp tui với nha Quân: https://duchuyblogger.blogspot.com/

    ReplyDelete
  7. vjp vịt quay hầm củ tỏi :V

    ReplyDelete

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).

Không nói lời thiếu văn hóa, không quảng cáo thông qua khung bình luận.

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é!