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

Tutorial Membuat Warna Gradient di Header dan Footer Blog Seperti Arlina Design
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 TemaEdit HTML.

2.

Tutorial Membuat Warna Gradient di Header dan Footer Blog Seperti Arlina Design
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 :

Tutorial Membuat Warna Gradient di Header dan Footer Blog Seperti Arlina Design
Sebelum
Tutorial Membuat Warna Gradient di Header dan Footer Blog Seperti Arlina Design
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.

TRENDING:  Tutorial Membuat Aplikasi Rental Mobil dengan Android Studio

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

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

Untuk cara kedua, berikut langkah-langkahnya :
1. Buka dashboard Blogger kalian, lalu pilih TemaEdit 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: Rafel Pranata)

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).

TRENDING:  Tutorial Membuat Aplikasi Pencarian Tempat Terdekat dengan Google Maps API V2

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 @rafelpranata