Cara Mengganti Background Header Dengan Warna Latar Gradasi Menggunakan Kode CSS

Apabila sobat sudah pernah melakukan teknik yang saya uraikan sebelumnya yaitu Cara Mengganti Background Header Pada Template Standar Blogger baca disini, dalam uraian tersebut bahwa teknik yang dilakukan adalah mengganti background header dengan menggunakan gambar, maka pada kesempatan ini kita akan melakukan pergantian atau mengganti background header dengan warna latar gradasi menggunakan kode CSS seperti gambar diatas, sehingga membuat loading blog tidak terlalu berat dan sangat begitu cepat loading ketika blog di buka.

Dalam uji coba yang saya lakukan ketika menggunakan gambar dengan ukuran yang besar tanpa di kompres atau melakukan resize pada gambar tersebut, dimana sangat membuat loading blog ini begitu berat, namun setelah saya uji coba menggunakan kode CSS loading blog inipun mengalami perubahan yang signifikan. Mengganti background header menggunakan warna latar gradasi yang dapat sobat lihat pada blog ini atau contoh gambar diatas sangat jarang dilakukan pada blog lain, dan kebanyakan hanya menggunakan satu warna saja, contoh : warna hitam, namun adapula blog yang suka menggunakan warna latar gradasi sebagai latar background header dan background utama.

Penggunaan warna latar gradasi dengan mengunakan kode CSS ini, ketika di buka memakai Mozila kadang warna yang dihasilkan tidak sesuai ketika browsing mengunakan Internet Explorer atau browser lain, karna saya sendiri saat ini menggukan Mozila. Oleh karena itu dengan berbagai pertimbangan kode CSS yang nantinya akan digunakan sudah mendukung untuk semua tampilan pada browser yang sobat pakai, sehingga apabila dibuka menggunakan browser yang lain seperti Internet Explorer, Opera dan lain-lain maka hasil yang di tampilkanpun akan sama.

Kita kembali ke topik pembahasan, adapun beberapa warna latar gradasi yang telah saya sediakan disini dapat sobat lihat pada contoh gambar di bawah ini :

Untuk mengganti background header sebaiknya baca terlebih dahulu artikel sebelumnya yang pernah saya terbitkan sehingga mudah untuk melakukan cara atau teknik yang akan disampaikan dibawah ini dan bagi yang sudah terbiasa atau mahir dalam editing template mari kita kerjakan langkah-langkah berikut :

Pertama, login ke akun blog blogger sobat.

Kedua, pilih Template.

Ketiga, untuk menjaga template, silahkan download template, klik Dawnload Template Lengkap yang berada pada samping pojok kanan.

Keempat, klik Edit HTML, klik Lanjutkan, kemudian jangan lupa untuk Expand Template Widget.

Kelima, gunakan Ctrl + F Cari kode berikut pada template anda : .header-outer {

Struktur susunan template yang saya uji coba yaitu pada template standar blogger Jendela Gambar yang tampak seperti kode dibawah ini :

.header-outer {

background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;

_background-image: none;

color: $(header.text.color);

-moz-border-radius: $(header.border.radius);

-webkit-border-radius: $(header.border.radius);

-goog-ms-border-radius: $(header.border.radius);

border-radius: $(header.border.radius);

}

Untuk mempermudah fokuskan pencarian pada .header-outer { , jika sudah ditemukan perhatikan struktur kode dibawah ini, hapus mulai dari bagian yang telah diberikan tanda :

.header-outer {

hapus dari sini >>>>| background: $(header.background.color) $(header.background.gradient) |<<<< sampai pada bagian ini.

repeat-x scroll top left;

Lalu masukkan dan copy salah satu kode CSS di bawah ini sesuai warna yang sobat perlukan, kemudian letakkan pada struktur template yang sudah sobat hapus tadi.

Kode CSS Black Gloss:

Kode CSS Brown Gloss:

Kode CSS Blue Pipe:

Kode CSS White Gloss:

Keenam, klik Pritinjau untuk melihat tidak terjadi kesalahan eror pada saat edit template, jika sudah klik Simpan Template dan lihat hasilnya.

Perlu diketahui : Pertama, penggunaan warna latar gradasi yang telah saya jelaskan sebelumnya bahwa percobaan diatas dilakukan atau telah di uji coba menggunaan template standar blogger Jendela Gambar dan apabila sobat menggunakan template oleh atau dari pihak ketiga cara inipun bisa, tetapi perlu memahami bagian dari struktur template yang sobat gunakan agar tidak terjadi kekeliruan.

Kedua, setelah teknik ini dilakukan silahkan mencoba membuka dengan browse lain yang digunakan pada komputer sobat.

Selamat Mencoba. Sekian dan Terima Kasih. Salam

30 comments:

Lina CahNdesoThursday, October 25, 2012
Salam sahabat; makasih ya, tipsnya sangat bermanfaat bagi saya. Siapa tahu, suatu saat nanti saya berniat merubah tampilan header blog saya dengan BG CSS color. By the way, saya follow andika #45 (lina cahndeso), bila berkenan sudilah follow balik. Toast, Brur....
Reo AdamThursday, October 25, 2012
wes mantep nih sob,komplit dengan kode css
saya mau pelajari dulu,soalnya template q hasil download
mksh infonya sob
HermanbagusThursday, October 25, 2012
keren gan..
UnknownFriday, October 26, 2012
Saya sebenarnya suka dengan gradient, gan. Permasalahannya, saya kurang/belum bisa menyesuaikan kontras warna sehingga cuma akrab dengan warna-warna natural. Meskipun ada yang menggunakan gradient, itupun persentasinya sangat kecil untuk elemen-elemen tertentu.
tagantarFriday, October 26, 2012
Wah,,, mantap gan,, nambah lg ilmu sya brkat sahabat,.. bsa d coba neh...
Happy blogging sahabat.. :)
UnknownFriday, October 26, 2012
sebenarnya pengen ganti pake gambar tapi gak tau caranya,,yang ini sangat membantu
Abed SaragihFriday, October 26, 2012
Hehe...simple dan mudah dimengerti nih tipsnya.Thks Mas :)
Odii SiitohangFriday, October 26, 2012
Sob ada saran dikit nihh, judul header mu bisa dikasih dengan efek text shadow dengan keren dan tanpa efek loading apa-apa, coba di sini sob. Salam blogger.

Jangan lupa visit D-Copy Blog lagi.
komandanFriday, October 26, 2012
Lumayan ,tapi ane sudah sreg sama themes blog ane hehe Mantab
hayardinSaturday, October 27, 2012
follow back sukses sobat...semangat terus yaa bloggingnya sobat...
UnknownThursday, November 15, 2012
thank Tutornya sob .. Gue baru Bikin Blog sob .. bila berkenan "Join this site" ..
UnknownFriday, November 16, 2012
Gue selalu terbentur bila ada pengeditan di code ini .header-outer { dan banyak code"lainnya yg ga ada di Edit HTML gue .. mungkin ini di karenakan Blog baru sekarang menggunakan Kode" baru jadi ga sama .. :( , sementara gue simpan dulu tutornya .. pasti berguna di suatu saat ,,

Thanks Folbacknya .. :) ..salam balik ..
Dapur Tutorial Blogspot Dan SeoThursday, November 29, 2012
Mantap banget kang makasih tutorialnya. salam kenal dan salam blogger
SyamMonday, December 24, 2012
wahh mantap ni sob,,nambah ilmu bagi ane yg pemula ni,,kunbal ya mohon sarannya..tks.
Kurupuk SeuhahSaturday, January 26, 2013
Makasih bos atas sharenya.. langsung dicoba deh..
UnknownThursday, January 31, 2013
Sama-sama sob, semoga trik diatas bermanfaat. Salam