Có nhiều cách để trang trí cho blog của mình, và đây cũng là 1 trong những cách trang trí cho blog đẹp nhất và đơn giản nhất. Sử dụng hoàn toàn CSS nên rất dễ thực hiện và không ảnh hưởng đến tốc độ load trang. Bạn có thể ngó qua loạt bài viết về chuyên mục Animation Framework trong blog của mình để có nhiều cái trang trí hơn cho blog nhé.

Xem Demo ngay tại trang này, F5 để thấy hiệu ứng.

Cách thực hiện

Thêm toàn bộ CSS bên dưới vào Template là xong!

/* CSS cho trình duyệt Chrome or Cốc Cốc */
@-webkit-keyframes bsw-slideUp {
from {
-webkit-transform: translate(0px, 1000px)
}
to {
-webkit-transform: translate(0px, 0px)
}
}
/* CSS cho trình duyệt Firefox*/
@-moz-keyframes bsw-slideUp {
from {
-moz-transform: translate(0px, 1000px)
}
to {
-moz-transform: translate(0px, 0px)
}
}
/* CSS cho trình duyệt Microsoft Edge */
@-ms-keyframes bsw-slideUp {
from {
-ms-transform: translate(0px, 1000px)
}
to {
-ms-transform: translate(0px, 0px)
}
}
/* CSS cho trình duyệt Opera */
@-o-keyframes bsw-slideUp {
from {
-o-transform: translate(0px, 1000px)
}
to {
-o-transform: translate(0px, 0px)
}
}
@keyframes bsw-slideUp {
from {
transform: translate(0px, 1000px)
}
to {
transform: translate(0px, 0px)
}
}
#sidebar-bsw { /* thay thành ID bạn muốn áp dụng hiệu ứng */
-webkit-animation: bsw-slideUp 3s; /* 3s là khoảng thời gian hiệu ứng thực thi */
-moz-animation: bsw-slideUp 3s;
-ms-animation: bsw-slideUp 3s;
-o-animation: bsw-slideUp 3s;
animation: bsw-slideUp 3s;
}

Tổng kết

Đây là thủ thuật rất cũ, mình đã viết cách đây mấy năm rồi ở blog bacsiwindows cũ của mình :D thấy khá đẹp nên mang lên đây chia sẻ lại cho các bạn, hy vọng sẽ hữu ích!
0 bình luận
Tag
  • 0 bình luận
  • Mặt cười
  • Chèn ảnh
  • Mã hóa HTML
  • Lưu ý
  • Admin Panel
  • :))
    :((
    :D
    :(
    :)
    :-)
    ;)
    =))
    :p
    =.=
    ==
    ^_^
    /=he
    :*
    /=r
    /=l
    :v
    /=ok
    /=clap
    (y)
    (yy)
    /=hi
    /=j
    /=hup
    /=hd
    /=hl
    /=hr
    /=s
    <3
  • Chức năng này hiện chưa khả dụng, bấm vào đây để sử dụng tạm.
  • Hướng dẫn bình luận

    Chèn chữ in đậm: Chữ in đậm

    Chèn chữ in đậm: Chữ in nghiêng

    Chèn ảnh: [img]Link Ảnh[/img]


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

    Không đăng bình luận có nội dung khiêu dâm, 18+

    Không đăng bình luận có liên quan đến chính trị, nhà nước.

    Không đăng bình luận có nội dung phản động, kích động chiến tranh, thù địch.

    Không đăng bình luận có nội dung phản cảm, bêu rếu, nói xấu.

    Không đăng bình luận có nội dung tục tiểu, bậy bạ hay thậm chí "vô học".

    Không đăng bình luận có liên kết spam, dẫn đến những trang có nội dung xấu.

    Được đăng bình luận có mang tính đóng góp, xây dựng bài viết / blog.

    Được đăng bình luận có liên quan đến nội dung bài viết.

    Có thể góp ý, hay báo lỗi bài viết (thiếu ý, sai chính tả hay thiếu hình ảnh minh họa).

    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ạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.

    Bấm vào đây để xem chi tiết hơn nội quy trên Blog.

  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!
  • Một số lưu ý khi bình luận

    Vui lòng xem Hướng Dẩn Sử dụng trước khi 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

    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)

    Nhớ bấm Thông báo cho tôi bên trên để nhận thông báo qua Email khi Admin trả lời nhé.