Bài viết này mính sẽ hướng dẫn các bạn cách để trang blog của bạn xoay 360 độ khi bạn tải lại trang hoặc truy cập vào đọc một bài viết bất kỳ trên trang của bạn. Thủ thuật sẽ giúp cho trang blog của bạn đặc biệt hơn trong mắt độc giả.
Đoạn mã được sử dụng hoàn toàn là CSS3 sẽ giúp tốc độ tải trang của bạn không bị ảnh hưởng khi áp dụng thủ thuật này trên trang blog của bạn. 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, firefox, sarafi, IE9-10,....
Các bạn có thể xem demo bằng cách bấm nút tải lại (hoặc bấm phím số F5 trên bàn phím máy tính của bạn) khi xem bài viết này:
» Cách tạo hiệu ứng xoay tròn khi tải trang cho blogspot.
1. Đăng nhập vào trang blog của bạn.
2. Vào phần Chỉnh sửa HTML (Edit HLM)
3. Dán đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>.
@-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; }
4. Lưu mẫu của bạn lại và xem kết quả đã làm được.
» Tùy chỉnh code:
- 360deg là độ xoay trang của bạn bạn có thể điều chỉnh lại cho giảm bớt hoặc tăng số vòng xoay ở đoạn này. 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. Bạn có thể kéo dài thời gian hoặc rút ngắn nó. mẹo, nếu số vòng quay càng lớn thì thời gian nên để càng dài nếu không nhìn sẽ rất rồi mắt đó.
» Cách khác: 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.Javarscripts 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>
P/s: Còn gì thắc mắc hoặc chưa hiểu bạn có thể để lại comment ở bên dưới mính sẽ giải đáp cho cac bạn. Đừng quyên like hoặc cộng 1 bài viết nếu bạn thấy hữu ích nha.
Nhận xét
Bác rảnh k giúp e xí .
Trả lờiXóahttp://www.s69vn.com/2014/02/tuyen-tap-ao-dai-ao-dai-30.html
e Lấy temp share / mạng về chẳng bik sửa sao nữa.
Lúc add tên miền vào thì chỗ "Các tin khác " k hiển thị . :((
dungprohb114@gmail.com
YH: handoi_qua_den
Blog bác có virus à :))
Xóahttp://i.imgur.com/rWeFQMA.png
e xài avira chẳng thấy j` . Bác quét = j` zợ . web e còn chẳng đặt link ads hay link ptp j` mà .
XóaNguyễn Anh Dũng : Mình dùng avast! bạn ạ :)
XóaCái này free àh ,xài tốt k bác .
XóaRất tốt và rất nhẹ, mình xài rất lâu rồi đấy :)
XóaĐể e down về xài thử .
XóaThanksss bác
e lấy temp share trên mạng về . Cũng chẳng biết mã miếc code j` cả . Hay máy e dính virut cmnr nên k thấy cảnh báo .
Trả lờiXóaHic!! . e có biết tí j` về code đâu . Lấy temp share về post bài thôi . Lúc mất phần bài liên quan e phải mò đi hỏi thì bác biết e gà thế nào rồi mà >.< . Thay cái # sợ k biết chỉnh .
Trả lờiXóaCho mình hỏi thêm xí . Làm thể nào để nhận biết là web dính mã độc . Vì máy mình k thấy báo j` cả h ngồi mò xóa này xóa nọ cũng chẳng biết là hết chưa nữa .
Trả lờiXóae gà nghe nó khó hiểu . Hay bác rảnh vào xem giúp e với . Cho e xin cái mail ạ .
Trả lờiXóabác vào active đi :D
Trả lờiXóak biết có lq k e vừa xóa cái nút kéo web dưới góc và cái link tự like fanpage :) k biết có lq k
Trả lờiXóaBác chỉnh cho e chỗ bài liên quan luôn òi àh . Cảm ơn bác nhiềuu .
Mà cái hiện bài theo nhãn của e nó cứ lug tug thế nào ý .
Hàn quốc này thì hiện có 3 cái
Funny cái này lại hiện rõ nhiều
Bác chỉnh giúp e luôn vs :P
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaBcá Nam ơi ! Facebook bác là gì vậy ?
Trả lờiXóaFacebook : www.facebook.com/anh.pim.pimmada
Đây nha bạn: HERE
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóalàm sao để tắt hiệu ứng này đi vậy ban?
Trả lờiXóa