Cara Membuat Background Blog Berganti Ganti Warna dengan CSS tanpa Jquery

byRahmanCyber -
0

RahmanCyber.NET sebagai blog yang memiliki bahasan tentang tutorial blogger, kali ini kita memberikan tutorial menarik untuk mengubah dan mengganti background blog agar terlihat lebih dinamis, ya bisa dibilang background blog dengan animasi tanpa memberatkan kecepatan blog dengan melakukan embed background dengan format gif. 

 

{getToc} $title={Table of Contents}

 

 

 

Gambar oleh RahmanCyber.Net

 

 

 

 

Animasi CSS Perubahan Warna

 

 

Tetapi memang, ini hanyalah animasi perubahan warna, tetapi saya rasa sangat menarik untuk memberikan kesan bahwa blog kita memiliki animasi. 

 

Perlu diketahui juga, bahwa script CSS ini merupakan dasar, jika kamu bisa improve untuk membuat objek bergerak atau bahkan perubahan objek, karena sifat CSS 3 ini adalah Frame by Frame yang dikendalikan menggunakan keyframe (CSS 3 Animation Effect).

 

Sebenarnya kita bisa sih untuk membuat background dengan Gambar .gif yang memang bentuknya gambar yang dianimasikan frame by frame, tapi biasanya akan menambah waktu load atau size website untuk pemuatan halaman. 


Sehingga kemungkinan besar akan berdampak pada skor pagespeed... hehe

 

 

 

Apakah Seperti Format Gambar GIF?

 

Tetapi jangan risau, ini trik tidak memakai embed jpg / png / gif dari luar blogger kita kok, melainkan kita hanya menganimasikan warna dengan CSS.

 

kita tau bahwa CSS sekarang ini mendukung transisi yang bisa dibuat untuk pergerakan frame by frame / membentuk animasi.

 

 

 

Sketsa Pembuatan Animasi Keyframe CSS

 

Untuk kode kali ini, dibuat ada 4 keyframe untuk membuat layaknya seperti animasi, dimana masing masing keyframe memiliki pengaturan waktu untuk transisi pergantian. Warna yang dipakai adalah Random #Color yang bisa kalian customisasi sendiri. Untuk referensi warna bisa memakai Color Picker atau Hex Color cari di Google.

 

 

 

Hasilnya akan seperti ini

 

 

Gif by <a href="https://rahmancyber.net">RahmanCyber.NET</a> on <a href="/s/photos/bussiness?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

 

 

Waw.. menarik bukan... ^_^

 

 

 

Bagaimana Cara Buat Animasi CSS Gonta Ganti Warna Background?

 

 

1. Silahkan masuk dulu di Dashboard Blogger

2. Lalu menuju ke Edit HTML, caranya Tema -> Edit HTML, lebih jelasnya seperti ini.

 

Screenshot by <a href="https://rahmancyber.net">RahmanCyber</a>


3. Setelah itu carilah </b:skin> dengan cara tekan CTRL+F(Windows) keyboard dan CMD+F (Untuk yang pake MAC)

4. Lalu silahkan di Cpy Paste kode dibawah ini sebelum </b:skin>

 



body{
animation: colorBackground 122s infinite; 
-webkit-animation: colorBackground 122s infinite; 
-moz-animation: colorBackground 122s infinite; 
-o-animation: colorBackground 122s infinite; 
}


@keyframes colorBackground {
0% { background-color: #B461FB; color: #B461FB; }
20% { background-color: #74E588; color: #74E588; }
40% { background-color: #F98585; color: #F98585; }
60% { background-color: #50BFE1; color: #50BFE1; }
80% { background-color: #4256EF; color: #4256EF; }
100% { background-color: #B461FB; color: #B461FB; }
}
@-webkit-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-moz-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-o-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}

 

5. Kalo udah, silahkan simpan.

6. Setelah itu lihatlah Blog kamu, jadi seperti apa sekarang.. hehe. Kalo berhasil maka akan berganti ganti untuk warna backgroundnya.... Keren Khan blognya sekarang :)





Penjelasan CSS Animation


Kode CSS diatas di aplikasikan pada bagian body

Bisa dilihat bahwa ada deklarasi kode body disini


body{

 

lalu, inilah keyframenya, jadi ada 4 keyframe : animation, webkit-animation, moz-animation, dan o-animation.

Masing masing memiliki pengaturan waktu , disini saya memakai 122s, semakin kecil nilainya, maka waktu pergantian akan semakin cepat, begitupun sebaliknya, semakin lambat, maka waktu pergantian warna akan semakin lambat pula.

 Oh iya ada infinite setelah pengaturan waktu, berarti tanpa batas alias looping terus..

 
animation: colorBackground 122s infinite;
-webkit-animation: colorBackground 122s infinite;
-moz-animation: colorBackground 122s infinite;
-o-animation: colorBackground 122s infinite;
}

 

Nah untuk Penganimasiannya disini, di definisikan tiap tiap keyframe! total ada 4, sesuai dengan definisi diatas.

Untuk Background-Color dan Color ( termasuk fontnya juga ) ini menunjuk pada pendefinisian style warna yang ada di body. Menggunakan kode yang biasa dipakai... Kalo Font gak pengen ganti warnanya, hapus aja 


contoh = color: #B461FB;

 

@keyframes colorBackground {
0% { background-color: #B461FB; color: #B461FB; }
20% { background-color: #74E588; color: #74E588; }
40% { background-color: #F98585; color: #F98585; }
60% { background-color: #50BFE1; color: #50BFE1; }
80% { background-color: #4256EF; color: #4256EF; }
100% { background-color: #B461FB; color: #B461FB; }
}

 

Itu merupakan urutan warna dari 0% sampai 100%, kalian bisa ganti ganti sesuka hati... bisa pakai color picker.


@-webkit-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-moz-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-o-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}






Saran dan Kesimpulan


Sebearnya dengan menambahkan kode tersebut di atas </b:skin> maka sobat tidak perlu untuk menghapus default body background yang ada di template kalian, 

Logikanya, yang paling bawah itu adalah yang hasil akhir yang dirender oleh browser, tak peduli yang diatas sebeluim ini settingannya apa.. yang jelas disitu hanya mengganti background-color dan color pada tag css body saja, tidak kode lainnya...


Gitu sih logikanya kalo di Blogger.. sama halnya dengan javascript dan lain sebagainya, hasil akhir adalah yang letaknya paling bawah. Tetapi dipastikan untuk tag yang dituju sama.


Misal yang mau diubah body, ya harus body.. gitu.

 

Ini contoh kode Body RahmanCyber NET

 

 

 

Makannya biasanya untuk para modifikator kode template itu, biar meminimalisir kesalahan dan agar yang menerapkan kode tidak bingung karena terjadi error, maka selalu menyarankan..

 

letakkan di atas </b:skin> atau </head> atau dibawah <head> atau tepat dibawah <body> atau.... tepat diatas </body>

 

gituuu..  Hehe, walau kalo error bisa di undo ya gan..  :D

 

 

 

Moga bermanfaat! Untuk Optimasi Blog

 

 

 

 

F.N.A-RED

 

 

 

 

Bonus, Kode yang tanpa mengubah Warna Font. 




body{
animation: colorBackground 122s infinite; 
-webkit-animation: colorBackground 122s infinite; 
-moz-animation: colorBackground 122s infinite; 
-o-animation: colorBackground 122s infinite; 
}


@keyframes colorBackground {
0% { background-color: #B461FB; }
20% { background-color: #74E588; }
40% { background-color: #F98585; }
60% { background-color: #50BFE1; }
80% { background-color: #4256EF; }
100% { background-color: #B461FB;}
}
@-webkit-keyframes colorBackground {
0% {background-color: #B461FB; }
20% {background-color: #74E588; }
40% {background-color: #F98585; }
60% {background-color: #50BFE1; }
80% {background-color: #4256EF; }
100% {background-color: #B461FB; }
}
@-moz-keyframes colorBackground {
0% {background-color: #B461FB; }
20% {background-color: #74E588; }
40% {background-color: #F98585; }
60% {background-color: #50BFE1; }
80% {background-color: #4256EF; }
100% {background-color: #B461FB; }
}
@-o-keyframes colorBackground {
0% {background-color: #B461FB; }
20% {background-color: #74E588; }
40% {background-color: #F98585; }
60% {background-color: #50BFE1; }
80% {background-color: #4256EF; }
100% {background-color: #B461FB; }
}







Tags

Posting Komentar

Untuk posting kode, bisa di parse dulu gan, pake tool parse yang udah disediakan di website ini https://www.rahmancyber.net/p/parse-code.html

agar kodenya tidak hilang... ^_^

Lebih baru Lebih lama

نموذج الاتصال