Membagi Side Kafe Menjadi 2 Kolom
Artikel membagi sidebar blogspot menjadi 2 kolom ini bekerjsama sudah banyak teman blogger yang menulis di blognya namun berhubung ada teman pengunjung blog yang menanyakan maka saya juga ikutan menulis cara membagi sidebar menjadi 2 kolom ini biar 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 teman sudah melihat pola hasil dari 1 sidebar menjadi 2 kolom ? jikalau sudah lihat dan tertarik untuk mengubah sidebar teman menjadi 2 kolom silahkan ikuti caranya berikut ini.
Pertama-tama login terlebih dahulu ke blogger dengan akun teman 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 bab 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 alasannya yakni 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 alasannya yakni 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 yakni isyarat di atas dan di bawah isyarat berwarna merah tersebut, alasannya yakni isyarat yang berwarna merah yakni 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 alasannya yakni 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 risikonya 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.
0 Response to "Membagi Side Kafe Menjadi 2 Kolom"
Post a Comment