Cara Menciptakan 3 Kolom Di Bawah Header Blog

Cara Membuat 3 Kolom di Bawah Header Blog - Bagaimana kabarnya teman blogger? terasa sudah usang tidak posting, kali ini aku akan share cara menambah 3 kolom dibawah header blog. pada umumnya desain setiap template berbeda-beda, ada yang sudah memenuhi kebutuhan kita dan juga masih defaul. nah,,, bersama-sama menciptakan kolom pada template sesuai kebutuhan itu gampang kalau sudah mengetahui caranya,,, Ok!! kebetulan aku sudah dapatkan tutorialnya buat teman semua untuk dengan gampang menambah 3 kolom dibawah header, kurang lebihnya ibarat gambar dibawah ini:

Jika teman tertarik untuk menciptakan 3 kolom dibawah header, teman Ikuti Tutorial berikut ini::

• Login ke Blogger
• Pada Dasboard klik Template >>> Klik Edit HTML
• Silahkan cari aba-aba ]]></b:skin> (untuk lebih cepat tekan Cntrl+F)
• Letakkan aba-aba berikut diatas aba-aba ]]></b:skin>

* 3kolom-atas
---------------------------- */
#3kolom-atas {
width: 930px;background:#666666;
position: relative;display:inline;
clear:both;
margin:0 auto 0;
color:#000;
float: left;
padding:10px;
}
#kiri-atas {
width: 290px;
float: left;display:inline;
margin:10px 5px 0 5px;
padding:5px
}
#tengah-atas {
width: 280px;
float: left;
margin:10px 5px 0;
padding:5px
}
#kanan-atas {
width: 290px;
float: left;display:inline;
margin:10px 5px 0;
padding:5px
}

• Selanjutnya, teman Cari Kode berikut ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDUL BLOG KAMU (Header)' type='Header'/>
</b:section>
</div>

• Jika sudah ketemu, letakkan aba-aba HTML dibawah ini sempurna diatas aba-aba diatas.

<div id='3kolom-atas'>
<b:section class='3kolom-atas' id='kiri-atas' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='3kolom-atas' id='tengah-atas' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='3kolom-atas' id='kanan-atas' preferred='yes' showaddelement='yes'>
</b:section>
</div>

• Simpan Template Anda dan lihat hasilnya..

Keterangan :

Jika template sudah memakai sajian navbar letakkan aba-aba HTML (Langkah no 6) dibawah aba-aba navbar, Sobat sanggup mencari aba-aba navbar dibagian bawah aba-aba header Atau jiika galau letakkan aba-aba langkah no.6 dibawah  <div id='content-wrapper'>

Perhatikan aba-aba berwarna merah silahkan ubah sesuai dengan lebar kolom template teman dan masing-masing kolom juga harus diadaptasi biar tidak saling bertabrakan, untuk warna hijau adalah aba-aba untuk warna background widget.

Share this post