Cara Membuat Header Menjadi 2 Kolom terbaru

Bookmark and Share
Farhan - Sobat Farhan sekarang farhan kembali lagi nih, sekarang saya mau nge-bahas tentang Cara Membuat Header Menjadi 2 Kolom. pastinya menarik bukan ? dengan ini kita jadi bisa membuat header blog kita menjadi lebih ramai dan menarik. apasih membuat header menjadi dua kolom ? yaitu kita membuat yang tadinya header hanya 1 kolom, dan sekarang menjadi 2 kolom seperti gambar di samping ini. di blog-blog/web-web biasanya elemen yang kanan digunakan memasang Iklan atau gambar. nanti hasil-nya seperti tampilan header kiri di blog saya ini. langsung aja ini dia langkah-langkahnya :

1. Login ke Blogger.


2. Pilih Template

3. Pilih Edit Html  (Download template full dahulu).

4. Lalu sobat cari kode di bawah ini.

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;


5. Lalu sobat hapus kode berikut dan ganti dengan kode di bawah ini.

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */} 
#header {
width: 45%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left; }
#bgsGR_headerkanan {
float: right;
width: 49%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgsGR_headerkanan .widget {margin: 3px;}


6. sekarang sobat cari kode di bawah ini.

 <div class='region-inner header-inner'>


7. Dan sobat tambahkan kode di bawah ini persis disebelah kode di atas.

<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='4' showaddelement='yes'>


8. Nanti jika di taruh disebelahnya, akan menjadi seperti di bawah ini.

<div class='region-inner header-inner'><b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='4' showaddelement='yes'>


9. Klik "Save Template" dan Selesai.

Selamat mencoba, bila ada pertanyaan comment di bawah.

{ 0 komentar... Views All / Send Comment! }

Poskan Komentar