Artikel membagi sidebar blogspot menjadi 2 kolom ini sebenarnya sudah
banyak sobat blogger yang menulis di blognya namun berhubung ada sobat
pengunjung blog Belajar Ilmu Komputer yang menanyakan maka saya juga
ikutan menulis cara membagi sidebar menjadi 2 kolom ini agar pengunjung
blog BIK Pemula ini tidak susah mencari lagi kesana-kemari.
Membagi sidebar menjadi dua kolom atau dengan kata lain sidebar 1 kolom
di atasnya kemudian sidebar di bawahnya diubah menjadi 2 kolom. Kalau
belum jelas juga perhatikan contohnya di
sini.
Perhatikan di sample blog tersebut terdapat 3 buah sodebar yang terdiri
dari 1 kolom dan 1 buah sidebar yang saya bagi menjadi 2 kolom yg
letaknya di bawah gadget follower.
Bagimana apakah sobat sudah melihat contoh hasil dari 1 sidebar menjadi 2
kolom ? kalau sudah lihat dan tertarik untuk mengubah sidebar sobat
menjadi 2 kolom silahkan ikuti caranya berikut ini.
Pertama-tama login terlebih dahulu ke blogger dengan akun sobat sendiri, kemudian klik Design dan Edit HTML.
Setelah masuk ke halaman Edit HTML, cari kode seperti berikut :
#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}
setelah menemukan kode di atas, blok semua kode di atas dan copy
kemudian paste di bagian bawah kode di atas sehingga hasilnya menjadi
seperti berikut :
#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}
Selanjutnya karena kita hendak membagi 1 kolom sidebar menjadi 2 kolom
sidebar, maka lebar (width) sidebar hasil copyan tadi yg seharusnya
240px dibagi 2 sehingga menjadi 120px. Berhubung antara 2 kolom tersebut
harus ada jarak maka lebar kolom tersebut dikurangi lagi menjadi 115px,
sedangkan sisanya merupakan jarak antar kedua kolom yaitu 10px.
Selain mengubah ukuran lebar sidebar, definisi sidebar jg harus diubah,
yg sebelumnya bernama #sidebar-wrap kita ubah menjadi #kolom1-wrap
sehingga hasil kode perubahan menjadi seperti berikut :
#kolom1-wrap {
width:115px;
padding:0;
float:$endSide;
font-size:97%;
line-height:1.5em;
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 */
}
Selanjutnya karena masih 1 kolom maka copy kembali kode tersebut dan
namakan #kolom2-wrap sehingga kode keseleruhannya seperti berikut :
#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}
#kolom1-wrap {
width:115px;
padding:0;
float:$endSide;
font-size:97%;
line-height:1.5em;
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 */
}
#kolom2-wrap {
width:115px;
padding:0;
float:$Left;
font-size:97%;
line-height:1.5em;
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 */
}
Sampai di sini belum selesai sobat, mari kita lanjutkan untuk mencari kode seperti berikut :
<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>
Perhatian !!!, untuk kode yg berwarna merah,
tentu tidak sama dengan kode yang ada di blog sobat, jadi kode tersebut
tidak usah dihiraukan saja, yg terpenting adalah kode di atas dan di
bawah kode berwarna merah tersebut, karena kode yang berwarna merah
adalah merupakan sebuah gadget, jadi anggap saja kode tersebut tidak ada.
Copy kode di atas kemudian pastekan di bawah kode di atas sebanyak 2
kali, hal ini dilakukan karena kita akan mengubah menjadi 2 kolom,
sehingga kode selengkapnya menjadi seperti berikut :
<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>
<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>
<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>
Setelah itu, ubah id kode hasil copy-an pertama menjadi kolom1-wrap dan
hasil copy-an 2 menjadi kolom2-wrap sehingga hasil akhirnya menjadi
seperti kode berikut :
<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>
<div id='kolom1-wrap'><div id='kolom1-wrap'>
<b:section class='sidebar' id='sidebar2klm1' preferred='yes'>
<b:widget id='Text1' locked='false' title='Kolom 1' type='Text'/>
</b:section>
</div></div>
<div id='kolom2-wrap'><div id='kolom2-wrap'>
<b:section class='sidebar' id='sidebar2klm1' preferred='yes'>
<b:widget id='Text1' locked='false' title='Kolom 1' type='Text'/>
</b:section>
</div></div>
Nah dengan berakhirnya menjalankan langkah di atas maka berakhir sudah
langka untuk mengubah 1 kolom sidebar menjadi 2 kolom sudah selesai,
selamat mencoba semoga artikel ini bisa membantu.
