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..
Tags

Top Post Ad

Below Post Ad