Tutorial Membuat Warna Gradient di Header dan Footer Blog Seperti Arlina Design

Azhar Rivaldi    1/17/2020    Tutorial    4 comments   

Baca Juga

Tutorial Membuat Warna Gradient di Header dan Footer

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُه sobat 48😁. Kali ini saya akan membagikan sebuah artikel lagi yang membahas tentang Tutorial Membuat Warna Gradient di Header dan Footer Blog Seperti Arlina Design. Artikel ini saya buat karena saya terinspirasi dari template Arlina Design dan IDNTheme. Karena pada bagian Header dan Footer Blog tersebut memiliki warna Gradient dengan animasi. Untuk saat ini pun banyak template Blogger yang memiliki background Gradient.

Untuk membuat warna Gradient di Header dan Footer Blog caranya pun sangatlah mudah. Kita cukup menggunakan CSS tanpa Javascript. Cara ini bisa kalian terapkan pada semua platform Blog seperti Blogger, WordPress dan lainnya. Disini saya akan membagikan 2 cara untuk membuatnya.

Cara pertama sebagai berikut :
1. Buka dashboard Blogger kalian, lalu pilih Tema ➔ Edit HTML.

2.

Dashboard Blogger

Langsung cari saja ID dari <header> Blog kalian. Untuk template yang saya pakai memiliki 2 Header. Yang atas untuk versi Desktop, lalu yang dibawahnya untuk versi Mobile. Sesuaikan dengan template kalian masing-masing ya. Karena setiap template memiliki nama ID yang berbeda.

3. Setelah kalian menemukan kode ID Header, sekarang kalian cari CSS-nya, lalu ubah background nya dengan kode seperti ini :

linear-gradient(to right)

atau

linear-gradient(to left)

Hasil sebelum dan sesudah ditambahkan kode diatas :

Sebelum

Sesudah

4. Kemudian tambahkan kode dibawah ini tepat diatas kode </head> :

<style>#header-top{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>

5. Jangan lupa ganti kode #header-top dengan kode Header template kalian.

6. Selesai. Klik simpan dan lihat hasilnya. Jika saya menerapkannya, maka akan seperti ini :

Header Gradient

Untuk cara kedua, berikut langkah-langkahnya :
1. Buka dashboard Blogger kalian, lalu pilih Tema ➔ Edit HTML.

2. Tambahkan kode CSS ini diatas ]]></b:skin> :

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

3. Jika sudah, silahkan klik Simpan.

4. Untuk menerapkannya, tambahkan class="azharGradasi" ke elemen yang ingin kalian ubah background nya menjadi Gradient.

5. Sebagai contoh, kalian cari <div id='header-top'>. Lalu tambahkan class="azharGradasi". Sehingga menjadi <div id='header-top' class='azharGradasi'>.

Sebelum :

<!-- SEBELUM -->
<div id="header-top">
...
</div>

Sesudah :

<!-- SESUDAH -->
<div class="azharGradasi" id="header-top">
...
</div>

6. Jika sudah ada Class nya, maka penambahannya menjadi seperti ini :

Sebelum :

<!-- SEBELUM -->
<div class="header" id="header-top">
...
</div>

Sesudah :

<!-- SESUDAH -->
<div class="header azharGradasi" id="header-top">
...
</div>

7. Jangan lupa cek dahulu CSS dari #header atau .header apakah sudah ada value background atau belum.
Misalkan seperti ini :

#header {
  background: #ff000; /* bisa juga menggunakan property 'background-color' */
  position: relative;
  display: block
}

/* ATAU */

.header {
  background: #ff000; /* bisa juga menggunakan property 'background-color' */
  position: relative;
  display: block
}

8. Hapus properti background atau background-color karena sudah digantikan dengan azharGradasi.

Untuk hasil cara kedua akan seperti ini :

Background Gradient menggunakan animasi dari CSS

(by: Azhar Rivaldi)

Penjelasan :
Background Gradient bergerak dari animasi yang diberikan oleh CSS yang diatur dalam properti background. Selain itu kalian juga bisa mengatur durasi animasi pada (moz-animation dan webkit-animation) dan warna gradasinya pada (background: linear-gradient).

Jika kalian masih bingung dalam menerapkannya. Jangan sungkan untuk berkomentar di kolom yang sudah disediakan. Nanti, kita akan diskusikan bersama-sama untuk memberikan solusinya.

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian agar ikut membaca Tutorial Membuat Warna Gradient di Header dan Footer Blog Seperti Arlina Design ini. Subscribe juga blog Rivaldi 48 ini agar kalian mendapatkan notifikasi saat Admin update artikel terbaru. Semoga kalian lebih nyaman dan mudah dalam mengakses Blog Rivaldi 48 dimanapun kalian berada. Terima Kasih. Follow Instagram Admin @azhardvls_