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 !.

loading, Pemuatan , proses

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 ;
  1. Kode Html
  2. Kode CSS
  3. Kode JQuery
  4. 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

Belum ada Komentar untuk "Cara menambahkan efek loading.. "

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel