Cara Membuat 3 Kolom di Bawah Header Blog

Home » » Cara Membuat 3 Kolom di Bawah Header Blog




Cara Membuat 3 Kolom di Bawah Header Blog




Cara Membuat 3 Kolom di Bawah Header Blog - Bagaimana kabarnya sobat blogger? terasa sudah lama tidak posting, kali ini saya 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,,, sebenarnya membuat kolom pada template sesuai kebutuhan itu mudah jika sudah mengetahui caranya,,, Ok!! kebetulan saya sudah dapatkan tutorialnya buat sobat semua untuk dengan mudah menambah 3 kolom dibawah header, kurang lebihnya seperti gambar dibawah ini:


Jika sobat tertarik untuk membuat 3 kolom dibawah header, sobat Ikuti Tutorial berikut ini::


  • Login ke Blogger
  • Pada Dasboard klik Template >>> Klik Edit HTML
  • Silahkan cari kode ]]></b:skin> (untuk lebih cepat tekan Cntrl+F)
  • Letakkan kode berikut diatas kode ]]></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, sobat 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 kode HTML dibawah ini tepat diatas kode 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 menggunakan menu navbar letakkan kode HTML (Langkah no 6) dibawah kode navbar, Sobat bisa mencari kode navbar dibagian bawah kode header Atau jiika bingung letakkan kode langkah no.6 dibawah  <div id='content-wrapper'>

Perhatikan kode berwarna merah silahkan ubah sesuai dengan lebar kolom template sobat dan masing-masing kolom juga harus disesuaikan agar tidak saling bertabrakan, untuk warna hijau yaitu kode untuk warna background widget.


Cara Membuat 3 Kolom di Bawah Header Blog






.
Share this article :