Blog Menjadi 3 Kolom

Setelah kita mencoba membuat footer menjadi 3 kolom, g ada salah dan dosanya kalo kita mencoba membuat blog kita menjadi 3 kolom.

Caranya gampang dan prinsipnya sama dengan cara membuat footer menjadi 3 kolom. Yang perlu kita kuasai dulu adalah konsepnya.

Yuk kita bahas bareng.....iyuuuukkkssss.......

Blog pada umumnya (yang masih aseli), bagian blog terdiri dari 3 bagian. Yaitu :

1- Header
2- Outer
3- Footer
4- Dah, cuma 3 j.

Nah, pada trick kali ini, kita akan ngublek2 pada bagian Outer, dimana disitu terdapat Main dan Sidebar. Main adalah tempat dimana kita biasa mencurahkan buah pikiran kita. Bahasa kerennya adalah 'Tempat Postingan'. oalaaaaaaaah..... Trus, sidebar tu, yang ada disebelah kiri/kanan main. Biasanya tempat shoutbox, label2, link, banner, widget2, de el el, de es be.

Untuk membuat blog kita menjadi 3 kolom, yg kita lakukan adalah menambah sidebar kita.

Pada awalnya, sidebar hanya ada 1, seperti ini :




Sekarang, kita mulai....Jangan lupa untuk mendownload template asli anda.

Pertama, cari kode ini

#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background: #999;
width:744px;
margin:10px auto;
text-align:$startSide;
font: $bodyFont;
}

Nilai pada 'width' adalah lebar outer keseluruhan. Karena kita akan menambahkan 1 sidebar, maka kita perlu menambah lebar outer nya. Semisal kita akan menambah sidebar selebar 200px, maka kita harus mengganti lebar outer, 744 + 200 = 944. Ditambah lagi untuk jarak sela, misalnya 10px, maka jadi 954. Langsung kita ganti saja nilai width menjadi 954.

Langkah selanjutnya adalah menambah sidebar baru. Kita cari kode berikut :


#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Ini adalah kode untuk sidebar yang sudah ada. Perlu diketahui, jangan bingung jika banyak kode yang berbeda, karena kode tiap template biasanya memang berbeda.

Setelah menemukan kode sidebar asli, sekarang kita copy kodenya, lalu paste diBAWAH kode sidebar asli. Sehingga, kini akan ada 2 kode sidebar yang sama. Nah, untuk membedakan sidebar baru dengan yang asli, kita perlu merubah beberapa kode. Perhatikan kode berikut :

#sidebar2 {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:200px;
float:$endSide;
padding-left :10;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Kode berwarna merah adalah kode yang harus diganti. Nilai pada width adalah lebar sidebar baru, kita beri sesuai perhitungan yang sudah kita lakukan. Sehingga, kodenya akan seperti ini:


#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar2 {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:200px;
float:$endSide;
padding-left :10px;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Nah, setelah kita membuat kode sidebar baru kita, sekarang waktunya untuk 'melahirkan' sidebar baru ini diblog kita. Caranya, silahkan cari kode berikut :

< id='sidebar-wrapper'>


Kemudian copy kode berikut diATAS kode tadi.

<div id='sidebar2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>

Klo dah, simpan template kmu. Lalu lihat pada Elemen Halaman. Ada perubahan??

Nah, kini ada 3 kolom di blog kita? bagaimana agar kolom postingan berada ditengah? Besok2 j y, dah ngantuk neh....c u!!!

8 comments:

  1. iya Bung pengen yang itu bikin blog yg 3 kolom tp duh...putus asa nich ga' brani nguplekin tempelate lagi karena sering gagal trus tulisan layoutnya hilang ganti tulisan tempelate.kali bikin blog lagi untuk percobaan ya Bung...ma'lum hehe..beneran mlompong untuk yg beginian...so..bakal sy coba..makasih ya Bung...pelajarannya O.K ...bahasanya renyah asyik...

    ReplyDelete
  2. kok gw g bisa ya.. selalu muncul tulisan kek gini : Lebih dari satu bagian ditemukan dengan id: sidebar. ID Bagian haruslah unik.

    ReplyDelete
  3. @samh sidebar diganti dengan sidebar2, supaya namanya g sama

    ReplyDelete
  4. Trims mas langsung jadi nih....

    ReplyDelete
  5. dah post triks postingan agar di tengah2 blom bro klo udah yang mana ya ?

    ReplyDelete
  6. wah mantab nih sob langsung tak coba dech

    ReplyDelete
  7. makasih boss
    udah terbagi menjadi 3 kolom, tp posisinya berantakan..:p

    ReplyDelete

Klo ada pertanyaan, masukan ato tips yang lebih mudah, koment aja y..Insya Allah Ayas bales.. Thanks all..moga2 bermanfaat

 
Copyright © 2013. About - Sitemap - Contact - Privacy
Template Seo Elite oleh Bamz