Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Memasang Efek Preloader Pada Blog


Ada banyak cara untuk mempercantik tampilan blog atau website, salah satunya yaitu dengan memasang efek preloader yang satu ini. Saya akan memberikan tutorial bagaimana Cara memasang preloader pada blog. Bagi kamu yang belum paham atau belum tahu cara memasang efek satu ini yuk simak !

Sebelum memasang efek preloader ini apakah kalian semua sudah pada tau Apa itu Preloader? dan Tujuannya? Jika belum pada tau saya akan menjelaskannya sedikit tentang preloader ini.

Jadi preloader merupakan sebuah fitur yang menampilkan proses load pada sebuah tampilan website, dengan tujuan mempercantik tampilan sebuah website. Efek preloader ini dibuat dengan HTML, CSS, dan Javascript. Secara otomatis ketika kita membuka sebuah website akan melakukan proses load page pada tampilan awal. Jika proses load gagal maka akan tampil blank atau loading yang tak berhenti. Untuk penjelasan lebih lengkap silahkan baca Apa itu Preloader? dan Tujuannya?.

Memasang Efek Preloader pada Blogger

Pada tutorial ini saya menggunakan sebuah library Javascript yang bernama JQuery. Versi yang digunakan yaitu 1.11.2, jadi dipastikan bahwa efek preloader ini akan berjalan pada JQuery library versi 1.11.2 atau ke atas.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js' type='text/javascript'/>

Jika kalian belum memasang atau sudah dipasang silahkan ganti / pasang scriptnya terlebih dahulu setelah tag <body> atau sebelum tag </body>. Untuk cara pemasangannya yaitu kalian harus login terlebih dahulu ke akun blogger, pilih Tema, untuk tampilan blog versi terbaru, klik tanda panah arah bawah yang di samping tombol SESUAIKAN, pilih Edit HTML.
Lalu masukkan kode JQuery-nya,

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

Kalian bisa meletakkan kode tersebut tepat dibawah script cdn JQuery.

Lalu kode HTML, fungsi dari kode HTML disini sebagai pengenal untuk JQuery dan CSS.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- PRELOADER -->
<div id='preloader'>
<div class='tb-cell'>
<div class='page-loading'>
<div class='item-icon'/>
</div>
</div>
</div>
<!-- END / PRELOADER -->
</b:if>

Kalian harus meletakan code tersebut tepat dibawah tag <body>, kenapa ditempatkan di awal? karena proses load terjadi di awal, jadi harus diletakkan di awal. Oh iya, untuk tanda "<!-- -->" ini adalah tanda komentar, fungsinya sebagai penanda, kode ini tidak akan dieksekusi.

Step selanjutnya adalah memasukkan kode CSS.

/* Preloader */
#preloader { position: fixed;display: table;text-align: center;width: 100%;height: 100%;top: 0;left: 0;background-color: rgba(255, 255, 255, 0.85);z-index: 999999999;}
#preloader .page-loading .item-icon { width: 40px;height: 40px;margin: 25% auto;opacity: .9;border-right: 3px solid #7f00fd;border-bottom: 3px solid transparent;border-radius: 100%;-webkit-animation: spin 1s linear infinite;-moz-animation: spin 1s linear infinite;-o-animation: spin 1s linear infinite;animation: spin 1s linear infinite;}
@keyframes spin {0% {transform: rotate(0deg);}50% {transform: rotate(180deg);}100% {transform: rotate(359deg);}}
@-webkit-keyframes spin {0% {-webkit-transform: rotate(0deg);}50% {-webkit-transform: rotate(180deg);}100% {-webkit-transform: rotate(359deg);}}
@-moz-keyframes spin {0% {-moz-transform: rotate(0deg);}50% {-moz-transform: rotate(180deg);}100% {-moz-transform: rotate(359deg);}}
@-o-keyframes spin {0% {-o-transform: rotate(0deg);}50% {-o-transform: rotate(180deg);}100% {-o-transform: rotate(359deg);}}

Letakan kode CSS tersebut tepat sebelum tag </b:skin>. Untuk tanda "/* */" ini juga tanda komentar.

*Kalian bisa mengganti warna pada preloader tersebut di kode CSS-nya.

Jika sudah meletakan semua kode di atas silahkan klik tombol Simpan. Lalu silahkan buka blog kalian atau di refresh.

*Jika tidak muncul atau tidak pas dengan tampilan blog kalian, mungkin terdapat kesalahan atau lebih tepatnya posisinya tidak sesuai, jadi disini ada sedikit usaha untuk memperbaikinya. Jika kalian tidak mengerti silahkan tanya di kolom komentar.

Muhammad Rifki Apriansyah
Muhammad Rifki Apriansyah Seorang pelajar yang sering berselancar di internet, gemar teknologi, dan menyukai Front-End.

Posting Komentar untuk "Cara Memasang Efek Preloader Pada Blog"