Iklan 300 x 250

Random Post

Recent Post

 

Cara Menambahkan Dua Dan Tiga Kolom Elemen Halaman Dibawah Header

Text Resizer: Click for Resizer
Allahamdullillah sekarang tutorial merujuk ke design template terkadang pada setiap template memiliki elemen halaman berbeda tergantung dari yang membuat template tersebut. Kali ini aku akan share ilmu pada teman-teman tentang bagaimana menambahkan elemen halaman di bawah header menjadi 3 kolom, seperti blog tutorial terkenal yang menggunakan template magazine"Kang rohman yang hasilnya akan seperti gambar dibawah"


Berikut tutorial cara menambahkannya :

  • Login Blogger
  • Pada dasbor ---> Klik Rancangan. ---> Klik Edit HTML.
  • Jangan lupa download template Lengkap, untuk berjaga-jaga kalau terjadi kesalahan kamu bisa kembali ke template awal dengan klik Download Template Lengkap.
  • Centang Expand Template Widget Seperti Gambar di bawah


  • Cari kode ]]></b:skin> setelah ketemu copas kode dibawah ini dan letakkan diatasnya

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

  • Kemudian cari kode berikut atau yang mirip kode berikut :

<div id='main-wrapper'>

  • Setelah dapat letakkan CSS kode berikut diatasnya Untuk Dua Kolom header

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>


  • Jika ingin tiga kolom dibawah header maka kode berikut yang sobat letakkan diatas kodenya

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

  • Simpan template dan lihat hasilnya dibagian elemen halaman, jika berhasil sobat akan melihat seperti screenshot diatas.

Semoga bermanfaat. I hope you enjoyed this tutorial See Yaa


Artikel Terkait:

Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Cara Menambahkan Dua Dan Tiga Kolom Elemen Halaman Dibawah Header
Dalam Kategori :
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

4 komentar:

Ella mengatakan... Reply Comment

kalau mau menambahkan header di atas halaman posting gimana ya ? salam kenal dan berkunjung balik.

Noubi noku mengatakan... Reply Comment

kalo di template aku cara memasangnya dibawah <div id='bar'> silahkan cari aja kodenya semoga berhasil yach :d:

Menarik nih....coba ah...:c:

mas, kalau mau nambahin 3 kolom dibawah posting gmna?
kayak punya'nya mas nobi
please di bales, aku tunggu
:x:

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Posting Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky