Saat anda mengunjungi sebuah blog, sebelum masuk ke halaman blog, anda akan menemukan bahwa saat loading akan terlihat halaman putih saja, blank page ini akan hilang bila halaman telah selesai loading. Anda mungkin berpikir bahwa halaman loading tidak dapat diganti dengan animasi sehinggaanda tidak bosan saat anda menunggu hingga halaman selesai loading. Tapi tahukah anda? anda dapat memodifikasi loading page ini dengan menggunakan kode tertentu dan memasang animasi yang anda inginkan di dalamnya. Apakah anda penasaran? Silahkan anda simak caranya berikut ini.
Cara Memasangnya di Blog
Sebelum anda melakukan perubahan pada halaman HTML Template, sebaiknya anda mem-backup template anda terlebih dahulu.Step 1
Masuk ke halaman dashboard > Template > HTML > Expand widget templateStep 2
Letakkan kode berikut tepat di atas kode ]]></b:skin>/* TKB Page Loading Effect (www.thekampoengblogger.blogspot.com) */
#TKBloadingeffect {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FDFEF8 url(URL Gambar Loading GIF disini) no-repeat center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.MD #TKBloadingeffect { display: none; }
@media only screen and (device-width: 768px) {
#loading {
position:absolute;
width:1040px;
min-height:768px;
}
}
#TKBprogressbar {
position: absolute;
top: 0; left: 0;
background: #de1301;
opacity: 0.8;
width: 0;
height: 18px;
}
#TKBloader {
height: 100%;
display: none;
}
Step 3
Letakkan kode berikut tepat di atas kode </head><script>
(function($){
$("html").removeClass("MD");
$("#header").ready(function(){ $("#TKBprogressbar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#TKBprogressbar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#TKBprogressbar").stop().animate({ width: "100%" },600,function(){
$("#mbl-lazyloading").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script>
Step 4
Letakkan kode berikut di atas kode </body>- Bila anda ingin Loading Page ini tampil hanya pada halaman Homepage saja, maka copy kode berikut
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='TKBloadingeffect'><div id='TKBprogressbar'></div><div id='TKBloader'>This Loading Effect is Powered By<a href="http://thekampoengblogger.blogspot.com">Blogger</a></div></div></b:if>
- Bila anda ingin Loading Page ini tampil pada semua halaman, maka copy kode berikut
<div id='TKBloadingeffect'><div id='TKBprogressbar'></div><div id='TKBloader'>This Loading Effect is Powered By<a href="http://thekampoengblogger.blogspot.com">Blogger</a></div></div>
Step 5
Klik Save TemplateCatatan !
- Ganti URL Gambar Loading di Sini dengan URL Gambar anda sendiri (dalam format GIF)
- Anda dapat mengganti warna background #FDFEF8 dengan kode warna yang lain (lihat kode warna RGB dan HEX)
- Anda juga dapat mengganti warna progress bar dengan warna lain, dengan cara mengganti kode warna #de1301 dengan kode warna yang lain.
Berikut adalah URL Gambar loading yang bisa anda pilih
Merah
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg26lAq8qNjwyiezDnsWKM-l5f9kQhQCtr4bxa9gfwFAIWLGcGnlbZG-SDwrFc8YEnamAI_8jQ9PcD6IWvSMXLVp5mDbvQ4GFsrFxijUuZefeS0HhQ4cxhOe532BVl-Xc56RFdBdKWmqQX/s1600/TKB-Loading-1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjusd_a136SlkXtOkl2XZ_EWW79cVnY6OxR-vCY7qN6K6QKnNyToT-W-MjbC2lZrNfD0X75GsmdBOo2jPkAaDt0-WDQVwCEqiwkL1iyg4bKLog_hA6jdSWlCkwZWbm8pmZf-qF03BFX7zdH/s1600/TKB-loading-2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuJrPYNgDdMDsGJk1iYGkrbUWUHt7-4p9p_Yu9YQdV135OTkybV0IufJQ7zhckAp0I-Sykjr3pH79GdiQ583xxU60L3Re0ibbpMtvegKWJkzTpsucxGL-nZ9cw7SA3ZJPBZnD2CC5RoNGc/s1600/TKB-Loading-3.gif
Biru
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ4hjl4dNiKhkg-8bgWmm1PtHjTuzBg9L0zoBqv86LDCR4_iUiRzWGRlbwucpOP4SQC0dlKNx6k0HI0F6JHReTfgKsXFt2Qr1hUxS6hpf6RJ59DMKY-1pE7UdkiTFhxmKmxSo6mymmLGbL/s1600/TKB-Loading-Blue-1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGE262D1Yg_FXzd7lnHRaZCsgtfTtvMYh822gexyzuxq36t4WpkEosDfIeAgyFvviYIToWEvfEu1uOHk7qUJnzz8lKSOpuX3p-R5ZsxJt_1ZxD5l42Czu44-m1frqHZ5wLwXyhOSiU4xEy/s1600/TKB-Loading-Blue-4.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgkiuOw1_q_LxAzqmjHY0g9GOnRGU7QJ4pOy3oyEb9SkBYfEmK4AipbekjotAvj0JbsQLeR7VZ9tzSmfNygBq7P7VvbZzU01c0jBbpLXozR0FFGygo5MIM86JG-1wZMOoqo1pMAFoRsjK6/s1600/TKB-Loading-Blue-5.gif
Hijau
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1MGO_DyNbFSFafMZiu6WfYyya2wktS17YKwvNN3VdzlOj4e8SfHheProrgMbvJPu9d9EMJ-Vw_smmlsqg_9DFbkoxHmdOjn4zpOUZPbYDORggm4Yv1iyk05qEpzK2z6IPnH0v0xcxFTIn/s1600/TKB-Loading-Green-1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjARmGRp2bGq9YMFhhZJX66nEmTqjnPDi-Jf7rnhepn9ySacMwop8x4ZBXIqY8HbTvUDjYabIvb4ork2eWrz7YmVjhHM08jKie53Ekj6uEqmruq8PpIzUVzS3UyFNqlBesrI8GqCJKKK_5a/s1600/TKB-Loading-Green-2.gif
Lainnya
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR3TlWWSI0EQ5_Q8U25Mpn_L6pSB3v-ay5QVWYbmDuxZtolidbFExkTs0ozJbqLb3sxmynxU8Vbhgdf8Dk8pe56jMOwENAFd-V15_d8oKkh7GTq-jR2yaUg5GnAY2V6KPijQCC75SUaoY2/s1600/TKB-Loading-other.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidlCCo-_2ho1p-fdv-6N5rTrDsLxxBZj8zEv5zpNj8RFEfnDs_l6idhSR6GrepY9XrjvDSPJlwEGWHRDtgrTuYEIjWlYQCx-UEf9c-bbXGTtxVRGsJ16a3DsQbVMNYQw7_2KB4rgphkOCf/s1600/TKB-Loading-other2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1I53LEvZE5U6-UoXkYPxu_TAEYNTq-pCKM4k8z8bM9EKSFWtACYmSAnE-F3ILlNvBLZMo805KRs7IhhCw1A8gcQHlnGoQZh0GGdgQXVfjKGcwIM2ryEX18TZsYjaYSzRA4Ut2Godxsl1/s1600/TKB-Loading-other3.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRMzvsfIjxGU3FTovx2VpgiExldxMlPhH3n5OjzxmX4Jv8jTF-4PIRRNJWH3R-MXcG4cKXr1E8BT1n3xLseEiUXQp1gBt28R4vpPfGD5DQSIoQ-5CTYLgJ6OY5IV6Vy5B2H7LSEZypWyT9/s1600/TKB-Loading-other4.gif
Semoga bermanfaat.
Wassalam.
0 comments :
Tinggalkan Komentar Anda di Sini:
Komentar yang mengganggu, berbau SARA, porno, mengandung iklan dan mencantumkan link aktif akan segera kami hapus.
Terimakasih atas perhatiannya.