Memperbaiki Error Loader Pada Camera Slider

Error Loader Pada Camera Slider
Akhir-akhir ini banyak blog demo dari Maskolis yang terhapus. Salah satunya blog demo yang menggunakan fitur Camera Slider seperti yang saya pakai pada salah satu template editan saya yaitu Kompi Wide.

Karena blog tempat Maskolis mengupload gambar untuk camera slider ini terhapus, maka akibatnya gambar loader pada camera slider ini ikut menghilang sehingga berubah menjadi gambar tanda seru. Akhirnya camera slider ini tampak kurang bagus ketika slider sedang loading untuk menayangkan gambar-gambarnya. Apakah Anda juga menggunakan camera slider dari Maskolis ini?

Jika iya dan mengalami hal serupa, maka kita harus mengganti gambar loadernya dengan gambar sendiri pada kode css untuk camera slider ini. Untuk mulai memperbaiki error loader pada camera slider ini, silahkan Anda buat dulu gambar loader-nya pada web-web yang menyediakan layanan pembuatan ganbar loader gif. Silahkan searching di Google dengan kata kunci "Loading Gif". Silahkan buat loading gif-nya dengan size maksimal 36px dengan background transparant.

Setelah selesai membuat loading gif, silahkan upload gambar Anda dan simpan url gambarnya di notepad. Kemudian masuk ke edit HTML dan temukan kode CSS .camera_loader, selengkapnya seperti kode di bawah ini.

.camera_loader{background:url(http://1.bp.blogspot.com/-U50t_WWuuYY/UR2JCuL7yFI/AAAAAAAAALE/w8dJNZaYB2E/s1600/loading.gif) no-repeat center;background:rgba(255,255,255,0.9) url(http://1.bp.blogspot.com/-U50t_WWuuYY/UR2JCuL7yFI/AAAAAAAAALE/w8dJNZaYB2E/s1600/loading.gif) no-repeat center;border:1px solid #fff;-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px;height:36px;left:50%;overflow:hidden;position:absolute;margin:-18px 0 0 -18px;top:50%;width:36px;z-index:3}

Nah silahkan ganti kode yang berwarna merah di atas dengan url gambar loading gif Anda tadi. Karena kode di atas menggunakan background putih pada tempat loading gif-nya sehingga kurang bagus untuk blog yang menggunakan background gelap, maka kita hapus background loading gif-nya (bagi Anda yang menggunakan blog dengan background gelap). Sehingga kodenya akan seperti di bawah ini.

.camera_loader{background:url(http://1.bp.blogspot.com/-U50t_WWuuYY/UR2JCuL7yFI/AAAAAAAAALE/w8dJNZaYB2E/s1600/loading.gif) no-repeat center;background:rgba(255,255,255,0.9) url(http://1.bp.blogspot.com/-U50t_WWuuYY/UR2JCuL7yFI/AAAAAAAAALE/w8dJNZaYB2E/s1600/loading.gif) no-repeat center;height:36px;left:50%;overflow:hidden;position:absolute;margin:-18px 0 0 -18px;top:50%;width:36px;z-index:3}

Selesai dan silahkan SAVE template Anda. Jika saat ini Anda kesulitan dalam melakukan SAVE pada edit HTML, silahkan simak juga postingan saya yang lain pada link di bawah ini.
Semoga bisa dimengerti dan bermanfaat...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments