Mempercantik blogspot-memnuat kolom blog pada header menjadi 2


 
Azon Profit Master
Bola Freak


Menambah Kolom Blog pada header Menjadi 2 kolom

Menambahkan elemen halaman baru pada header atau Membagi header menjadi dua kolom.

bagaimana cara pemasangannya pada blog...
Untuk menggunakan trik ini sebaiknya sobat blogger membuat blog baru untuk latihan atau belajar dan jangan menggunakan blog utama....
karena bisa mengakibatkan kerusakan pada template anda nantinya......
silahkan di pasang pada blog anda.....?
Berikut langkah-langkahnya:

1. Seperti biasa dalam keadaan log in pada account sobat
2. Klik Tata Letak
3. Klik Edit HTML
4. Bisa Download Template Lengkap jika khawatir gagal
5. Sekarang cari kode CSS seperti beikut:

/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

6. Ganti semua kode diatas dengan kode berikut:
/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 0px;
background:#ffff;
height:180px;
}
#header-one {
width:50%;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
#header_two{
width:50%;
float:left;
padding-top:10px;
}




Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka widht dengan lebar header template sobat.
7. Sekarang cari kode seperti berikut:
<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat  Eksperimen Kecil (Header)' type='Header'/>
</b:section>
    </div>

8. Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang menyarupai contoh dibawah ini:
<div id='header-wrapper'>
<div id='header-one'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat  Eksperimen Kecil (Header)' type='Header'/>
</b:section>
    </div>
<div id='header_two'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div> 

9. Klik Simpan Template
10. Selesai
Untuk melihat hasil, klik elemen halaman, lihat dan amati perubahan tersebut.....
jika eksperimennya berhasil. Silahkan isi kolom baru dengan ragam widget atau ads.
Semoga bermanfaat dan sukses selalu!

0 Response to "Mempercantik blogspot-memnuat kolom blog pada header menjadi 2"

Poskan Komentar

Catatan:
1. Berkomentarlah dengan bahasa yg jelas dan mudah dimengerti.
2. Untuk menyisipkan gambar gunakan kode [img]Tulis URL gambar di sini[/img]
3. Untuk menyisipkan video gunakan kode [youtube]Tulis URL Video Youtube di sini[/youtube]
4. Untuk melihat kumpulan emoticon klik tombol emoticon dibawah ini.
Emoticon

Google+ Followers

Bagaimanakah web murah hati menurut anda?