Translate This Page Here

By Kanwara

Thursday, July 23, 2009

Tambah 3 Kolom di Atas Blog

Kemarin saya habis modifikasi template ya menurut saya sekarang lebih bagus lah dari yang kemarin. Hmm sekarang saya ingin bahas apa ya? Hmm bahas bagaimana tambah 3 kolom diatas (seperti yang saya pakai). Saya yakin pasti ini artikel yang ke 1000an yang membahas tentang tambah 3 kolom diblog. Namun mudah-mudahan tetap ada manfaatnya, semakin banyak ada artikel semakin bagus dan mudah untuk para pemula mencarinya, dan siapa tahu gayanya pun berbeda-beda. Bagaimana sobat ingin menambah 3 kolom diatas wrapper/arena posting/dibawah menu navbar sobat? Kalau ya ikuti langkah dibawah ini:

1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ]]</b:skin>

5. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:
/****** AWAL 3 Kolom Atas *****/

#kolomatas {
width: 940px; /* sesuaikan dgn blog sobat */
position: relative;
float: left;
clear:both;
margin: 0 auto;
padding: 15px 0 15px 0;
color:#fff; /* BISA SOBAT GANTI */
background:#BDBABD; /* BISA SOBAT GANTI */

}

#kolomatas h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00; /* BISA SOBAT GANTI */

font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff; /* BISA SOBAT GANTI */

}

#kolomatas ul {
padding: 0;
margin: 0;
}

#kolomatas ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d; /* BISA SOBAT GANTI */
}

#kolomatas ul li a {
display: block;
padding: 0 10px;
color:#0701FD; /* BISA SOBAT GANTI */
text-decoration: none;

}
#kolomatas ul li a:hover {
background: #B1ACB1;
}

#kolomatas-kiri { /* kode kolom kiri */
width: 305px;
float: left;
padding-left:10px;
border-right:3px double #ccc; /* Bisa sobat ganti */
}

#kolomatas-tengah { /* kode kolom tengah */
width: 305px;
float: left;
padding-left:10px;
border-right:3px double #ccc; /* Bisa sobat ganti */
}

#kolomatas-kanan { /* kode kolom kanan */
width: 305px;
float: left;
padding: 0 5px 0 10px;
}

/****** FINISH 3 Kolom Atas *****/


6. Setelah memasang kode tadi, cari kode ini :
<div id="main-wrapper">
(Contoh saja)

7. Setelah ketemu, tambahkan kode diwabah ini tepat di ATAS kode tadi:
<div id='kolomatas'>
<b:section class='kolomatas' id='kolomatas-kiri'/>
<b:section class='kolomatas' id='kolomatas-tengah'/>
<b:section class='kolomatas' id='kolomatas-kanan'/>
</div>


8. Simpan template dan lihat hasilnya...

PERHATIAN

Jika sobat ingin memasang di bawah wrapper and diatas footer, silahkan kode di no.7 sobat simpan di atas <div class="footer'> (misal). Selesai



Moga manfaat...!

0 comments:

Post a Comment

 

Tutorial Blogspot

Recent Comments

About Us

my logo

TEBE is "Tutorial Blogger". This blog serves as showcase for my project and others blogger. Wanna learn more about web/blog design, css, html, graphic design, photography, programming, etc.
[View my complete profil!]

Connect ith Me


Follow Kanwara on Twitter!Connect with Kanwara on Facebook!Visit my wordpress blog!Join at aRawna Blog Tutorial!

Copyright © 2009 All Rights Reserved TeBe Tutorial Blogger | Designed:Kanwara Dotcom