Monday, February 4, 2019

Cara Membuat Animation Background Pada Navigator Warna Otomatis

Hallo sahabat blog,
Pada kesempatan kali ini, Sundaku  akan berbagi informasi, bagaiman caranya membuat background animation seperti berikut ini :







Pada gambar diatas aadalah tampilan ponsel, yang diberi tanda panah merah itu warna yang berubah-rubah seperti tampilan di blog Sundaku . Sangat mudah sekali sobat dan tidak pula instan.

Sobat harus ikuti langkah-langkah dibawah ini:

Kemungkinaan setiap template berbeda akan penempatan kodenya. Baiklah sobat, tanpa panjang lebar laagi, berikut Cara membuat Gradient Background Animation Pada navbar:

Langkah pertama sobat login ke akun blogger sobat, setelah itu klik tema, kemudian klik edit html . Lalu setelah itu sobat cari kode seperti ini : .topouter-wrapper{   gunakan fungsi CTRL+F agar lebih mudah dan cepat. Setelah ketemu kode diatas, kurang lebih seperti ini :

.topouter-wrapper{background:#222;position:relative;top:0;left:0;overflow:hidden;width:100%;min-height:50px}

.main-nav{display:block;margin:0 auto;width:100%;max-width:1000px}

Baiklah setelah ketemu kode diatas, sobat hapus/delet dan ganti dengan kode dibawah ini :

.topouter-weapper{
width: 0wh;
height: 8vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-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%
}
}

h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;

}

Kemudian sobat save tema atau simpan tema,  lalu sobat lihat hasilnya. 

Bagaimana sobat? Bagus kann?? Jika sobat tidak menemukan kode yang seperti diatas, maka sobat cari dengan manual yaitu dengan cara sebagai berikut:

Masuk ke dasabor bloger sobat, kemudian lihat blog, maka akan otomatis halaman tab baru terbuka. setelah terbuka, sobat arahkan kusornya ke navigator menu yang paling atas ya, lalu klik kanan pada mouse, kemudian pilih atau klik inspect. 
Contohnya seperti gambar dibawah ini: 











Setelah sobat klik inspect maka akan ada jendela terbuka di samping kanan layar sobat. Lihat kode yang saya bunderin ya, contoh gambar dibawah ini:



Kemungkinan setiap template berbeda beda ya sobat, jadi intinya sobat cari seperti gambar diatas.

Setelah ketemu sobat langsung hapus lalu ganti dengan kode yang diatas tadi.


Baiklah sobat, sampai disini dulu ya tutorialnya. 
Nantikan informasi selanjutnya dari sundaku. Jangan lupa share artikel ini keteman dan media sosial sobat ya. Berbagi Informasi itu GRATIS.

Terima kasih sobat sudah membaca artikel saya. 
Selamat mencoba dan semoga bermanfaat.


www.sundaku.com
Disqus Comments