Cara Memasang Efek Loading Pada Halaman Blog Saat Dibuka

Cara buat efek loading saat blog dibuka. Sebenarnya caranya sangat mudah, agan tinggal copy dan paste code css dan javascript dibawah ini pada edit HTML blog agan lalu letakkan di atas kode </head> lalu save dan lihat hasilnya.

<!-- blog loader Andi AM V.1 -->

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style type='text/css'>

.bbt-loading{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background-color:#fff}

#loading{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:#3498db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:1001}

#loading:before{content:&quot;&quot;;position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#e74c3c;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}

#loading:after{content:&quot;&quot;;position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#f9c922;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}

@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}

100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}

@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}

100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}

</style>

<script type='text/javascript'>

//<![CDATA[

$(window).load(function() { $(".bbt-loading").fadeOut("slow"); })

//]]>

</script>

</b:if>

NB.

Loading hanya akan muncul pada beranda blog agan, namun jika agan ingin efek loading ini muncul disemua postingan agan tinggal hapus aja kode </b:if> nya. atau seluruh code berwarna merah diatas.

Semoga Bermanfaat .

Salam Admin : Blogger Academia

Artikel Terbaru!

Recent Posts Widget

Cara Memasang Efek Loading Pada Halaman Blog Saat Dibuka 2024-09-09T03:45:00-07:00 Rating: 4.5 Diposkan Oleh: Boegis Fashion