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óaweb bạn có virus thì phải. bật lên phát thấy cảnh báo luôn !
Xóae 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 .
Xóacó thể web chứa mã độc đó bạn. bạn nên kiểm tra lại mã nguồn của temp. nếu nó có dạng một đoạn code script hay css mà bạn thấy lạ, nghi nghi thì nên xóa đi, nhưng cẩn thận ảnh hưởng đến temp, còn trong trường hợp nó được mã hóa rồi thì bạn nên thay temp khác. mà theo mình bạn nên thay temp khác là tốt nhất đó !
Xó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 .
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
Nhận xét này đã bị tác giả xóa.
Trả lờiXóamình trả lời vậy thôi. nếu bạn chưa biết nhiều về code thì cứ tìm hiểu dần bạn ạ. mình nghĩ cách tốt nhất bây giờ là thay temp khác chứ temp bạn đang xài k được ổn lắm..
Xó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 .
Xóahơi khó để phát hiện bạn ạ. nó nằm trong mã nguồn của temp mà. có thể lúc bạn cài temp nó chưa 'phát huy tác dụng' ngay. vừa rồi mình check mới thấy như thế.
Xó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 ạ .
Xóamail mình là: mrjanmagic@gmail.com
Xóabác vào active đi :D
Xóabây h thì lại k thấy xuất hiện nữa rồi. code nguồn của bạn cũng bình thường. có thể là trong nội dung bài đăng có vấn đề đó bạn. hiện tại thì lại k thấy bị...
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
Xó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
ok bạn. mình sẽ kiểm tra và giúp bạn hoàn thành sớm !
XóaNhậ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