Cara Membuat Lazy Page Loading Effect ke Blogger
Labels:
Tips and Trik
Cara Membuat Lazy Page Loading Effect ke Blogger - Loading efek pada blog ini adalah widget yang dimana membuat tampilan blog Anda akan semakin indah dimata pengunjung Anda, tentu saja dengan pengunjung yang memakai koneksi internet yang baik. Untuk itulah saya menuliskan Cara Membuat Lazy Page Loading Effect ke Blogger untuk Anda.
4. Pastekan kode dibawah ini tepat diatas kode ]></b:skin>
Buka akun Blogger Anda.
Masuk ke menu Template >> Edit HTML >> Proceed
Sekarang dalam cari kode dibawah ini :
]></b:skin>
]></b:skin>
/* D-Copy Lazy Page Loading Effect ( http://d-copy.blogspot.com) */
#mbl-lazyloading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FDFEF8 url(Loading-GIF-Here) no-repeat center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.MD #mbl-lazyloading { display: none; }
@media only screen and (device-width: 768px) {
#loading {
position:absolute;
width:1040px;
min-height:768px;
}
}
#mbl-progress-bar {
position: absolute;
top: 0; left: 0;
background: #de1301;
opacity: 0.8;
width: 0;
height: 18px;
}
#mbl-loader {
height: 100%;
display: none;
}
5.Cari kode </head>
6.Pastekan kode dibawah ini,tepat di atas code </head>
<script>
(function($){
$("html").removeClass("MD");
$("#header").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#mbl-progress-bar").stop().animate({ width: "100%" },600,function(){
$("#mbl-lazyloading").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script>
7.Cari lagi kode </body>
dan pastekan kode dibawah ini tepat diatasnya : Kode ini ditampilkan jika Anda ingin menunjukkan efek pemuatan yang hanya ada di Home Page. (Recommended)
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://d-copy.blogspot.com">D-CopyBlog</a></div></div></b:if>
Paste code berikut jika Anda ingin melihat efek loading pada setiap halaman dari blog Anda.
<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://d-copy.blogspot.com">D-CopyBlog</a></div></div>
TIP:
Anda harus memilih apakah Anda ingin menampilkan efek pemuatan hanya pada homepage atau website masing-masing dan setiap yang ada di blog Anda. Menurut kami, Anda harus menjaga efek pemuatan di situs Anda karena efek beban berulang dapat mengganggu pengunjung Anda.
Sekarang dari coding CSS di atas Ganti Loading-GIF-Here dengan salah satu efek pemuatan berikut animasi yang paling Anda sukai
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFIC8FZqw9lS1eN5uMTxzDyxYRV6nygvtrCXP03rYib6cozrE7igVv3wv-wBRnA5tGANTiwLD_Rx7SkddIAIBMC5iNm-jLngdl8Gj93NWByILDNoP-CK0v5T3pA-DCcSLigCA0bmIxJ-E/s1600/MBL-Loading-1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsdRT6zDYxba8dF2zwUkqefnQSYmb7KpiS8h5OsTv594JFawsTtxc8_nSV_Nr-zVW7znDgeuMZkDmBhpLaL3zPlwFvF-czKyFj5u6SoLENvRy0n9X3Urd3EDGAWai2i3u4HdDz9OjGf10/s1600/MBL-Loading-2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjUoUMsgy1u__OetmdCNzgT5iM1UbJScJZvJlhdcL_vxXkjHWPw0iJVEr0fJAnw6OzxKcDloEM2JSAs2UA3Gb_Hbdk9UlY4NKpaMHR2mz7toX5h7h7jA-vSmfFkvYwIZOeHDb00EXgTtA/s1600/MBL-Loading-3.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLezIbsJjQdinT7sz4AKp3jYbUvqTdpdOM4BDQI6a1Hy3vsT1GQTrUSg4jtEtaIOcnuuDfvn8lC9XdwyCoR48IqqPl3Kw_xJGkIpmpDyz2zHt4f8gYLD6MRjbDXNUjlkYMENjArZaZses/s1600/MBL-loading-6.gif
Maka demikianlah artikel Cara Membuat Lazy Page Loading Effect ke Blogger, semoga dapat membatu Anda untuk lebih paham lagi. Terima kasih sudah membaca artikel diatas..
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment