Skip to main content
Ivhaa Design

follow us

Cara Membuat Loding Navigasi Ala Jalan Tikus Di Blogger

Cara Membuat Loding Navigasi Ala Jalan Tikus

Baca juga:

Jalantikus
Assalamualaikum vivers, tidak sengaja di google saat cari template ivhaa menemukan tutorial baru nih yaitu membuat loding di navigasi ala jalan tikus loding ini sangat bagus untuk blog kita bisa mempercantik blog kita walau ivhaa sendiri di blog ini.

Jika kita penasaran kita langsung aja ke topik gays tidak usah basa basi simak tutorial berikut ini gays.
Langsung saja kita menuju ke tutorial Cara Mudah Membuat Loading Effect Ala Jalantikus
1. Edit template blog kalian, dan copy kode CSS dibawah ini dan paste tepat diatas kode ]]>

/* Page Loader cara-mei*/ .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}}

2. Copy kode javascript dibawah ini dan paste tepat diatas kode 

3. Terakhir copy kode dibawah ini, dan letakkan dimanapun kalian mau. Misalkan dibawah menu navigasi, maka cari kode menu navigasi, dan letakkan dibawah kode menu navigasi, biasanya menu navigasi di akhiri dengan kode
, , dll, tergantung template masing-masing.

4. Save dan lihat hasilnya.

Jika kalian binggung soal penempatan kode nomor 4, silahkan berkomentar dibawah, akan saya pandu sampai bisa.
Sekian tutorial kali ini, semoga bisa mempercantik blog kalian, dan membuat kalian semangat dalam dunia blog. Jangan lupa share ke teman-teman kalian. Happy Blogging ^_^

You Might Also Like:

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