Social Items

- Welcome -   

Membuat animasi di blog kini sudah bisa dilakukan hanya dengan CSS, walaupun hanya sebatas menampilkan animasi perpaduan warna. Namun ini sudah jauh lebih baik dari pada menggunakan javascript yang terkenal lebih berat.

Animasi warna gradient akan membuat tampilan blogmu terlihat lebih colorfull, perpaduan warna yang ditampilkan tidak akan membuat pembaca bosan untuk melihatnya.

Kamu juga dapat menerapkannya di manapun di dalam blog, dari header sampai footer sesuai keperluan dan selera. Untuk cara pemasangannya silahkan ikuti langkah dibawah ini.

Buka Blogger - pilih menu Tema lalu klik Edit HTML. Selanjutnya letakan kode berikut ini di dalam kode class pilihan (class dimana kamu ingin meletakan animasi warna gradient)

background:linear-gradient(to right)

Kode yang ditandai merah untuk menentukan arah gerak animasi

Misalnya saya ingin meletakannya pada class .header-top-menu maka akan menjadi seperti berikut

.header-top-menu{background:linear-gradient(to right);display:block;height:52px;line-height:52px}

Selanjutnya salin dan letakan kode berikut tepat sebelum </head>

<style type='text/css'>
.header-top-menu{background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;-webkit-animation:Gradient 15s ease infinite;-moz-animation:Gradient 15s ease infinite;animation:Gradient 15s ease infinite}@-webkit-keyframes 
Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes 
Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes 
Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
</style>

Ganti kode yang ditandai merah dengan kode class pilihan. Kode yang ditandai biru dapat diubah untuk membuat komposisi warna yang sesuai selera

Setelah itu klik simpan dan lihat hasilnya. Sebagai contoh blog ini sendiri sudah menggunakan animasi warna gradient pada menu navigasi halaman dan sidebar.

Cara Membuat Animasi Warna Gradient dengan CSS

Membuat animasi di blog kini sudah bisa dilakukan hanya dengan CSS, walaupun hanya sebatas menampilkan animasi perpaduan warna. Namun ini sudah jauh lebih baik dari pada menggunakan javascript yang terkenal lebih berat.

Animasi warna gradient akan membuat tampilan blogmu terlihat lebih colorfull, perpaduan warna yang ditampilkan tidak akan membuat pembaca bosan untuk melihatnya.

Kamu juga dapat menerapkannya di manapun di dalam blog, dari header sampai footer sesuai keperluan dan selera. Untuk cara pemasangannya silahkan ikuti langkah dibawah ini.

Buka Blogger - pilih menu Tema lalu klik Edit HTML. Selanjutnya letakan kode berikut ini di dalam kode class pilihan (class dimana kamu ingin meletakan animasi warna gradient)

background:linear-gradient(to right)

Kode yang ditandai merah untuk menentukan arah gerak animasi

Misalnya saya ingin meletakannya pada class .header-top-menu maka akan menjadi seperti berikut

.header-top-menu{background:linear-gradient(to right);display:block;height:52px;line-height:52px}

Selanjutnya salin dan letakan kode berikut tepat sebelum </head>

<style type='text/css'>
.header-top-menu{background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;-webkit-animation:Gradient 15s ease infinite;-moz-animation:Gradient 15s ease infinite;animation:Gradient 15s ease infinite}@-webkit-keyframes 
Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes 
Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes 
Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
</style>

Ganti kode yang ditandai merah dengan kode class pilihan. Kode yang ditandai biru dapat diubah untuk membuat komposisi warna yang sesuai selera

Setelah itu klik simpan dan lihat hasilnya. Sebagai contoh blog ini sendiri sudah menggunakan animasi warna gradient pada menu navigasi halaman dan sidebar.

Subscribe Our Newsletter

Notifications

Disqus Logo