Cara menambah gadget pada Header

Menambah gadget tepat pada bagian header tentu bermanfaat, diantaranya kita bisa menambahkan gambar, slide show, banner, atau iklan pada bagian header tersebut. Cara ini berbeda dengan menambah gadget diatas ataupun dibawah header yang saya tulis pada artikel Cara Menambah Gadget diatas Header. Tapi cara ini sama dengan membuat header terbagi menjadi 2 bagian yaitu header disebelah kiri dan gadget terletak disebelah kanan header.
Berikut gambar header yang terbagi menjadi 2 :

Bila anda berminat, silahkan anda ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Cari kode yang sama atau mirip dengan kode berikut :

/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
color: $(header.text.color);
}

.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}

.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}

.header-inner .Header .descriptionwrapper {

padding: 0 $(header.padding);

}

Catatan :

Setiap template biasanya berbeda kodenya, yang penting perhatikan kode - kode yang ada pada bagian (/* Header)

6. Ganti kode diatas dengan kode dibawah ini :

/* Header
----------------------------------------------- */
#header {
float:left;
width:40%;
margin: 0px;
text-align: center;
color:#ffcc66;
}

#header2{float:left; width:60%;}

7. Kemudian silahkan anda cari lagi kode yang sama atau mirip dengan kode berikut :

8. Ganti kode diatas dengan kode dibawah ini :

10. Simpan Template.

Nah.... jadi deh....,
Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Judul: Cara menambah gadget pada Header; Ditulis oleh Unknown; Rating Blog: 5 dari 5

CSS3 TransisiSetelah yang lalu kita belajar tentang Transformasi 2D, kemudian agar lebih menarik kita tambahkan dengan efek transisi. Dengan CSS3 transisi, kita dapat menambahka ... readmore
CSS LINKPenggunaan css pada fitur css link sangat bervariasi. Ada banyak fungsi pada fitur css link, kita bisa mengatur warna link, warna latar pada link, merubah warna pad ... readmore
Cara membuat Bar mengambang atau Floating Bar on Top pada blogFloating Bar sering kali kita jumpai ketika kita membuka blog atau merefressnya kembali. Floating Bar tersebut seperti pop up, biasanya berisi iklan teks, banner, a ... readmore
CSS3 GeneratorSebelum memasuki pembahasan tentang CSS3 Generator, saya akan menjelaskan tentang Apa itu CSS3? mungkin dari kalian ada yang belum mengetahuinya menurut info yang s ... readmore
CSS BackgroundFitur dari css Background berfungsi untuk memberi efek latar belakang suatu elemen. Beberapa properti dan kelebihan dari fitur ini diantaranya kita bisa memberi efe ... readmore