Cara singkat membuat efek animasi di navbar blog

Pada artikel kali ini saya akan menshare ke kalian semua.Bagaimana sih cara memberi efek gradasi di header blog kita, seperti blog saya ini keren bukan, hehehe.

Membuat Animasi gradasi pelangi di blog memang lah suatu hal yang mudah apalagi setelah kita tambahkan animasi gradasi pelangi ini di blog kita pasti keren dan pengunjung pun betah di blog kalian..

Kebanyakan para blogger mengubah atau mendesain blog nya dengan cara seperti saya ini namun jangan asal asal mendesain. 

jika kebanyakan fitur fitur yang tidak penting di blog kita sebaiknya di hapus, itu bisa memperlambat kerja loading blog kalian nantinya. dan pengunjung pun merasa resah di blog kalian akibat lambatnya loading blog kalian dan akhirnya pengunjung pun berkurang di blog kalian..

memang mendesain blog itu memang suatu hal yang indah dan menarik perhatian pengunjung tetapi ada batasnya kalau kalian terus terusan menambah fitur fitur yg kurang penting seperti yang saya bilang tadi sebaiknya di hapus agar blog kalian tidak lambat atau lemot..

Jangan Lupa Kunjungin Juga Blog Teman Saya, Disitu juga banyak tutorial tutorial blogging yang bermanfaat langsung saja cek DISINI

Langsung saja saya bagikan ke kalian tutorial nya cara memberi efek gradasi pelangi di blog.

Yuk Disimak !

NOTE :
BAGI PENGGUNA HP ANDROID DI WAJIBKAN MENGGUNAKAN SITUS DESKTOP AGAR SAAT COPY KODE TIDAK PUTUS PUTUS..WAJIB!!

Cara singkat membuat efek gradasi pelangi di header blog..

1. Pertama silahkan login dulu ke dashboard blogger kalian.

2. Selanjutnya kalian pilih >> Tema >> Edit Html. 

3. Kemudian pastekan kode berikut ini Tepat di atas  ]]></b:skin>

.ignielPelangi { background: linear-gradient(45deg, #f22613,
#f89406, #26a65b, #5868ec, #f54e80, #f7ca18,
#d2527f); background-size: 400% 400%; -webkit-animation: ignielGradient 15sease infinite; -moz-animation: ignielGradient 15s ease infinite; animation: ignielGradient 15s ease infinite; } @-webkit-keyframes ignielGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes ignielGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes ignielGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

4. Kemudian kalian cari kode  <div id='header-container'> setelah itu ganti dengan kode berikut ini 

<div id='header-container' class='ignielPelangi'>

5. Kemudian kalian cari kode seperti dibawah ini.

1234567891011/* HEADER */
#header-container {
 background: $(header.background.kiri);
 background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan));
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 z-index: 999;
 height: 48px;

7. Setelah kalian hapus hasilnya akan seperti ini

1/* HEADER */ #header-container { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 999; height: 48px;
8. Selesai tinggal kalian simpan.  
semoga Berhasil    By: 
https://rakitchord.blogspot.com

Bagikan Artikel ini