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
No comments:
Post a Comment