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.
1 comment:
makasih om untuk triknya langsunga ane coba
Post a Comment
Bagaimana menurut anda tentang artikel ini, Berikan Komentar anda di sini... komentar spam akan dihapus