Home » Blogger Hack » Cara Membuat Lazy Page Loading Effect ke Blogger

Cara Membuat Lazy Page Loading Effect ke Blogger

Kali ini Blog Gado Gado akan menampilkan artikel berjudul Cara Membuat Lazy Page Loading Effect ke Blogger. Dengan artikel Cara Membuat Lazy Page Loading Effect ke Blogger ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci Cara Membuat Lazy Page Loading Effect ke Blogger kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel Cara Membuat Lazy Page Loading Effect ke Blogger selengkapnya:

loading_bar.gif (562 × 126)
D-Copy Blog's | Jika Anda telah melihat Google Dinamika Tema View untuk Blogger, maka Anda mungkin menyadari fakta bahwa sebelum seluruh template akan terkena ICON Jquery Kecil pemuatan muncul yang benar-benar menyentuh perhatian kita semua. Misalnya, Anda berpikir untuk memainkan game PC jadi sebelum Anda bisa mulai bermain Anda harus melalui bagian LOADING. Demikian pula, kita akan memasukkan Efek Jquery Memuat luar biasa untuk Blogger kami sehingga pengunjung kami tidak akan melihat gambar atau konten mendapatkan beban sebaliknya kita akan menunjukkan kepada mereka loading halaman Jquery lucu yang benar-benar akan menghibur mereka. Hari ini kita akan meningkatkan akun Blogger Anda dengan cara membuat lazy page loading effect ke blogger yang akan bermuka masam menarik perhatian pembaca.

Fitur yang dimiliki Lazy Page Loading Effect :

  • Ini adalah membuat search engine yang ramah sehingga tidak akan mempengaruhi kecepatan situs apapun.
  • Hal ini kompatibel dengan browser hampir setiap yaitu Chrome, Firefox, Internet Explorer, dan lain-lain
  • Ini memiliki efek memuat yang beragam, sehingga Anda dapat memilih sesuai dengan kebutuhan keinginan Anda.
  • Hal ini fleksibel coding sehingga Anda dapat menyesuaikannya tanpa keraguan apapun.
  • Ini juga akan membantu blog mereka yang mengambil sedikit waktu untuk memuat karena fitur pemuatan akan menjaga pengunjung Anda tertarik pada blog Anda.

Langkah :

  1. Buka akun Blogger Anda.
  2. Masuk ke menu Template >> Edit HTML >> Proceed
  3. Sekarang dalam cari kode dibawah ini :
]></b:skin>
     4.  Pastekan kode dibawah ini diatas pada kode diatas :

/*  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 dibawah ini :
</head>
     6.   Pastekan kode dibawah ini, diatas pada kode dibawah ini :

<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 diatasnya :

  • Kode ini ditampilkan jika Anda ingin menunjukkan ini 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.
http://1.bp.blogspot.com/-l8Ot6w2IFvQ/UE4K-JAdQpI/AAAAAAAAFM0/aGUEayOCejo/s1600/MBL-Loading-1.gif
 
http://3.bp.blogspot.com/-FA2RWStvA88/UE4K-0jbwmI/AAAAAAAAFM8/IiNkaVjnUng/s1600/MBL-Loading-2.gif
 
http://2.bp.blogspot.com/-3RFuLj1RgxA/UE4K_7DbkfI/AAAAAAAAFNE/RTHE-AygGlA/s1600/MBL-Loading-3.gif

http://3.bp.blogspot.com/-GFGEKhfmVrI/UE4LAQuhxrI/AAAAAAAAFNM/ibrUuDyPg1c/s1600/MBL-loading-4.gif

http://1.bp.blogspot.com/-y6MhdpiSXZw/UE4LBRH76LI/AAAAAAAAFNQ/DAsL4Hc8Opc/s1600/MBL-loading-5.gif
http://2.bp.blogspot.com/-QjD-a18CPCU/UE4LCHdGNmI/AAAAAAAAFNY/QVslh5SBCkg/s1600/MBL-loading-6.gif

Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul Cara Membuat Lazy Page Loading Effect ke Blogger dengan keword yang masuk Blogger Hack . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.

0 komentar:

Poskan Komentar