Tuesday, January 30, 2018

Cara Memasang Page Load Animasi Pada Website Dan Blog

Cara Memasang Page Load Animasi Pada Website Dan Blog

Tags

Memasang Page Load Animasi Pada Website Dan Blog
Page Load

Tips dan trik seputar mempercantik tampilan website atau blog memang banyak sekali caranya. Setelah isi konten yang lebih utama hal yang perlu di perhatikan selanjutnya adalah tampilan situs. Jika tampilan menarik pengunjung akan betah lama-lama bernavigasi membaca artikel blog kita. Begitu juga sebaliknya jika tampilan semraut monoton maka pengunjung akan malas ber navigasi pada blog kita. Sebetulnya banyak cara yang bisa di lakukan untuk merapikan tampilan dari sebuah situs atau blog.

Kali ini kita akan mengulas tentang cara mempercantik tampilan website atau blog dengan menambahkan page load. Sederhananya page load itu adalah efek loading ketika bernavigasi pada situs atau blog. Contoh sederhananya pernahkah kamu nonton video misalnya youtube ketika singnal jelek maka video yang di putar akan buffering loading ada lingkaran berputar-putar. Nah page load yang saya maksud itu kira-kira mirip seperti itulah.

Berikut saya punya dua jenis tampilan untuk page load yang bisa di terapkan pada blog kamu. Kamu bisa pilih salah satu atau boleh kedua-duanya. Tapi saya sarankan pilih salah satu saja biar tidak terlalu rame. Yang pertama adalah page load jenis animasi full page dan yang kedua page load horizontal seperti blognya mbak arlina. Baiklah tanpa panjang lebar lagi mari kita bahas satu persatu cara memasangnya pada blog.

1. Page load animasi.



Memasang Page Load Animasi Pada Website Dan Blog
Contoh Animasi

Penampakan animasinya sama dengan gambar diatas. Untuk memasang page load animasi ini langkah pertama yang harus kamu lakukan adalah login ke dashboard blog kemudian pilih thema dan pilih edit HTML. Lalu copy kode CSS berikut ini dan letakan sebelum kode
]]></b:skin>
pada template kamu.

/* Loading Efek */
#qpage-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('https://1.bp.blogspot.com/-CAlhhie__jE/WkiFiqsVl5I/AAAAAAAADp4/Hycr0g6qWp8vfbGvSt2xcgCAexGytRSIACLcBGAs/s1600/Loadme-page.gif') no-repeat 50% 50%;
padding:1em 1.2em;display:none}

Langkah selanjutnya adalah copy kode javascript berikut ini dan letakan sebelum kode tag penutup template kamu.
</body>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="qpage-loader"></div>');
$(window).on("beforeunload", function() {
$('#qpage-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>

Selanjutnya simpan template kamu dan lihat hasilnya. Caranya refres halaman blog kamu sampai di sini seharusnya kamu sudah berhasil memasang page load animasi pada blog. Untuk yang ke dua adalah memasang page load horizontal warna warni pada blog.

2. Page load horizontal.



Memasang Page Load Animasi Pada Website Dan Blog
Contoh

Contoh penampakanya bisa kamu lihat kotak merah pada gambar di atas. Langkahnya hampir mirip dengan cara di atas. Buka dashboard blog kamu pilih thema dan edit HTML. Kemudian copy kode CSS berikut ini dan letakan sebelum kode
]]></b:skin>
pada template kamu.

/* CSS Loader */
.cssload-loader{position:absolute;bottom:0;left:0;right:0;margin:auto;z-index:1000}
myloader [role="progressbar"][aria-busy="true"]{position:absolute;top:0;left:0;padding-bottom:3px;width:100%;background-color:#159756;-webkit-animation:preloader-background linear 3.5s infinite;animation:preloader-background linear 3.5s infinite}
myloader [role="progressbar"][aria-busy="true"]::before,myloader [role="progressbar"][aria-busy="true"]::after{display:block;position:absolute;top:0;z-index:2;width:0;height:3px;background:#afa;-webkit-animation:preloader-front linear 3.5s infinite;animation:preloader-front linear 3.5s infinite;content:''}
myloader [role="progressbar"][aria-busy="true"]::before{right:50%}
myloader [role="progressbar"][aria-busy="true"]::after{left:50%}
@-webkit-keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@-webkit-keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}
@keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}

Langkah selanjutnya copy kode javascript berikut ini dan letakan diatas kode body penutup template kamu.
</body>

<script type='text/javascript'>
//<![CDATA[
// Loader
$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});
//]]>
</script>

Langkah selanjutnya copy kode berikut ini dan letakan di antara body pembuka
<body>
dan body penutup template.
</body>

<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'></div>
</myloader></div>
<div class='page-loader' id='pagingx'></div>

Untuk contoh kamu bisa melihat cara penempatan saya berikut ini. Sebetulnya terserah kamu mau taro di mana yang penting di antara kode body pembuka dan penutup template.

<!-- Contoh Penempatan-->

<div class='nav_wrapper' id='header' itemscope='itemscope' itemtype='https://schema.org/WPHeader'>
<div class='maxwrap header'>
 <div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'></div>
</myloader></div>
<div class='page-loader' id='pagingx'></div>
 <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
 <div class='icon-searchku'>

Terakhir simpan template dan lihat hasilnya dengan me refres halaman blog kamu. Sampai di sini seharusnya kamu sudah berhasil memasang page load horizontal pada template. Jika masih ragu silahkan jangan sungkan untuk bertanya pada kolom komentar. Ingat ya memasang page load di atas pilih salah satu saja biar tidak terlalu rame dan membebani loading blog. Tapi kalo kamu ngeyel ya udah boleh kok dua-duanya hahaha.

A man is known by the companion he keeps !

Buka Komentar

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
EmoticonEmoticon