Cara Membuat Template 3 kolom dengan Kolom Posting di Tengah
Sebelumnya saya memposting artikel tentang cara merubah Template 2 kolom menjadi 3 kolom dengan kolom postingan di samping. Kali ini saya akan Membuat Template 3 kolom dengan Kolom Posting di Tengah.
Sesuai permintaan dari sebagian pengunjung kali ini saya akan membuat trik tersebut. Mungkin setiap template memiliki kode HTML yang berbeda-beda, tetapi triknya sama saja sebenarnya.
Cara Membuat Template 3 kolom dengan Kolom Posting di Tengah:
- Login ke akun Blogger
- Pilih Template >> Edit HTML
- Cari kode yang mirip dengan kode berikut ini: #outer-wrapper (gunakan ctrl F agar lebih mudah mencarinya)
- Selanjutnya cari kode yang mirip dengan yang berikut ini:
#main-wrapper (gunakan ctrl F agar lebih mudah mencarinya) - Cari kode yang mirip dengan kode berikut ini:
#sidebar-wrapper (gunakan ctrl F agar lebih mudah mencarinya) - Kemudian copy-paste kode berikut ini di atas kode #main-wrapper (kode di no. 4)
- Terakhir, copy-paste script berikut ini, dan tempatkan di atas kode <div id='main-wrapper'>
- Simpan Template. Coba cek Tata Letak apakah ada elemen baru disana
----------------------------Ganti angka 660 menjadi 900
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
----------------------------
-----------------------------Ganti angka 410 dengan 450
#main-wrapper {
width: 410px;
float: $startSide;
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 */
}
-----------------------------
---------------------------------Ganti angka 220 dengan angka 200
#sidebar-wrapper {
width: 220px;
float: $endSide;
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-wrapper {
width: 200px;
float: left;
margin-right:10px;
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 */
}
----------------------------------
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
Jika mencari artikel lainnya silahkan cek di bawah ini:
Join the conversation