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