Cara menambahkan efek loading..

Pertama kali saya tertarik untuk membuat efek loading , sebenarnya pada saat itu saya telah mengunjungi situs blog seseorang dengan membuka situs web dengan proses pembukaan loading dengan gambar animasi,disitulah saya tertarik ingin untuk membuat tampil di layar blog saya !.

Seorang Blogger atau blogspot biasanya senang untuk editing tampilan Template Agar membedakan dari semua blog yang sudah tampil di google .

Begitupun saya sendiri , ingin mempunyai blog yang tampil cantik di layar pengunjung Blog saya ,,, hehehe

Bagaimana cara mengaktifkan efek loading di Blog

Sebenarnya mudah sekali cara menambahkan efek di blog , bergantung dengan kepintaran atau kemampuan yang anda miliki , banyak “ Blogger Senior “ yang merombak atau mengedit template Blog dengan sesuka hati mereka , namun Blogger senior tetap berhasil di karenakan mereka sudah mengenal dengan tata letak kode html/javascript dalam Template atau tema.

Pastikan Anda sudah mengenal letak-letak kode html/javascript dan css

Mengapa dan kenapa ,, menambahkan Kode dengan asal tau dan tidak mengikuti aturan dalam penempatan kode , kode tidak dapat berfungsi dengan semestinya tampil , bahkan kode yang di susun tidak akan bisa di save. Sebagai panduan atau baru mengenal Coding , belajar menambahkan kode html/ javascript yang pertama anda harus bek Up atau Cadangkan dahulu Template Blogger.

Cadangkan Template Blogger sebelum menambahkan efek loading..

[ Di sarankan ] Cadangkan dahulu Template Blogger-nya, sebabkan jika Anda belum jelih atau belum mengenal tentang Coding kode dalam template , satu kesalahan akan menjadi dampak rugi untuk diri sendiri.

Contoh :

Benahi ulang
picture berantakan
Menyesali tindakan

Dengan alasan Di Cadangkan Template Blogger agar suatu kesalahan bisa di pulihkan kembali seperti sedia kala Template Blogger tersebut.

Bebas Membuat efek loading di Blog atau website dengan efek kesukaan.

Mengaktifkan tampilan loading di pembukaan blog dengan jika berhasil Coding kode html tersebut anda bebas memiliki gambar loadingnya ;

gambar animasi,
Gambar kartun
Icon Svg
Icon font awesome
gambar foto sendiri
Gambar JPG

Sehingga blog memiliki proses loading tidak membosankan untuk tampil yang di lihat lebih profesional dengan tampilan full desains.

apa saja kode yang di tambahkan untuk merubah tampilan loading di Blog

Dalam Coding atau kode Template yang di dalamnya terdapat 4 nama kode, jenis yang berbeda dan menghubungkan Menjadi satu data yaitu ;

Kode Html
Kode CSS
Kode JQuery
Kode JavaScript

Mungkin yang paling ampuh buat desain di Template Blogger adalah anda harus tau cara penyusunannya Agar menguasai ke 4 nama kode di atas , akan lebih mudah untuk membuat blog dengan efek loading .

Cara Mudah Buat efek di proses pemuatan loading blog

Sebelum menambahkan efek loading di Blog berhasil silahkan ikuti petunjuk dari saya .

1. Login Blogger.

2. Cari Tema

3. Tekan Scroll tanda panah kebawah

4. Cadangkan

5. Edit Html

6. Cari kode kode CSS

]]></b:skin>

jika sudah ketemu kode CSS Seperti berikut.

]]></b:skin>

Salin kode CSS di bawah ini letakan tepat di atas kode yang di maksud tadi.

/* Header Logo Effect Blog */

header #header-inner a{position:relative}

header #header-inner a:before,header #header-inner a:after{content:"";position:absolute;top:50%;width:2px;height:100%;transform:translateY(-50%);background-color:rgba(255,255,255,.75);z-index:999999999}

header #header-inner a:before{left:-5%;animation:light-left 3s infinite alternate linear}

header #header-inner a:after{right:-5%;animation:light-right 3s infinite alternate linear}

@keyframes light-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}100%{left:105%;opacity:0}}

@keyframes light-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}100%{right:105%;opacity:0}}

#loding-awal {

  width:100%;

  height:100%;

  position:fixed !important;

  position:absolute; /* IE6 Fallback */

  top:0px;

  right:0px;

  bottom:0px;

  left:0px;

  z-index:999999;

  background:#fff url("https://blogger.googleusercontent.com/img/a/AVvXsEj9ssSrG83ZSSgFJ8oaU86ghjMqY6C8eHiBP5VPFM9qWIKNB_81fgtuSWhl78JUSQJWwWQd-OM2zUgUPuEr_UZpZCsr0GTJXg8Z24FTyqD5pmWMyoZ3sQ3ba-hvjsNDxBkuDRbV0pbzhllyCYo-GIy1g0wzLL2ExQ4FxqEn9bFk7I3Lr4y7FUujHwlzMA=s320") no-repeat center;

  color:transparent !important;

  text-indent:-99999px;

}

7. Cari kode javascript

</body>

jika sudah ketemu kode

</body>

Letakkan kode di bawah tepat di atas kode yang tadi di cari

<script>
$(window).bind(&quot;load&quot;, function() {
    $(&#39;#loding-awal&#39;).fadeOut();
});
    </script>

8. Save template
9. Pembuatan pemuatan atau proses loading blog sudah selesai , sekarang anda dapat meninjaunya !

Jika mengalami proses loading tidak responsif atau berjalan tanpa henti

Coba anda tambahkan kode jQuery yang saya sediakan di bawah ini.

10. Buka Template atau tema Blogger ulang edit Seperti sebelumnya..

cari kode

</head>

Dan

<body>

jika sudah ketemu kode bawah ini .

</head>

Letakkan kodenya Sesudah kode head atau di sebelum kode body Seperti berikut

<body>

Copy kode JQuery di bawah ini, Copy pastekan kode berikut ini di tengah-tengah kode yang tadi anda cari.

<div id='loding-awal'>Loading...</div>

Kalo sudah di tambahkan kode jQuery , coba anda sekarang tinjau hasilnya ulang .

Cara mudah ubah gambar loading

Klo ingin ubah gambar loading blognya Perhatikan, bagian kode CSS Seperti berikut :

Kesimpulan akhir

Kesimpulannya agar sukses ikuti langkah awal sampai akhir.

Begitu cara membuat proses pemuatan loading di Blog, semoga apa yang saya bagikan bermanfaat untuk anda terimakasih

Techno News