BREAKING NEWS

Post Ads

Kamis, 30 Mei 2019

Cara Menciptakan Animation Background Pada Navigator Warna Otomatis

Hallo sahabat blog,
Pada kesempatan kali ini,   akan membuatkan informasi, bagaiman caranya menciptakan background animation menyerupai berikut ini :


Pada gambar diatas aadalah tampilan ponsel, yang diberi tanda panah merah itu warna yang berubah-rubah menyerupai tampilan di blog  . Sangat gampang 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 menciptakan Gradient Background Animation Pada navbar:

Langkah pertama sobat login ke akun blogger sobat, sehabis itu klik tema, kemudian klik edit html . Lalu sehabis itu sobat cari aba-aba menyerupai ini : .topouter-wrapper{   gunakan fungsi CTRL+F semoga lebih gampang dan cepat. Setelah ketemu aba-aba diatas, kurang lebih menyerupai 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 sehabis ketemu aba-aba diatas, sobat hapus/delet dan ganti dengan aba-aba 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,  kemudian sobat lihat hasilnya. 

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

Masuk ke dasabor bloger sobat, kemudian lihat blog, maka akan otomatis halaman tab gres terbuka. sehabis terbuka, sobat arahkan kusornya ke navigator sajian yang paling atas ya, kemudian klik kanan pada mouse, kemudian pilih atau klik inspect. 
Contohnya menyerupai gambar dibawah ini: 






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



Kemungkinan setiap template berbeda beda ya sobat, jadi pada dasarnya sobat cari menyerupai gambar diatas.

Setelah ketemu sobat pribadi hapus kemudian ganti dengan aba-aba yang diatas tadi.


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

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


www.sundaku.com

Share this:

Posting Komentar

 
Back To Top
Copyright © 2014 Federico Blog. Shared by Themes24x7