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 pahami terlebih dahulu Apa itu Preloader? dan Tujuannya? Jika belum pada tau saya akan menjelaskannya sedikit tentang preloader ini.
Jadi preloader merupakan sebuah animasi 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?.
Artikel terkait: Cara Membuat Widget Subscribe Pada Blog
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 kamu belum memasang atau sudah dipasang silahkan ganti / pasang scriptnya terlebih dahulu setelah tag <body> atau sebelum tag </body>.
Untuk cara pemasangannya yaitu kamu 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>Kamu 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>Kamu 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.
Kamu 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 kamu atau di refresh.
Artikel terkait: Apakah Blogger Harus Menggunakan Hosting?
Jika tidak muncul atau tidak pas dengan tampilan blog kamu, mungkin terdapat kesalahan atau lebih tepatnya posisinya tidak sesuai, jadi disini ada sedikit usaha untuk memperbaikinya. Jika kamu tidak mengerti silahkan tanya di kolom komentar.
Posting Komentar untuk "Cara Memasang Efek Preloader Pada Blog"