Hiệu ứng Preloader đẹp cho blogspot

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

Bài viết này mình hướng dẫn các bạn cài Hiệu ứng Preloader đẹp cho blogspot với nhiều màu đẹp mắt, trong quá trình tải trang hiệu ứng sẽ hiển thị, trang được tải xong thì hiệu ứng sẽ ẩn đi.

Các bước cài đặt Hiệu ứng Preloader đẹp cho blogspot như sau:

Bước 1: Thêm CSS trước thẻ đóng </head>

<style>
/*<![CDATA[*/
#cssload-loader,#cssload-loader .cssload-dot,.preloader{bottom:0;top:0;left:0;right:0}.preloader{position:fixed;z-index:100;background:#fff;display:block}#cssload-loader{position:absolute;width:105px;height:105px;margin:auto}#cssload-loader .cssload-dot{position:absolute;width:52.5px;height:100%;margin:auto}#cssload-loader .cssload-dot:before{content:'';position:absolute;top:0;left:0;right:0;width:52.5px;height:52.5px;border-radius:100%;transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);-webkit-transform:scale(0);-moz-transform:scale(0)}#cssload-loader .cssload-dot:nth-child(7n+1){transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg)}#cssload-loader .cssload-dot:nth-child(7n+1):before{background:#00ff80;animation:cssload-load 1.16s linear .15s infinite;-o-animation:cssload-load 1.16s linear .15s infinite;-ms-animation:cssload-load 1.16s linear .15s infinite;-webkit-animation:cssload-load 1.16s linear .15s infinite;-moz-animation:cssload-load 1.16s linear .15s infinite}#cssload-loader .cssload-dot:nth-child(7n+2){transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg)}#cssload-loader .cssload-dot:nth-child(7n+2):before{background:#00ffea;animation:cssload-load 1.16s linear .29s infinite;-o-animation:cssload-load 1.16s linear .29s infinite;-ms-animation:cssload-load 1.16s linear .29s infinite;-webkit-animation:cssload-load 1.16s linear .29s infinite;-moz-animation:cssload-load 1.16s linear .29s infinite}#cssload-loader .cssload-dot:nth-child(7n+3){transform:rotate(135deg);-o-transform:rotate(135deg);-ms-transform:rotate(135deg);-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg)}#cssload-loader .cssload-dot:nth-child(7n+3):before{background:#0af;animation:cssload-load 1.16s linear .44s infinite;-o-animation:cssload-load 1.16s linear .44s infinite;-ms-animation:cssload-load 1.16s linear .44s infinite;-webkit-animation:cssload-load 1.16s linear .44s infinite;-moz-animation:cssload-load 1.16s linear .44s infinite}#cssload-loader .cssload-dot:nth-child(7n+4){transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}#cssload-loader .cssload-dot:nth-child(7n+4):before{background:#0040ff;animation:cssload-load 1.16s linear .58s infinite;-o-animation:cssload-load 1.16s linear .58s infinite;-ms-animation:cssload-load 1.16s linear .58s infinite;-webkit-animation:cssload-load 1.16s linear .58s infinite;-moz-animation:cssload-load 1.16s linear .58s infinite}#cssload-loader .cssload-dot:nth-child(7n+5){transform:rotate(225deg);-o-transform:rotate(225deg);-ms-transform:rotate(225deg);-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg)}#cssload-loader .cssload-dot:nth-child(7n+5):before{background:#2a00ff;animation:cssload-load 1.16s linear .73s infinite;-o-animation:cssload-load 1.16s linear .73s infinite;-ms-animation:cssload-load 1.16s linear .73s infinite;-webkit-animation:cssload-load 1.16s linear .73s infinite;-moz-animation:cssload-load 1.16s linear .73s infinite}#cssload-loader .cssload-dot:nth-child(7n+6){transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg)}#cssload-loader .cssload-dot:nth-child(7n+6):before{background:#9500ff;animation:cssload-load 1.16s linear .87s infinite;-o-animation:cssload-load 1.16s linear .87s infinite;-ms-animation:cssload-load 1.16s linear .87s infinite;-webkit-animation:cssload-load 1.16s linear .87s infinite;-moz-animation:cssload-load 1.16s linear .87s infinite}#cssload-loader .cssload-dot:nth-child(7n+7){transform:rotate(315deg)}#cssload-loader .cssload-dot:nth-child(7n+7):before{background:#ff00ff;animation:cssload-load 1.16s linear 1.02s infinite;-o-animation:cssload-load 1.16s linear 1.02s infinite;-ms-animation:cssload-load 1.16s linear 1.02s infinite;-webkit-animation:cssload-load 1.16s linear 1.02s infinite;-moz-animation:cssload-load 1.16s linear 1.02s infinite}#cssload-loader .cssload-dot:nth-child(7n+8){transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg)}#cssload-loader .cssload-dot:nth-child(7n+8):before{background:#ff0095;animation:cssload-load 1.16s linear 1.16s infinite;-o-animation:cssload-load 1.16s linear 1.16s infinite;-ms-animation:cssload-load 1.16s linear 1.16s infinite;-webkit-animation:cssload-load 1.16s linear 1.16s infinite;-moz-animation:cssload-load 1.16s linear 1.16s infinite}@keyframes cssload-load{100%{opacity:0;transform:scale(1)}}@-o-keyframes cssload-load{100%{opacity:0;-o-transform:scale(1)}}@-ms-keyframes cssload-load{100%{opacity:0;-ms-transform:scale(1)}}@-webkit-keyframes cssload-load{100%{opacity:0;-webkit-transform:scale(1)}}@-moz-keyframes cssload-load{100%{opacity:0;-moz-transform:scale(1)}}
/*]]>*/
</style>

Bước 2: Copy đoạn code dưới dán trước thẻ đóng </body>

<div class='preloader'>
<div id='cssload-loader'>
<div class='cssload-dot' />
<div class='cssload-dot' />
<div class='cssload-dot' />
<div class='cssload-dot' />
<div class='cssload-dot' />
<div class='cssload-dot' />
<div class='cssload-dot' />
<div class='cssload-dot' />
</div>
</div>
<script>
//<![CDATA[
$('.preloader').delay(1000).fadeOut(500);
//]]>
</script>