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 Sinidengan 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/AVvXsEiHb0Nf36c0-z74Lggn3PklvARmHcJtx3Kw738IAuP5Hw8uZqBJvdxP4Vh70t6pEYEdNcNP4gmEYWs9SWnWyLTsIL7UAaQ8_oP8IHzflauA4IBBSjH804IYuXLVCjuW1OnAf9rh5JKMXEVs/s1600/TKB-Loading-1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8RvnAbRh9bPLFs277gAc0tB07Id_36VsoZd4oaOuRG9CAoMfJeLw_ijXH81E7Ggle0Ix17zaKA582I7h7ldlLShOwHHUiv0LJUbmJzbn1mTFgWAMJaf6IWnxyqTEXxW48zmgonZfv7htv/s1600/TKB-loading-2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOyYthJDPuwVbcYQd-ET0L-AW6Qi244uZNZDlEECXIW1_PCyazyaUpSw4d_GCvr8e72jtCeyPTCkSs_pB0M51P4cdc6LwRdN70JSMPzqh9cNC5uBUbUh46zzrrkuP8nkcYAU3LpyTV4EkK/s1600/TKB-Loading-3.gif
Biru
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbRhhM09CcwejRf0BS9SbfvkgDyGNJU-w1AOuHOSh2BtDvc0aLY38fKCP5CZrH1-cqf8PdPCjfo3DX0xR-wBAu-Duwz3lG_46P6m2BYuKkeDLae9QlFa_Qle1iDnAMR4x541rY94qshSIm/s1600/TKB-Loading-Blue-1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinTBm6RgbwvVqCyulu84jiptVlU186O5kwIIBuTrPau6sXKCh9hpzfohEsGVyde_UFWz7gQzdfu6Wyx2iIXToCxyEvPPAjdBNVehOd5iLaYXQdF09gGhVlNYMNXQzBLqiqbyAsotFdlpwM/s1600/TKB-Loading-Blue-4.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLtWCbKxPutz7v2z3rhcBZCZGtnfF34wt075d4rydNEEVzyw4-PByfnzQXWMNRuEfEHp1ireFArIfp4daSyS3Ix-2PMsN1gaqOm9y3bDXIwEkj5t6p4mQcwqtv08ikGc_kwKgNGORrLgs7/s1600/TKB-Loading-Blue-5.gif
Hijau
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyo9eHZ1pF20ph-Mq89Mdx9hEcMvJbMbDpweHIn0gMI63JylZ-o31pRCNb9sRj9fxyUS4UXjxHwBY3mHMRHW8zS5UcIwflJ-a2Z1KPcp0ky9P8eDeMtDJ3VhCyiSOYuA6YpJpGY0K63l2c/s1600/TKB-Loading-Green-1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI1TAoyQE0-JzhIfQVxgzm238p3fxBsZRmAKK6vDs9zGD3Og2o4Ge7qyunTsczSciVMinFGihTmOwbAgRvMrKyiQJEOnNYl0EU85GxSAdp-CQvDYyQyNMn7twJpLyyPeSSss7P2roqPbXq/s1600/TKB-Loading-Green-2.gif
Lainnya
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPa-4CWKjx4AnaI2wYaSfu4QnXXRBSwjnNpxop3nGbj2XbSxWipBJQLA0lAcgj7MnpDR6FC404wFwQ-e1lNrLFpV6UU74GgZBS8nXP0nLskeEwu5vQFUfvB8GTcXw6JAO4SIr_V2kUICvZ/s1600/TKB-Loading-other.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDocVddArThXMpumMDYzDBLiQNRu7QD9IxQS-6AbqvUCmGSxQjk7ZNS023fQckNDh7rER40yx-oXrhzKbYOCwaxCDy5RyLZPRc13Fj5aQcqizjBxU2fCpQf5kJIfWywoxoijddk91OKQGG/s1600/TKB-Loading-other2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQAC7_MgKyRjHp1ti2y1p-H_ZYAglYiPT8vyEkX_sp-SPXTXpUROSrNrwx575VyIBn7hc5J5E8WatVk8NCGR2L9nKu6Jmcdbo-_K6DbGaYFPpLf5FEpflLZMD1O71okCNiUlX8f975TtbQ/s1600/TKB-Loading-other3.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEkOnWSb9YIa_b_KK7fHn6tCx-w0m1ZMNr26rEzrdkCBYXc_ZoCYXzgZl0Kr7kUtLmgbjRY20NnqXMJi_R9328cJ1tg77uyAaRhVVZsI47mtIlS2Sj9ZRjlSEc2C2o4uCAD5sOvngoYZRJ/s1600/TKB-Loading-other4.gif
Semoga bermanfaat.
Wassalam.
0 Response to "Memodifikasi Loading Page Blog Dengan Efek"
Post a Comment