Cara Memasang Efek Animasi Loading di Blog - Deny Listianto

June 7, 2018

Cara Memasang Efek Animasi Loading di Blog

Cara Memasang Efek Animasi Loading di Blog - Efek animasi pada tutorial ini merupakan suatu efek animasi loading page yang sederhana namun memiliki tampilan yang tidak kalah menarik.

Untuk membuat efek animasi page loading di blog kita hanya menggunakan sebuah HTML, CSS dan jQuery agar bisa menjadi sebuah efek animasi page loading di blog.

Dengan menggunakan efek animasi page loading ini tidak akan terlalu memberatkan Loading Blog Anda, sehingga Anda tidak perlu khawatir dengan penggunaan efek animasi page loading pada blog Anda.

Memasang Efek Animasi Loading di Blog

Untuk itu blog Deny Listianto akan membagikan sebuah tutorial Cara Memasang Efek Animasi Loading di Blog, dengan memberikan efek animasi loading maka akan terlihat begitu menarik dan keren ketika pengunjung blog sedang berada pada blog lalu berpindah halaman maka efek animasi loading page ini akan terlihat.

Selain efek animasi loading page ada juga efek animasi loading gambar atau bisa di sebut juga lazy load yang dapat mempercepat loading blog.

Baca Juga : Cara Pasang Lazy Load di Blogger

Baiklah langsung saja bagi Anda yang ingin membuat atau menambahkan efek animasi loading page di blog terbaru, silahkan simak tutorialnya dibawah ini :

Tutorial Cara Memasang Efek Animasi Loading Sederhana di Blog


1. Login ke Blogger lalu buka menu Tema setelah itu Edit HTML.
2. Tambahkan kode CSS dibawah ini sebelum ]]></b:skin> atau </style>.

#cssload {background:url(http://2.bp.blogspot.com/-gwEckHVvyvM/VnbiQdPPZSI/AAAAAAAADcE/wwKnP62ARpc/s1600/loading.gif) no-repeat center;background-color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}

3. Selanjutnya tambahkan kode HTML ini dibawah kode <body>.

<div id='cssload'/>

4. Tambahkan kode jQuery dibawah ini sebelum </body>.

<script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#cssload").fadeOut(1e3)});
//]]>
</script>

5. Simpan Tema dan lihat hasilnya.


Sekian tutorial Cara Memasang Efek Animasi Loading di Blog, selamat mencoba dan semoga berhasil.
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo