Tạo hiệu ứng xoay 360 độ cho trang Blogspot (Blogger)

Hôm nay mình xin giới thiệu hiệu ứng xoay 360 độ cho Blogspot (khi độc giả truy cập hoặc Refresh lại trang thì hiệu ứng này sẽ xuất hiện). Sự chuyển động có thể sẽ làm người xem Blog/Website của bạn thích thú hơn và cảm thấy đỡ nhàm chán hơn. Ngoài ra, hiệu ứng xoay 300 độ mình đã thực hiện trực tiếp trên bài viết này. Nếu bạn nào để ý thì thấy ngay, không tin các bạn bấm F5 là biết liền. JJJ

               Đọc thêm:



☼ Giờ bắt đầu thủ thuật cùng Windows2it.

Cách 1: Cài đặt trực tiếp vào Template: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </b:skin>Lưu mẫu lại.

@-moz-keyframes roll {
 100% { 
 -moz-transform: rotate(360deg); 
} 
} 

@-o-keyframes roll { 100% {
 -o-transform: rotate(360deg); 
} 
} 

@-webkit-keyframes roll { 100% {
 -webkit-transform: rotate(360deg); 
} 
} 

body{
 -moz-animation-name: roll;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: 1;
 -o-animation-name: roll; -o-animation-duration: 2s;
 -o-animation-iteration-count: 2;
 -webkit-animation-name: roll;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: 1;
 }   
Cách 2: Cài đặt tùy ý: Bạn cũng có thể áp dụng nó cho một bài viết duy nhất bằng cách dán đoạn code bên dưới vào phần HTML của bài viết (Hoặc dán vào trong một tiện ích HTML/JavaScript của bạn)

<style> 
@-moz-keyframes roll {
 100% { 
 -moz-transform: rotate(360deg); 
} 
} 

@-o-keyframes roll { 100% {
 -o-transform: rotate(360deg); 
} 
} 

@-webkit-keyframes roll { 100% {
 -webkit-transform: rotate(360deg); 
} 
} 

body{
 -moz-animation-name: roll;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: 1;
 -o-animation-name: roll; -o-animation-duration: 2s;
 -o-animation-iteration-count: 2;
 -webkit-animation-name: roll;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: 1;
 } 
</style>  
Chú ý: Vì đoạn code là CSS3 nên trên một số trình duyệt như IE5, 6 , 7 sẽ không hoạt động. Hoạt động tốt trên chroome, cococ, firefox, sarafi, IE9-10,.... Hiệu ứng này hoàn toàn không ảnh hưởng tới tốc độ tải trang nên các Bạn cứ yến tâm nhé!

☼ Tùy chỉnh

·        360deg đây là góc xoay của trang ở đây là 3600. Lưu ý chỉnh sửa cả 3 đoạn vì nó ứng với các trình duyệt khác nhau.

·        2s là thời gian để xoay 360deg trên (Thời gian để thực hiện hết một chu kỳ). Mẹo, nếu góc quay càng lớn thì thời gian nên để càng dài.

Nếu bạn thích bài viết này, hãy subscribe Blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều JJJ

Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

12 nhận xét:

  1. HAY GHÊ AD ĐẢ TEST
    MONG ad chia sẻ thiêm nhiều tiện ích hơn nữa cho blogg
    http://notebookmmo.blogspot.com.
    xin phép ad để liên kết blog của ad vào blog của minh nha

    ReplyDelete
    Replies
    1. oke đã đặt liên kết cho bạn __ chúc blog bạn ngày càng phát triển

      Delete
    2. mình mới tập làm blog mục đích là để giải trí vào thời gian rảnh nhưng mà thấy đang bí cái chổ thêm slide show cho blog giống demo mình ko biết thêm code như thế nào thấy ad nhiệt tình vs mem nên vào xin ad chhỉ giúp mình vs các phần video movies new của mình
      http://notebookmmo.blogspot.com/
      demo nguoi ta :http://megamag-pbt.blogspot.com/ khong biet co phai mua ban quyen moi co ko nua neu ad biet chi giup mminh vs nha thanks ad

      Delete
    3. cái này dễ mà bạn trong mục sideshow nó có 3 HTML/JavaScript tương ứng với 3 nhãn Label bạn thêm đoạn code chứa 3 nhãn tương tự vào từng HTML/JavaScript là được ngay.

      Delete
    4. mình thêm code chạy slide show vào các nhãn mà kích thước chỉnh hoài mà ko dc j cả

      Delete
    5. Chắc bạn đã thêm sai code ... ét đâu ..
      >> Lại đổ template nữa rồi à :)

      Delete
  2. Thủ thuật này hay quá! Áp dụng vài bài cho nó độc!

    ReplyDelete
  3. Mình sẽ áp dụng cho wedsite http://www.nicklmht.net shop bán nick lmht uy tín giá rẻ

    ReplyDelete