4 shares

Fians.id – Akhir-akhir ini penggunaan Header Menu Warna-warni sepertinya sangat populer bagi beberapa blogger, selain mempercantik tampilan blog yang dimiliki, penggunaan header juga menambah keunikan dari tampilan blog itu sendiri. Apakah kamu ingin memasang tampilan header ini? Dalam pengaplikasian Header Menu RGB ini sangat mudah, kamu hanya harus melakukan editing pada bagian css untuk merubah tampilan warna header biasa kamu dengan warna RGB yang dapat berganti-ganti.

Selain pada bagian header, CSS atau kode ini juga dapat dipakai atau diaplikasikan pada banyak bagian atau widget, seperti kolom subscribe, tampilan footer dan bagian lain sesuai selera. untuk caranya kamu dapat mengikuti panduan berikut.

Membuat Header Menu RGB Blogspot

Oke, sebagai contoh kita akan oprek theme Juragan dari IDNTHEME, Kita akan ubah header dengan tampilan dasar biru menjadi RGB, Pertama-tama cari tau lokasi css dan namanya, kamu dapat melakukan klik kanan pada bagian yang ingin dirubah dan klik inspect element

Setelah kita telusuri header menu dari theme Juragan menggunakan warna dasar biru #1277cb diletakkan pada bagian #top-container. Saatnya eksekusi

Baca Juga : Cara Membuat Auto Safelink Untuk Blogspot.com

Css Header Warna-warni :

#back-to-top{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%}}

Buka Theme dan klik edit html lalu cari kode #top-container. Setelah ketemu tambahkan baris kode dibawah line #top-container dengan #top-container, diikuti css diatas. hasilnya

Contoh :

#top-container, #back-to-top{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%}}

Save template dan lihat hasilnya.

Demo dapat dicek di https://dummynisia.blogspot.com/

Sebagai pencegahan, pastikan kamu melakukan backup template sebelum mengubah code, jadi jika ada kesalahan kamu dapat mengembalikan tampilan blog kamu seperti awal lagi. Selamat mencoba 🙂


Like it? Share with your friends!

4 shares

0 Comments

Your email address will not be published. Required fields are marked *