Hướng dẫn tạo hiệu ứng Loader sang hai bên khi truy cập Blog
Có thể bạn đang tìm:
Hello ! Xin chào 5 xị anh em ^^ Nay mình hướng dẫn các bạn làm hiệu ứng Loader khi truy cập vào Blog nhé. Nó đơn giản trên từng cen ti mét thôi.
CÁCH SỬ DỤNG
Bước 1: Truy cập vào Blogger.com
Bước 2: Chọn phần Chủ đề - Chỉnh sữa HTML.
Bước 3: Thêm đoạn code này ngay dưới thẻ đóng
Bước 3: Thêm đoạn code này ngay dưới thẻ đóng
</head>
Bước 4: Lưu Template lại vào xem Blog của bạn.
<!-- Loắc Ơ by TienDucBlog -->
<style>
#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999999;overflow:hidden}.no-js #loader-wrapper{display:none}#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#16a085;-webkit-animation:spin 1.7s linear infinite;animation:spin 1.7s linear infinite;z-index:11}#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#e74c3c;-webkit-animation:spin-reverse .6s linear infinite;animation:spin-reverse .6s linear infinite}#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#f9c922;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spin-reverse{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg)}}@keyframes spin-reverse{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}#loader-wrapper .loader-section{position:fixed;top:0;width:51%;height:100%;background:#222;z-index:10}#loader-wrapper .loader-section.section-left{left:0}#loader-wrapper .loader-section.section-right{right:0}.loaded #loader-wrapper .loader-section.section-left{-webkit-transform:translateX(-100%);transform:translateX(-100%);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1)}.loaded #loader-wrapper .loader-section.section-right{-webkit-transform:translateX(100%);transform:translateX(100%);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1)}.loaded #loader{opacity:0;transition:all .3s ease-out}.loaded #loader-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%);transition:all .3s 1s ease-out}
</style>
<div id='loader-wrapper'>
<div id='loader'/>
<div class='loader-section section-left'/>
<div class='loader-section section-right'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Fakes the loading setting a timeout
setTimeout(function() {
$('body').addClass('loaded');
}, 500);
});
//]]>
</script>
<div class='pace'/>
<!-- Loắc Ơ by TienDucBlog -->
LỜI KẾT
Chỉ với vài bước như thế ! Blog bạn sẽ trở lên bắt mắt hơn. Ngại gì mà không thử cơ chứ. Chúc các bạn thành công.
Leech đi đâu nhớ ghi nguồn tại Tiến Đức Blog nhé!
Cái gì cũng có cái giá của nó. Tôn trọng người khác, người khác sẽ tôn trọng lại bạn!
Cái gì cũng có cái giá của nó. Tôn trọng người khác, người khác sẽ tôn trọng lại bạn!
Chuyên Mục:

Tác Giả: Tiến Đức Blog
(www.tienducblog.net)
Nỗ lực hết mình trong từng việc làm, cho dù việc đó có thành công hay không ?
Blogspot
:)))
ReplyDeleteEo ơi được Blogger cmt :v
DeleteChất chơi
ReplyDeleteVíp quá đó nka
ReplyDeleteThẻ < /Head > temp e ko có làm sao anh :v
ReplyDeleteDán trên menu top
Deletemà thêm cái đó em thấy blog load cũng khá là chậm á anh
DeleteBỏ thôi e :v
DeleteVip
ReplyDeleteư ư :v
DeleteI am star sinh
ReplyDeleteBài mới đi a ơi
Bủi tối vv nhê
Oki em <3
Deletebuổi chiều zui zẻ :2
ReplyDelete