RISWAN NET
  • Home
  • Content Placement
  • Tekno
    Perbedaan JPG dan JPEG pada Format Gambar

    Ini Dia Perbedaan JPG dan JPEG pada Format Gambar

    Keuntungan Serta Resiko dari Keyboard Protector

    Keuntungan Serta Resiko dari Keyboard Protector

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Jenis Jenis Komputer Serta Pembahasannya

    Jenis-Jenis Komputer Serta Penjelasannya

    Bagaimana Cara Membuat Shortcut URL Website di Desktop

    Cara Membuat Shortcut URL Website di Desktop

    Cara Transfer FIle Dari Komputer ke RDP

    Cara Transfer atau Copy File dari Komputer ke RDP

    Trending Tags

    • Asus X555
    • Komputer
    • CES 2017
    • Xiaomi
  • Internet
  • Komputer
  • Bisnisnew
No Result
View All Result
  • Home
  • Content Placement
  • Tekno
    Perbedaan JPG dan JPEG pada Format Gambar

    Ini Dia Perbedaan JPG dan JPEG pada Format Gambar

    Keuntungan Serta Resiko dari Keyboard Protector

    Keuntungan Serta Resiko dari Keyboard Protector

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Jenis Jenis Komputer Serta Pembahasannya

    Jenis-Jenis Komputer Serta Penjelasannya

    Bagaimana Cara Membuat Shortcut URL Website di Desktop

    Cara Membuat Shortcut URL Website di Desktop

    Cara Transfer FIle Dari Komputer ke RDP

    Cara Transfer atau Copy File dari Komputer ke RDP

    Trending Tags

    • Asus X555
    • Komputer
    • CES 2017
    • Xiaomi
  • Internet
  • Komputer
  • Bisnisnew
No Result
View All Result
RISWAN NET
No Result
View All Result
Home Blogger

Cara Membuat Efek Loader Berwarna

Deni Riswana by Deni Riswana
16 Juni 2017
in Blogger
8 1
4
9
SHARES
432
VIEWS
ShareTweetSend

Cara Membuat Efek Loader Berwarna – Selain berfungsi sebagai icon loading blog, efek loader berwarna ini juga dapat mempercantik tampilan blog. Efek loader berwarna ini sudah digunakam oleh google dan banyak situs lainnya, seperti Arlina Design.

Dulu animasi loading dibuat menggunakan gambar animasi berekstensi gif, kemudian gambar diletakan pada halaman yang ingin dimunculkan animasi loading. Tapi seiring berkembangnya dunia web development, sekarang efek loading bisa dibuat menggunakan css dan tambahan javascript.

Cara Membuat Efek Loader Berwarna
Pada kesempatan ini saya akan berbagi tutorial cara membuat efek loader berwarna pada blog. Efek loader ini akan muncul tepat di bawah header ketika blog sedang entransfer data dari source. Dengan menampilkan animasi warna yang dapat mempercantik tampilan blog. Demo efek loader berwarna ini bisa dilihat di blog saya.

Cara Membuat Efek Loader Berwarna

Berikut langkah membuat efek loader berwarna pada blog

Langkah Pertama
Simpan kode berikut tepat di atas ]]></b:skin>

/* Riswan Net Page 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 Kedua
Kemudian letakan kode berikut sebelum tag penutup </body>

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

Langkah Ketiga
Selanjutnya letakan kode javascript berikut di bawah header atau di bagian di mana efek loading akan muncul. Contoh saya meletakannya di bawah script menubar.

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

Langkah Keempat
Terakhir simpan template

Nah sekian tutorial cara membuat efek loader berwarna pada blog. Semoga tutorial singkat ini bisa membantu sobat blogger semua dalam meningkatkan blognya. Apabila saya salah atau ada yang kurang jangan lupa untuk mengingatkan saya di komentar. Terima Kasih.

Deni Riswana

Deni Riswana

Pengembang Digital dan Content Creator. Saat ini sedang menempuh pendidikan strata satu di Universitas Pendidikan Indonesia (UPI) dengan program studi Bisnis Digital.

Related Posts

Cara Membuat Jump Link di Blog
Blogger

Cara Membuat Jump Link di Blog dengan HTML

24 Januari 2020
Cara Submit URL di Google Webmaster Yang Baru
Blogger

Cara Submit URL di Google Webmaster Yang Baru

2 April 2019
Cara mengetahui jumlah postingan blogger
Blogger

Cara Mengetahui Jumlah Postingan Blog Punya Orang Lain

21 November 2018

Comments 4

  1. ngobrol it says:
    4 tahun ago

    Wah bisa dicoba nih, biar tampilan blog lebih menarik, thanks gan infonya

    Balas
  2. Syhrl Rmdhn says:
    4 tahun ago

    udah dipasang di blog ane mas work makasih mas

    Balas
  3. ikbal nurhakim says:
    4 tahun ago

    Mantap nih gan, ijin coba ah bisa bikin blog ane baguss

    Balas
  4. Info Techno says:
    4 tahun ago

    Tq Om Bakal Dicoba nih 😀

    Balas

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Baru-baru Ini

Persiapan Jualan Online, Apa Saja Yang Harus Disiapkan

Apa Saja Yang Harus Dipersiapkan Untuk Jualan Online?

8 Januari 2021
Alasan Kenapa Anak Mudah Harus Investasi

Alasan Kenapa Harus Investasi Sejak Muda

21 Desember 2020
3 Tips Memilih Wifi yang Akan Dipasang di Rumah

3 Tips Memilih Wifi yang Akan Dipasang di Rumah

20 Desember 2020
Rekomendasi Perpaduan Warna Cat Rumah Minimalis

Rekomendasi Perpaduan Warna Cat Rumah Minimalis

28 November 2020
Cara Praktis Membuat Web Menggunakan Template Website

Cara Praktis Membuat Web Menggunakan Template Website

27 November 2020

Riswan Net AMP

Riswan Net menyajikan informasi update seputar Teknologi, Tips Trik Internet, Perbankan, Media Sosial sampai Panduan Bisnis Online.

playstore download logo 2

Kategori

  • Adsense
  • Aplikasi
  • Bisnis
  • Bitcoin
  • Blogger
  • Desain
  • Gadget
  • Internet
  • Komputer
  • Media Soaial
  • Review
  • SEO
  • Software
  • Teknologi
  • WhatsApp

Tags

Android Bisnis Bisnis Online daily Life Internet Kesehatan Komputer Perbankan Tips Trik Travel WhatsApp Youtube

© 2019 Riswan Net All Right Reserved

  • About
  • Kontak
  • Iklan
  • Privasi
No Result
View All Result
  • Home
  • Content Placement
  • Tekno
  • Internet
  • Komputer
  • Bisnis

© 2020 Riswan Net All Right Reserved.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In