×

search by faronesia.com

Faronesia
Profesional and Specialist ReDesign Template blogger

Cara Membuat Preloader Pada Blog VERSI 2

Faronesia.com - Hai sobat blogger, pada kesempatan yang lalu saya telah memberikan tutorial singkat kepada anda yaitu cara membuat preloader pada blog versi 1, nah kali ini saya akan memberikan tutorial lagi cara membuat preloader keren untuk blog sobat. Apasih preloader blog? Apa fungsinya pada blog? Apa dampaknya? Bagaimana cara pemasangannya? Dan berbagai pertanyaan lainnya akan saya jawab pada artikel ini, maka simaklah dengan seksama.

Preloader blog

Apakah anda pernah melihat tampilan loading pada sebuah halaman web sebelum menampilkan isi kontennya? Nah seperti itulah penampang preloader blog. Preloader adalah sebuah tampilan yang memberikan informasi sumberdaya blog yang sedang dimuat saat itu juga.

Fungsi preloader blog

Preloader / loading memiliki berbagai fungsi salah satunya yang telah disebutkan pada poin pertama yaitu memberikan informasi sumberdaya yang sedang dimuat, memperindah tampilan blog agar pengunjung tidak bosan, membuat web / blog terlihat lebih profesional, membantu menyamarkan proses load page (sumberdaya) website, meningkatkan kenyamanan pengunjung dan masih banyak lagi.

Dampak pemasangan preloader blog

Selain memiliki fungsi yang banyak, preloader juga memiliki dampak yang tergolong tidak bagus untuk blog. Dampak yang ditimbulkan dari pemasangan preloader / loading pada blog akan menambah beratnya proses load page atau pemuatan sumberdaya hal ini dikarenakan penambahan kode dan animasi bergerak pada blog. Namun dampak ini seimbang dengan fungsi yang diberikan pada poin diatas.

Cara membuat preloading pada blog

  • Masuk ke dashboard blog 
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML Cari kode </head> 
  • lalu tambahkan kode CSS dibawah ini tepat diatas kode </head>
<style>
#faroloading{overflow:hidden;
background:#fff;left:0;
right:0;
top:0;
bottom:0;
position:fixed;
z-index:9999;
}
.spinner{
position:absolute;
top:50%;
left:49.5%;
z-index:1;
height:20px;
width:20px;
transform:translate(-50%,-50%);
}
[class^=&quot;ball-&quot;]{position:absolute;display:block;left:30px;width:6px;height:6px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.ball-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.ball-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.ball-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.ball-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.ball-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.ball-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.ball-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.ball-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
@media screen and (max-width:800px){.spinner{left:43%}}
</style>
  • Selanjutnya cari kode <body>
  • lalu tambahkan kode HTML dibawah ini tepat dibawah kode <body>
<div id='faroloading'>
<div class='spinner'>
<span class='ball-1'/>
<span class='ball-2'/>
<span class='ball-3'/>
<span class='ball-4'/>
<span class='ball-5'/>
<span class='ball-6'/>
<span class='ball-7'/>
<span class='ball-8'/>
</div>
</div>
  • Selanjutnya cari kode </body>
  • lalu tambahkan kode HTML dibawah ini tepat diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
// faroloading
$(window).load(function(){$(".spinner").fadeOut(),$("#faroloading").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
  • Selesai, lalu simpan template

Request tutorial lain?silahkan masuk ke halaman Tanggapan


Demikianlah mengenai Cara Membuat Preloader Pada Blog VERSI 2 semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.

Post a Comment

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup
×

Faronesia

Kami senantiasa membantu memecahkan masalah seputar desain blog melalui request tutorial

Request tutorial