Memperbaiki Error Loader Pada Camera Slider

Akhir-akhir ini banyak blog demo dari Maskolis yang terhapus. Salah satunya blog demo yang memakai fitur Camera Slider menyerupai yang aku pakai pada salah satu template editan aku yakni Kompi Wide.

Karena blog kawasan Maskolis mengupload gambar untuk camera slider ini terhapus, maka akhirnya gambar loader pada camera slider ini ikut menghilang sehingga bermetamorfosis gambar tanda seru. Akhirnya camera slider ini tampak kurang anggun ketika slider sedang loading untuk menayangkan gambar-gambarnya. Apakah Anda juga memakai camera slider dari Maskolis ini?

Jika iya dan mengalami hal serupa, maka kita harus mengganti gambar loadernya dengan gambar sendiri pada instruksi 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 menciptakan loading gif, silahkan upload gambar Anda dan simpan url gambarnya di notepad. Kemudian masuk ke edit HTML dan temukan instruksi CSS .camera_loader, selengkapnya menyerupai instruksi 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 instruksi yang berwarna merah di atas dengan url gambar loading gif Anda tadi. Karena instruksi di atas memakai background putih pada kawasan loading gif-nya sehingga kurang anggun untuk blog yang memakai background gelap, maka kita hapus background loading gif-nya (bagi Anda yang memakai blog dengan background gelap). Sehingga kodenya akan menyerupai 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 ketika ini Anda kesulitan dalam melaksanakan SAVE pada edit HTML, silahkan simak juga postingan aku yang lain pada link di bawah ini.

• Solusi Tidak Bisa Save Pada Edit HTML Blogger

Semoga dapat dimengerti dan bermanfaat...

Sumber https://www.kompiajaib.com/

Share this post