Home » » Menambahkan Kolom di Sebelah Kiri Pada Blogspot
| 2 komentar ]

Awalnya sih cuma pengen iseng-iseng aja nambahin sidebar di sebelah kiri, itung-itung belajar lah. Trus saya coba googling di google akhirnya dapat. Nih kalau mau tau caranya menambah sidebar di sebelah kiri, caranya adalah sebagai berikut :

1. Login ke Blogspot --> layout --> Edit HTML
2. Download template untuk jaga-jaga biar bila ada kesalahan dalam proses edit HTML, bisa dikembalikan lagi ke template awal.
3. Liat di bagian Outer Wrapper, tambahkan kode dan rubah beberapa variabel seperti dibawah ini: 

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 420px;
float: left;
padding: 5px;
border:1px solid $bordercolor;
background-color:#c77c7c;
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 */
}
#sidebar-wrapper {
width: 200px;
float: right;
padding: 5px;
border:1px solid $bordercolor;

background-color:#c77c7c;
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 */
}
#newsidebar-wrapper {
width: 200px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
Catatan:

Kode dengan warna biru menunjukan kode aslinya.
Kode dengan warna hijau menunjukan kode yang ditambahkan.
Kode yang ditulis dengan angka merah merupakan variabel yang bisa dirubah harganya.
Outer wrapper merupakan lebar template, rubah angkanya seperti yang diinginkan; pada contoh diatas, lebarnya dari 660px dirubah jadi 840px. 
Main wrapper adalah lebar kolom posting, pada contoh diatas lebarnya dari 410px diubah jadi 420px. 
Sidebar wrapper adalah lebar sidebar yang dinginkan, pada contoh lebarnya dari 220px diubah jadi 200px. 
Float menunjukan letak side bar di kiri atau dikanan.


4. Kemudian liat di bagian bawah, tambahkan kode di bawah ini sebelum kode <div id='main-wrapper'>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'/>
</div>
5. Simpan.

Selamat mencoba.

Share |

Artikel Terkait :



2 komentar

Ivan Afifudin mengatakan... @ 1 Mei 2013 pukul 16.40

di html saya koq gk ada /* Outer-Wrapper ya gan?? mohon dibantu http://ivanafx.blogspot.com

Unknown mengatakan... @ 20 Desember 2015 pukul 03.53

Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.

Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

Posting Komentar

Recent Reader