Loading merupakan hal yang cukup menjengkelkan para pengunjung blog, terlebih lagi kalau loading tersebut cukup lama. Untuk mengusir rasa jenuh pengunjung dikala menunggu loading, ada baiknya kalau anda menciptakan sebuah imbas pada loading tersebut. Selain untuk mengusir rasa jenuh, imbas ini pun tentunya akan menambah penampilan blog lebih menarik. Jika anda tertarik, silahkan ikuti langkah-langkah cara menciptakan imbas loading kotak rubik pada blog berikut ini.
1. Login ke Blogger
2. Pilih Template Edit HTML
3. Cari isyarat </head>
4. Pasang isyarat di bawah ini sempurna di atas isyarat </head>
<style>/* loader aciknadzirah.blogspot.com/*/#Kang-AP-load {position: absolute;z-index: 50;top: 0; left: 0;opacity: 0.9;width: 100%; height: 100%;background: #FDFEF8 url(http://3.bp.blogspot.com/-WqA4mLrQVsw/U4COhzzQi2I/AAAAAAAABrw/57-G3Pw25ek/s128-no/Loading.gif) no-repeat center;line-height: 350px;text-align: center;font-size: 36px;color: #353231;text-indent: -9999px;}.MD #Kang-AP-load { display: none; }@media only screen and (device-width: 768px) {#loading {position:absolute;width:1040px;min-height:768px;}}#Kang-AP-progbar {position: absolute;top: 0; left: 0;background: #ED0000;opacity: 0.8;width: 0;height: 5px;}#md-loader {height: 100%;display: none;}</style><script>(function($){$("html").removeClass("MD");$("#header").ready(function(){ $("#bingangbingung-progbar").stop().animate({ width: "25%" },1500) });$("#footer").ready(function(){ $("#bingangbingung-progbar").stop().animate({ width: "75%" },1500) });$(window).load(function(){$("#bingangbingung-progbar").stop().animate({ width: "100%" },600,function(){$("#bingangbingung-load").fadeOut("fast",function(){ $(this).remove(); });});});})(jQuery);</script>
5. Berikutnya cari isyarat <head>
Baca juga :
» Cara Praktis Membuat Kolom Permalink
» Cara Memasang Profile Keren Pada Blog
» Cara Praktis Membuat Kolom Langganan Keren Di Bawah Postingan
6. Pasang isyarat di bawah ini sempurna di atas isyarat <head>
<div id='Kang-AP-load'><div id='Kang-AP-progbar'/><div id='md-loader'>Loading...</div></div>
Mohon diperhatikan isyarat </head> dan isyarat <head> itu berbeda, jadi jangan hingga salah menempatkan kode-kode di atas
7. Simpan Template
Demikian cara menciptakan imbas loading kotak rubik pada blog, biar berhasil and happy blogging !!
Sumber http://ap-thea.blogspot.com
EmoticonEmoticon