Cara Pasang Kubik Rubik Loading Blog

Ada rakan blogger bertanyakan mengenai cara pasang kubik rubik ketika loading blog. Mungkin seronok nampak kubik rubik tu sedang beranimasi, maka diminta terus kepada saya untuk kongsikan tutorial memasangnya di blog platform blogspot.

Ok. Tatkala entri ini ditulis, memang saya ada pasang kubik rubik ini di dalam blog. Ianya bertujuan untuk hilangkan rasa bosan menunggu loading blog yang kadangkala memakan masa. Dengan cara ini, pengunjung blog tidak akan merasa berada 'lama' untuk menunggu entri seterusnya (yang diklik) untuk dipaparkan.

Kubik rubik beranimasi akan berikan kesan psikologi kepada pengunjung dan pembaca. Ia akan muncul ketika pengunjung klik dari satu link ke satu link, samada keluar dari blog atau antara entri-entri di dalam blog. Apabila ia muncul, pengunjung akan leka melihatkan animasi yang keluar dan tanpa sedar mereka sebenarnya menunggu loading blog untuk dipaparkan.

Teknik Turunkan Kadar Bounce Rate

Cara ini juga dapat mengurangkan kadar bounce rate sesebuah blog kerana pengunjung tidak pangkah meninggalkan blog anda walaupun terpaksa menunggu agak lama. Secara lansung ia tidak akan buat pengunjung rasa bosan dengan blog anda.

Cara Pasang Kubik Rubik Loading Blog

Ok.

Bagaimana nak pasang?

Anda hanya perlu salin kod-kod HTML dan CSS yang saya sediakan ini ke dalam HTML blogspot anda.

Salin dan tampal kod dibawah ini dan letak sebelum penutup BODY.

<!-- Page Loader --> <script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="page-loader"> Loading...</div> '); $(window).on("beforeunload", function() { $('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000); }); //]]> </script>

Dan kod CSS berikut di dalam b:skin blogspot anda.

/* CSS Loading Page */ #page-loader {position:fixed!important;position:absolute;top:0;right:0;bottom:0; left:0;z-index:9999;background:#fff url('http://2.bp.blogspot.com/-t2gSISF0Sdc/U4XzAzFl5qI/AAAAAAAADVY/nYmOzAOnbus/s1600/Loader3.gif') no-repeat 50% 50%;color:#fcfcfc;padding:1em 1.2em;display:none;}

Ok. Save template blogspot anda, dan lihat hasilnya ...

Selamat mencuba.