CARA MEMBUAT ANIMASI LOADING DI BLOG DENGAN MUDAH
Januari 09, 2023
Dipublikasikan
Januari 23, 2021
Assalamualaikum Wr.Wb.
Terimakasih sobat masih tetap bersama kami di blog ini.
Pada postingan kali ini saya ingin membagikan sebuah tuotrial yaiitu ' CARA MEMBUAT ANIMASI LOADING DI BLOG DENGAN MUDAH '
Menambahkan efek loading blog merupakan sebuah fitur yang unik dan keren untuk mempercantik tampilan blog sobat.
Hal tersebut betujuan agar blog yang ia punyai mempunyai suatu tampilan unik dan bisa dihafal oleh pengunjung setianya.
Okelah kita masuk saja ke tutoraialnya, silahkan ikuti tutorialnya berikut :
CARA MEMBUAT ANIMASI LOADING DI BLOG DENGAN MUDAH
Siapkan animasi loading nya dibeberapa website penyedia animasi loading dibawah ini,
1. Silahkan masuk ke dalam halaman utama blogger.
2. Buka menu Tema dan pilih Edit HTML.
3. Cari kode <b:skin/> lalu tempelkan kode css dibawah ini tepat DIATASNYA.
#loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfhVNIPGTY6jUzOmA0UmwMZgtwtcRymZWD9o3ZH-HAzQpgxFpqU5Y_xzUIPqedG9W0sqvLqY4WPVCBlp2ygoE5_9lcJgcdj0Sgod1I4a_vK9TXJS5Kpmdzv0gCJLotdhgtFnBvosZVU_KS/s1600/800+%25281%2529.gif") 50% 50% no-repeat rgb(255, 255, 255); opacity: 0.9; } #loader p { font-size: 18px; font-weight: bold; text-align: center; margin-top: 180px;
Silahkan ganti url yang https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfhVNIPGTY6jUzOmA0UmwMZgtwtcRymZWD9o3ZH-HAzQpgxFpqU5Y_xzUIPqedG9W0sqvLqY4WPVCBlp2ygoE5_9lcJgcdj0Sgod1I4a_vK9TXJS5Kpmdzv0gCJLotdhgtFnBvosZVU_KS/s1600/800+%25281%2529.gif, dengan url animasi yang anda miliki.4. Lalu cari lagi kode <body> dan tempelkan kode html dibawah ini tepat DIBAWAHNYA.
<div id="loader">
<p>Loading....</p>
</div>
5. Kemudian cari <body> dan tempelkan kode dibawah ini tepat DIATASNYA.<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
<script type='text/javascript'>
$(window).load(function() {
$( "#loader" ).hide();
});
</script>
6. Simpan dan selesai.Sobat baru saja mengikuti tutorial yang saya berikan diatas tadi, bagaimana? gampang bukan membuatnya?.
Silahkan share ke teman-teman sobat yang mau membuat efek animasi loading di blog.
Saya akhiri postingan ini dengan,
Wassalamualaikum Wr.Wb.