Tạo Hiệu Ứng Loading Đẹp Chuyên Nghiệp Cho Blogspot

Giới Thiệu

Bài viết này mình sẽ chia sẻ cho những bạn chưa biết, muốn sử dụng hiểu ứng loading này cho blogspot của mình, làm blog, website của bản thân chuyên nghiệp hơn. Như các blog, website khác đã chia sẻ, nên hôm nay mình cũng viết bài viết này để chia sẻ cho các bạn sử dụng Hiệu Ứng Loading Chuyên Nghiệp như này nhé.

Tao Hieu Ung Loading Dep Chuyen Nghiep Cho Blogspot

Các Bước Thực Hiện

Bước 1: Vào chỉnh sửa HTML
Bước 2: Chèn đoạn code bên dưới vào dưới thẻ <body> ( nếu không tìm ra thì thẻ body của bạn đã bị mã hóa " < > " bạn có thể search &lt;body&gt; nhé.
<style>
#loadhalaman{position:absolute;top:62%;left:50%;transform:translate(-50%,-50%)}
.loadball{border:1px solid rgb(240,0,0);background-color:transparent;border-right:1px solid #aaa;border-radius:50px;box-shadow:0 0 50px rgb(255,0,0,.1);border-left:1px solid #aaa;width:50px;margin:0 auto;-moz-animation:spinoffPulse 1s infinite linear;height:50px;-webkit-animation:spinoffPulse 1s infinite linear}
.loadball-2{background-color:transparent;border:1px solid rgb(240,0,0);border-left:1px solid #ddd;border-right:1px solid #ddd;border-radius:50px;width:20px;height:20px;margin:0 auto;position:relative;top:-35px;-moz-animation:spinoffPulse2 1s infinite linear;-webkit-animation:spinoffPulse2 1s infinite linear}
@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
@-webkit-keyframes spinoffPulse2{0%{-webkit-transform:rotate(360deg)}100%{-webkit-transform:rotate(0deg)}}
#abc-abc2{position:fixed;top:50%;left:50%;z-index:99999;transform:translate(-50%,-50%);background:white;width:80px;height:80px;text-align:center;border-radius:50%;box-shadow:0 0 100px rgba(0,0,0,.3)}
</style>
<div id='abc-abc2'>
<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
</div>
<script type='text/javascript'>$(window).bind(&quot;load&quot;,function(){$(&quot;#abc-abc2&quot;).fadeOut(2000)});</script>
Bước 3: Save template lại và kiểm tra hoạt động của code nhé.

Lời Kết

Chúc Các Bạn Thành Công 
Demo

How To Download File :

Download Here

How To Download File :

Howktech

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!. Xem thêm về tôi

» Nhận Xét Của Bạn - Hãy Comment Lịch Sự Vì Bạn Có Hiểu Biết.

Loading...