Wednesday, 26 July 2017

Cara Membuat Efek Animasi Loading Sederhana di Blogger

Efek Animasi Loading

Jika kita terus membahas Kreatifitas dunia Koding Website terutama pada kreasi template blog ada banyak yang bisa kita kreasikan, dari mulai membuat tampilan Blog berwarna-warni sampai yang terlihat elegant dan bagus untuk dilihat. Memang tidak bisa dipungkiri salah satu faktor yang membuat pengunjung betah berlama-lama di blog adalah tampilan yang membuat enak dilihat mata.

Namun ada banyak juga blogger yang hanya memnapilkan template blog yang sederhana saja seperti template yang dipakai dibalikseo ini simple hanya putih karena kebetulan saya lebih suka yang simple saja lumayan bisa mengurangi beban loading.

Dipostingan ini terkait tentang keindahan dan kreasi penampilan pada blog, kita akan membahas tampilan blog yang akan kita hiasi dengan Animasi Loading sederhana yang secara otomatis akan tampil saat ada yang berkunjung ke blog dan otomatis akan hilang ketika halaman sudah selesai dimuat.

Bagi sobat yang mau mencobanya mari kita simak pembahasannya yaitu Cara Membuat Efek Animasi Loading Sederhana di Blogger.

Langkah Pertama
Silahkan salin kode CSS dibawah ini lalu letakkan kode tersebut sebelum kode ]]></b:skin> atau di kode </style>.

#cssload {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqR_PUyWw1o8HorvRVn-FQBCHZFuNlYwojJQHebYR7ihU5lx4rOwZN4TBO8owN3kbE54kqxvMegU1GHB54njnorZR4SlLUaAZEfQ6Ve_v52makcuwPKow2hyphenhyphenf6NeH9ceT7fZMokdWdcbc/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;}


Langkah Ke Dua
Silahkan salin kode HTML ini lalu letakkan dibawah kode <body>.

<div id='cssload'/>


Langkah Ke Tiga
Silahkan tambahkan kode Jquery dibawah ini lalu letakkan di atas </body>.

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

Perhatikan langkah penerapan kodenya jika sudah sesuai petunjuk silahkan SAVE, selamat mencoba semoga bermanfaat.


EmoticonEmoticon