Cara membuat efek loading halaman blogspot
Umumnya para bloggers menyebut widget ini dengan sebutan "Blog Loader" atau tampilan loading saat blog agan diakses atau dibuka. Efek loading ini sebenarnya sangat baik untuk mempercantik tampilan blog.
Selain dari itu gambar loading akan menutup semua jendela halaman blog yang bertujuan agar halaman akan terbuka saat halaman sudah siap untuk dibaca baru ditampilkan. Jika agan penasaran, bagaimana tampilan "Blog loader" ini silahkan klik salah satu label atau menu blog ini, maka loading blog akan anda lihat sebelum halaman terbuka. Silahkan ikuti cara blogger berikut ini.
Baiklah berikut langkah-langkahnya.
- Menambahkan JavaScript ke template.
Cari kode </head> gunakan ( Ctrl+F ) agar lebih cepat dalam pencarian kodenya. - Jika sudah ketemu hapus code tersebut, lalu ganti dengan code dibawah ini.
<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:"";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:"";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' src='//code.jquery.com/jquery-2.1.3.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() { $(".bbt-loading").fadeOut("slow"); })
//]]>
</script>
</head>
<div class='bbt-loading'>
<div id='loading'/><a href='https://buktiinaja.blogspot.com/' rel='nofollow' style='font-size: 10px; color: #eaeaea; margin-top: 10px;margin-left: 10px;'> Loading...</a><div class='loading-section section-left'/><div class='loading-section section-right'/>
</div>
<!-- blog loader Andi AM V.1 -->
TERAKHIR
Silahkan save template agan dan coba lihat hasilnya.
TAMBAHAN
Jika loader blog tidak muncul, atau loading terusmenerus, atau loading gagal, maka kemungkinan letak permasalahannya pada script jquery yang bentrok.
Solusinya:
- Silahkan hapus code jquery-2.1.3.js diatas yang berwarna merah pada template agan.
- Jika masih gagal, coba cari jquery yang lain di template agan lalu hapus jequery tersebut, kemungkinan telah terjadi sengketa jequery jadi widget jadi tidak work.
- Jika masih bermasalah, silahkan share di google, cara mengatasi konflik jquery di blogspot.
Salam
Andi AM
Artikel Terbaru!
Recent Posts Widget
