Cara Membuat Efek Loading Ala Blog Kang Ismet

Beberapa waktu yang lalu saya sempat memposting tentang efek loading yang mirip digunakan kang kapuk pada blognya,kali ini saya akan menshare efek loading yang mirip dengan blog.kang-ismet.net milik kang ismet sendiri. Siapa kang ismet itu ? ia adalah blogger yang cukup terkenal di kalangan blogger karena tutorial-tutorialnya yang luar biasa dan saya sendiri sering menggunakan script yang beliau bagikan untuk di share ulang di blog ini.

Sudah banyak sekali blog yang menggunakan efek loading ini dan memang inilah yang paling menarik digunakan untuk blog dengan berbagai niche/tema.Untuk demo anda bisa mengunjungi blog berikut

Demo loading

cara pemasangan di blog

• Step 1  Buka blogger.com lalu pilih blog  anda
• Step 2  Pilih template lalu edit html
• Step 3  Cari kode ]]></b:skin> dengan mengklik   CTRL +F 
• Step 4  Copy kode berikut lalu pastekan pada diatas kode ]]></b:skin> tadi

#abt-page-loader {        position: fixed!important;        top: 0;        right: 0;        bottom: 0;        left: 0;        z-index: 9999;        background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCBchB_nXKzs_NThbLUIrQvQF6Z2IuRZZiAcRm6G2O5estDaSpFEh4So6mLE2rIH0NU9L9YqRrmd38Y989iNFGQscLFZJXfUqX8KY4tUJsn5DlIXxzcmVOoFIwi7gdu5qIkyI3YG74j6Q/s200/load6.gif') no-repeat 50% 30%;        color: #FFF;        display: none;        font: 0/0 a;        text-shadow: none;        padding: 1em 1.2em;}</style> <script type='text/javascript'>//<![CDATA[$(document.body).append('<div id="abt-page-loader">Loading...</div>');$(window).on("beforeunload", function() {    // ... Show the Animation `.fadeIn()`    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);});//]]></script>

• Step 5  Simpan lalu cek bog anda untuk melihat hasilnya 

sekarang anda bisa menggunakan  efek loading ini di blog anda



jika ada yang ingin agan tanyakan  silahkan berkomentar .wassalamualaikum wr.wb.