Cara Membuat 3 Kolom Dibawah Header

Cara Membuat 3 Kolom Dibawah Header - NSX Blogs. Apa teman-teman blogger semua ingin tampilan blognya tambah ramai? Kali ini saya akan menjelaskan sedikit tentang bagaimana cara membuat ramai blog teman-teman semua, salah satunya dengan membuat tiga kolom di bawah header. Widget 3 kolom dibawah header ini sebenarnya bisa Anda tambahkan jika pada bagian sidebar template sudah penuh dan terlalu panjang. Sebagai alternatif untuk meletakkan kode html ataupun javascript yang mungkin andaperlukan. Kurang lebih sama dengan postingan saya yang dulu tentang membuat multi kolom yang diletakkan di bagian bawah blog, namun kali ini saya meletakkannya bagian atas atau tepatnya dibawah header.

Baiklah langsung menuju lokasi pengeditan template-nya.

• Silahkan login ke blogger.
• Tuju Tata Letak.
• Pilih tab Edit HTML.
• Jangan di klik Expand Template Widget, karena akan memusingkan anda.
• Letakkan kode css berikut ini diatas kode ]]></b:skin>

/* –- Top –*/

#top {

background:#fff;

margin-top:10px auto;

width:960px;

overflow:hidden;

font-size:12px;

padding:10px;

}

#top h2 {

background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;

font-size:14pt;

font-weight:400;

text-align:center;

font-style:normal;

line-height:1.3em;

color:#fff;

padding:5px;

margin-top:-10px;

margin-left:-10px;

margin-right:-10px;

}

#top ul {

color:#333;

margin:0;

padding:0;

}

#top ul li {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb4Zc26WKae2Uqj1aSeWDkfyUSitodxPY0rGoXWoCU3Eu7SVAyrMXrtUYN8VksojHf3EhlKKS2SlpdvyOS6yfS6ie7sypywSRRCsNzZPyl-acMN27vPL2aWfajzuGQZ-ikdXW-9_eTPSR0/s320/b3.gif) no-repeat;

list-style-type:none;

border-bottom:1px dashed #CCC;

margin:0 0 10px;

padding:0 0 5px 20px;

}

#top ul li a:hover {

margin:0px 0px 5px;

padding:0px;

}

#topcenter {

width:300px;

float:left;

margin-left:10px;

background:#fff;

padding:10px

}

#topleft {

width:280px;

float:left;

margin-left:10px;

background:#fff;

padding:10px;

}

#topright {

width:280px;

float:right;

margin-left:10px;

background:#fff;

padding:10px;

}

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

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='JUDUL BLOG ANDA (Header)' type='Header'/>

</b:section>

</div>

• Kemudian letakkan kode berikut ini tepat setelah kode diatas :

<div id='top'>

<b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>

</b:section>

<b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>

</b:section>

<b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>

</b:section>

</div>

• Simpan Template. 

Berikut Lankah-Langkah Untuk Menambah 3 Kolom Dibawah Header :

Berikut Lankah-Langkah Untuk Menambah 3 Kolom Dibawah Header : 

1.  Pastikan anda sudah login ke akun blogger/blogspot
2. Setelah ada berada pada halaman Panel Blog anda Pilih " Template"





3. Klik Tombol Edit HTML





4. Klik Tombol Proceed atau Tombol Lanjutkan  kemudian akan muncul halaman Edit HTML seperti berikut





5. Jangan lupa Centang Expand Template Widget.





6. Sebelum melakukan Edit HTML download lengkap template anda terlebih dahulu baca caranya Disini 
7. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode)
8. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin> 

<div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
</div> 

9. Selanjutnya Cari kode <div id='main-wrapper'> atau <div id="main-outer">
10. Copas kode dibawah ini dan letakan diatas salah satu kode <div id='main-wrapper'>   atau <div id="main-outer">

<div id='box-kolom-widget'>
<div id='box1' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

12. Lankah terakhir klik Tombol Simpan Template 





13. Selesai dan lihat hasilnya

Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak atau Layout  jika ada Elemen tambahan Diatas Header Seperti dibawah ini berarti lankah-langkah diatas sudah anda lakukan dengan benar

Demikian Tutorial Kali ini tetang Cara Membuat atau Menambahkan 3 Kolom Dibawah Header Semoga bisa bermanfaat

Read more: http://dapur-tutorial.blogspot.com/2012/02/cara-membuat-atau-menambah-3-kolom.html#ixzz1wEt5iNn1