Menambahkan Efek Preloader Full Screen di Blogger

  • Whatsapp

Terkadang situs web mengambil lebih banyak waktu untuk memuat halaman. Itu bisa saja membuat jenuh bagi pembaca blog kamu. Dengan menambahkan efek preloader jQuery, ini dapat mengurangi jenuh bagi pengunjung blog kamu.

Ketika pengunjung mengunjungi situs web kamu, mereka akan melihatnya kemudian setelah memuat konten secara penuh preloader itu akan hilang.

Jika kamu ingin menambahkan efek preloader di blog kamu, simak tutorialnya di bawah ini

Muat Lebih

Loading...

Menambahkan Efek Preloader Full Screen di Blogger

1. Edit HTML
2. Cari kode ]]></b:skin> dan letakkan kode di bawah ini di bawah kode tersebut


#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 99999;
height: 100%;
}
#status {
position: absolute;
left: 50%;
top: 50%;
width: 64px;
height: 64px;
margin: -32px 0 0 -32px;
padding: 0;
}

3. Selanjutnya cari kode <body> atau <body expr:class=’”loading” + data:blog.mobileClass’> dan taruh kode di bawah ini tepat di bawah kode tadi.


<div id='preloader'>
<div id='status'>
<img alt='' height='64' src='https://2.bp.blogspot.com/-K5wY2LFWOeQ/XCxRzytlD-I/AAAAAAAAIUQ/FiqAsqBkw2otuV4-4EO-fCdzRgUiDzBGACLcBGAs/s1600/loader.gif' width='64'/>
</div>
</div>

4. Selanjutnya cari kode </body> dan letakkan kode di bawah ini tepat di atas kode </body>


<script>
/*====================================
* Preloader Effect
* www.mahesa.id
======================================*/
$(window).load(function() {
$("#status").fadeOut("slow");
$("#preloader").delay(500).fadeOut("slow").remove();
})
</script>

5. Simpan template dan lihat hasilnya..

Pos terkait