Cara membuat loading Sliding Efect di Blog. Baiklah sobat pada kesempatan ini seocips.com akan membagikan trik bagaimana cara membuat loading efek sliding menggunakan animasi @keyframe. Animasi ini hanya menggunkan CSS3 tidak menggunakan java script jadi tidak akan mempengaruhi loading blog begitu besar.
Memang untuk menambah daya tarik tampilan blog beberapa orang menambahkan efek loading blog, nah contohnya sebelumnya seocips telah membagikan bagaimana cara membuat efek loading dengan waktu dan tanggal, membuat efek loading blog sederhana, dan efek loading blog lingkaran yang juga menggunakan efek keyframe.

2. Tambahkan kode dibawah ini ke CSS sobat dengan cara : Cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya
animation: Sliding 2s; ke bagian yang ingin anda beri efek, misalkan pada #main-wrapper . Contohnya:
Untuk cara pertama mungkin tidak support untuk semua browser, Jiak begitu hapus saja dan ganti dengan kode dibawah ini. Langkah-langkahnya sama saja seperti diatas.
1. Masuk Edit HTML Template Blogger sobat.
2. Tambahkan kode dibawah ini ke CSS sobat dengan cara : Cari kode]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya
-moz-animation:slide 4s;-webkit-animation:slide 4s;animation:slide 4s ke bagian yang ingin anda beri efek, misalkan pada #main-wrapper . contohnya:
Untuk kecepatan loading tinggal sobat setting misalnya 4s di turunkan menjadi 2s untuk efek loading lebih cepat.
Selain animasi Sliding efect ada juga efek loading animation bounce and rotate, dan animation earthquacke effect ( baca disini ). Ok selamat mencoba dan semoga bermanfaat.
Memang untuk menambah daya tarik tampilan blog beberapa orang menambahkan efek loading blog, nah contohnya sebelumnya seocips telah membagikan bagaimana cara membuat efek loading dengan waktu dan tanggal, membuat efek loading blog sederhana, dan efek loading blog lingkaran yang juga menggunakan efek keyframe.

Animasi Loading Sliding Efect di Blogspot
1. Masuk Edit HTML Template Blogger sobat.2. Tambahkan kode dibawah ini ke CSS sobat dengan cara : Cari kode
@keyframes Sliding{3. Sisipkan kode
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}
#main-wrapper { animation : Sliding 2s; }4. Save Template
Untuk cara pertama mungkin tidak support untuk semua browser, Jiak begitu hapus saja dan ganti dengan kode dibawah ini. Langkah-langkahnya sama saja seperti diatas.
1. Masuk Edit HTML Template Blogger sobat.
2. Tambahkan kode dibawah ini ke CSS sobat dengan cara : Cari kode
@-webkit-keyframes slide{3. Sisipkan kode
from{transform:translate(-1000px, 0px);}
to{transform:translate(0px,0px);}}
@keyframes slide{
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}
#main-wrapper {-moz-animation:slide 4s ;-webkit-animation:slide 4s;4. Save Template.
animation:slide 4s }
Untuk kecepatan loading tinggal sobat setting misalnya 4s di turunkan menjadi 2s untuk efek loading lebih cepat.
Selain animasi Sliding efect ada juga efek loading animation bounce and rotate, dan animation earthquacke effect ( baca disini ). Ok selamat mencoba dan semoga bermanfaat.
3 Komentar untuk "Cara Membuat Animasi Loading Sliding Efect di Blog"
Gan itu MAIN WRAPPER nya bisa diganti yg laen kgk Ane gk ada soalnye ??
Sama Cara membuat tulisan NEW Pada postingan baru ya min !!!
Bisa gan, letakan saja di bagian yang ingin anda kasi efek slidenya.