Administrator situs blog Blogger ingin menggunakan plugin efek boot dalam transisi halaman dan memuat periode waktu. Pada artikel ini, saya akan membagikan informasi tentang bagaimana plug-in frontend telah ditambahkan ke situs blog dan cara kerjanya, karena halaman situs blog diunggah di latar belakang.

Jika waktu buka halaman situs blog lebih dari 2 (dua) detik, Anda dapat menggunakan plugin info pra-muat halaman. Jika halaman blog dimuat dalam 2 (dua) detik atau kurang, Anda tidak perlu menggunakan plug-in informasi preload.

Plug-in boot halaman menginformasikan kepada pengunjung Anda tentang pemuatan halaman blog Anda pada halaman boot ketika halaman-halaman situs blog Anda dimuat di latar belakang, dan secara otomatis ditutup ketika halaman dibuka.

Saya telah berbagi plug-in pra-instalasi halaman dengan CSS3 dan kode javascrip sederhana, dan kami telah menginstal halaman blog dengan & nbsp; tidak mempengaruhi kecepatan. Ikuti langkah-langkah di bawah ini jika Anda ingin menginstal plugin boot halaman di situs blog Anda.

Bagaimana Cara Menginstal Plugin Preloading Halaman ke Blog Blogger?

Masuk ke akun Blogger Anda dan klik pada Tema & Buka halaman Editor Tema dengan mengikuti Edit HTML dan ikuti langkah-langkah di bawah ini.

jQuery 1.7.1 Versi

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

Blogger bekerja dengan plug-in preload halaman jQuery 1.7.1 versi. Oleh karena itu, ganti kode jQuery Google Apis pada halaman editor tema Anda dengan versi di atas.

Tambahkan kode boot halaman berikut ke masing-masing halaman editor tema Anda, dalam urutan berikut.

Kode CSS ke halaman depan </head> atau </head> Tambahkan kode ke baris.
Halaman depan kode HTML <body> tambahkan satu baris di bawah kode.
Kode JQuery untuk preload halaman </body> atau </body> Tambahkan kode ke baris.

Plugin Preloading Halaman

Atur blog Anda dengan memilih add-on boot yang paling tepat untuk situs blog Anda. secara terpisah CSS, HTML, dan kode jQuery disertakan untuk setiap plugin.

Plugin Preloaded Halaman - 1

CSS

<style type='text/css'>
/*<![CDATA[*/
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.loader{display:inline-block;width:30px;height:30px;position:relative;border:4px solid #f44336;top:50%;animation:loader 2s infinite ease}
.loader-inner{vertical-align:top;display:inline-block;width:100%;background-color:#f44336;animation:loader-inner 2s infinite ease-in}
@keyframes loader{0%{transform:rotate(0deg)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}
@keyframes loader-inner{0%{height:0%}25%{height:0%}50%{height:100%}75%{height:100%}100%{height:0%}}
/*]]>*/
</style>

HTML

<div id='preloader'>
<div class='spinner'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
</div>

jQuery

<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

Plugin Preloaded Halaman untuk Blogger

Notifications