Loading merupakan hal yang cukup menjengkelkan para pengunjung blog, terlebih lagi jika loading tersebut cukup lama. Untuk mengusir rasa jenuh pengunjung saat menunggu loading, ada baiknya jika anda membuat sebuah efek pada loading tersebut. Selain untuk mengusir rasa jenuh, efek ini pun tentunya akan menambah penampilan blog lebih menarik. Jika anda tertarik, silahkan ikuti langkah-langkah cara membuat efek loading kotak rubik pada blog berikut ini.
1. Login ke Blogger
2. Pilih Template Edit HTML
3. Cari kode </head>
4. Pasang kode di bawah ini tepat di atas kode </head>
<style>/* loader http://ap-thea.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 kode <head>
Baca juga :
» Cara Mudah Membuat Kolom Permalink
» Cara Memasang Profile Keren Pada Blog
» Cara Mudah Membuat Kolom Langganan Keren Di Bawah Postingan
6. Pasang kode di bawah ini tepat di atas kode <head>
<div id='Kang-AP-load'><div id='Kang-AP-progbar'/><div id='md-loader'>Loading...</div></div>
Mohon diperhatikan kode </head> dan kode <head> itu berbeda, jadi jangan sampai salah menempatkan kode-kode di atas
7. Simpan Template
Demikian cara membuat efek loading kotak rubik pada blog, semoga berhasil and happy blogging !!
0 Response to "Cara Membuat Efek Loading Kotak Rubik Pada Blog"
Post a Comment