Cara membuat 3 kolom di bawah header blog

Akhirnya saya sudah bisa posting lagi untuk sementara karna kesibukan ujian jadi tersita
deh waktu untuk ngeblognya.heheh
waktu lalu saya baru memposting tentang tips blog yang saya beri tahu yaitu  : 
Cara Membuat Menu Navigasi Horizontal Di Bawah Menu Utama .
sudah Dan sekarang saya ingin memposting tentang Cara membuat 3 kolom di bawah header blog.
Langsung saja ya kita mulai tutorial nya :


* Seperti biasa, Login dulu di http://blogger.com/
* Di jendela dashboard, klik menu layout lalu pilih edit HTML
* Setelah itu, jangan lupa kasih tanda centang di expand template widget

lalu tekan CTRL+F untuk mempermudah mencarinya.*Letakkan kode css berikut ini diatas kode ]]></b:skin>




/* Top Header
---------------------------- */
#topheader {
width:1000px;
clear:both;
float:left;
color:#F2F2F2;
background-color:#0B3B39;
border: 5px solid #FBEFFB;
margin-top:10px;
margin-bottom:10px;
padding:0 0 10px;
}

#topheader a:visited {
color:#2EFE2E;
}

#topheader h2 {
font-size:11px;
margin:0 0 10px;
padding:20px 0 2px;
}

#topheader ul  {
color:#333;
margin:0;
padding:0;
}

#topheader ul li  {
background:#0B3B39;
padding-left:17px;
margin-top:1px;
}

#left-topheader {
width:300px;
float:left;
padding-left:15px;
}

#center-topheader {
width:300px;
float:left;
padding:0 20px;
}

#right-topheader {
width:300px;
float:right;
padding-right:5px;
}

  • Lalu Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Judul Blog sobat (Header)' type='Header'/>
</b:section>

  • Kemudian letakkan kode berikut ini tepat setelah kode diatas :


<div id='topheader'>
<b:section class='topheader' id='left-topheader' preferred='yes'>
<b:widget id='HTML8' locked='false' title='Tips blog' type='HTML'/>
</b:section>
<b:section class='topheader' id='center-topheader' preferred='yes'>
<b:widget id='HTML10' locked='false' title='Tips komp' type='HTML'/>
</b:section>
<b:section class='topheader' id='right-topheader' preferred='yes'>
<b:widget id='HTML12' locked='false' title='Tips fb' type='HTML'/>
</b:section>
</div>



Terakhir,, Save template (simpan)
Selesai...







   …Semoga Bermanfaat… !.Semoga Sukses.! .send komentar ya.




Artikel terkait:

{ 6 komentar... read them below or add one }

Chandra  mengatakan...

ini saya udah bisa... siple. tapi tetap semangat,

http://www.ch4ndr4.com jangan lupa datang ke tempat saya. komen+follow saya tunggu.

tips komputer mengatakan...

izin nyimak dulu, sob :D
oiya tapi lebih efektif mana sih kalo semua isi kolom itu ditaruh di sidebar kiri/kanan????

hmmm eh iya, tau cara buat PDF secured ga ???? kalo tau, tolong dishare yah :)

fajarnoverdi mengatakan...

@chandra .
thx y .
ok .
keep spirit.

imamm mengatakan...

makasih infonya ditunggu yang lain

lomboktripledivision mengatakan...

thank alot bro infox, saya coba dulu yah?

Muhammad Hilmy Fauzan mengatakan...

kok saya gak nemu yah yg di bawah kode head tolong di jwab donk mas saya pakai tempalte jendela gambar

Posting Komentar

terima kasih telah berkunjung sobat.
Silahkan komentar,kritik dan sarannya
setidaknya tegur sapa.heheh