Artikel membagi sidebar blogspot menjadi 2 kolom ini bekerjsama sudah banyak sahabat blogger yang menulis di blognya namun berhubung ada sahabat pengunjung blog yang menanyakan maka saya juga ikutan menulis cara membagi sidebar menjadi 2 kolom ini semoga 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 lalu sidebar di bawahnya diubah menjadi 2 kolom. Kalau belum terang juga perhatikan misalnya 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 sahabat sudah melihat pola hasil dari 1 sidebar menjadi 2 kolom ? bila sudah lihat dan tertarik untuk mengubah sidebar sahabat menjadi 2 kolom silahkan ikuti caranya berikut ini.
Pertama-tama login terlebih dahulu ke blogger dengan akun sahabat sendiri, lalu klik Design dan Edit HTML.
Setelah masuk ke halaman Edit HTML, cari isyarat menyerupai 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 */
}
sehabis menemukan isyarat di atas, blok semua isyarat di atas dan copy lalu paste di penggalan bawah isyarat di atas sehingga hasilnya menjadi menyerupai 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 sebab 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 berjulukan #sidebar-wrap kita ubah menjadi #kolom1-wrap sehingga hasil isyarat perubahan menjadi menyerupai 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 sebab masih 1 kolom maka copy kembali isyarat tersebut dan namakan #kolom2-wrap sehingga isyarat keseleruhannya menyerupai 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 isyarat menyerupai 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 isyarat yg berwarna merah, tentu tidak sama dengan isyarat yang ada di blog sobat, jadi isyarat tersebut tidak usah dihiraukan saja, yg terpenting ialah isyarat di atas dan di bawah isyarat berwarna merah tersebut, sebab isyarat yang berwarna merah ialah merupakan sebuah gadget, jadi anggap saja isyarat tersebut tidak ada.
Copy isyarat di atas lalu pastekan di bawah isyarat di atas sebanyak 2 kali, hal ini dilakukan sebab kita akan mengubah menjadi 2 kolom, sehingga isyarat selengkapnya menjadi menyerupai 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 isyarat hasil copy-an pertama menjadi kolom1-wrap dan hasil copy-an 2 menjadi kolom2-wrap sehingga hasil hasilnya menjadi menyerupai isyarat 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 sanggup membantu.
Tidak ada komentar:
Posting Komentar