Cara Membuat Efek Preloading Blog


Cara Membuat Efek Preloading Keren Pada Blog. Ada banyak cara para webmaster untuk dapat mempercantik tampilan blognya, yaitu salah satunya dengan cara membuat efek preloading pada blog.

Efek preloading ini merupakan transisi yang akan muncul secara otomatus ketika sebuah halaman pada blog atau website dibuka. Tapi, ketika Anda akan memasang efek preloading ini di usahakan yang tidak menghambat atau mempengaruhi kecepatan dari blog.

Cara membuat efek preloading blog yang saya bagikan ini akan membuat kecepatan blog tetap stabil, karena cara ini sangat ringan murni menggunakan CSS dan SVG tanpa gambar.

Artikel lainnya kelebihan dan kekurangan dari domain XYZ

alt="cara membuat efek preloading pada blog"

Cara Membuat Efek Preloading Blog

Sebelum memasang kode yang saya akan bagikan mengenai cara membuat efek preloading ini, kode akan berjalan dengan baik pada jQuery library versi 1.7.1

<code class="language-javascript"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

Silahkan ganti jQuery sobat Anda dengan versi di atas, pada tahap ini saya yakin Anda sudah tahu cara menggantinya.

Setelah selesai Anda pasang dan menggantinya dengan jQuery library versi 1.7.1, kemudian tambahkan kode di bawah ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader")
.delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});

Selanjutnya tambahkan kode berikut ini tepat setelah </head>

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

Kemudian silahkan Anda tambahkan kode CSS ini setelah <style> atau sebelum </style>

/* Preloader */
#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%)}.loaderx{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%}}

Setelah selesai kemudian simpan tema dan lihat hasilnya

Dan untuk melihat hasilnya dari animasi efek preloading ini yaitu sama seperti tampilan animasi loading pada blog ini, namun untuk sekarang saya tidak menggunakannya dengan beberapa pertimbangan.

Untuk hasil atau tampilan efek dari preloading tersebut bisa Anda lihat di bawah ini:


Demikian tutorial cara membuat efek preloading blog yang bisa saya share untuk kali ini, semoga bermanfaat. Terima kasih.

Comments