Artikel membagi sidebar blogspot jadi 2 kolom ini sebetulnya banyak sahabat blogger yang menulis di situsnya tetapi berhubung ada sahabat pengunjung website Belajar Pengetahuan Computer yang bertanya jadi saya juga ikut-ikutan menulis langkah membagi sidebar jadi 2 kolom ini supaya pengunjung website BIK Pemula ini tidak sulit mencari lagi kesana-kemari.
Membagi sidebar jadi dua kolom atau dalam kata lainnya sidebar 1 kolom di atasnya lalu sidebar di bawahnya dirubah jadi 2 kolom. Bila belumlah jelas juga lihat misalnya disini.
Lihat di sample website itu ada 3 buah sodebar yang terbagi dalam 1 kolom serta 1 buah sidebar yang saya untuk jadi 2 kolom yg letaknya dibawah gadget follower.
Bagimana apakah sahabat telah lihat contoh hasil dari 1 sidebar jadi 2 kolom? bila telah saksikan serta tertarik untuk merubah sidebar sahabat jadi 2 kolom silakan ikuti langkahnya di bawah ini.
Pertama kali login terlebih dulu ke blogger dengan account sahabat sendiri, lalu click Design serta Ubah HTML.
Sesudah masuk ke halaman Ubah HTML, mencari kode sebagai 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 */
}
sesudah temukan kode diatas, blok semuanya kode diatas serta copy lalu paste dibagian bawah kode diatas hingga akhirnya jadi sebagai 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 */
}
Setelah itu karena kita akan membagi 1 kolom sidebar jadi 2 kolom sidebar, jadi lebar (width) sidebar hasil copyan yang tadi yg semestinya 240px dibagi 2 hingga jadi 120px. Berhubung pada 2 kolom itu mesti ada jarak jadi lebar kolom itu dikurangi lagi jadi 115px, sedang bekasnya adalah jarak antar ke-2 kolom yakni 10px.
Terkecuali merubah ukuran lebar sidebar, pengertian sidebar jg mesti dirubah, yg semula bernama #sidebar-wrap kita ganti jadi #kolom1-wrap hingga hasil kode pergantian jadi sebagai 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 */
}
Setelah itu karena masih tetap 1 kolom jadi copy kembali kode itu serta namakan #kolom2-wrap hingga kode keseleruhannya sebagai 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 */
}
<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, pasti tidak sama juga dengan kode yang berada di website sahabat, jadi kode itu tak perlu dihiraukan saja, yg penting ialah kode diatas serta dibawah kode berwarna merah itu, karena kode yang berwarna merah ialah adalah suatu gadget, jadi menganggap saja kode itu tak ada.
Copy kode diatas lalu pastekan dibawah kode diatas sejumlah 2 kali, hal tersebut dikerjakan karena kita akan merubah jadi 2 kolom, hingga kode sedetailnya jadi sebagai 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>
Kemudian, ganti id kode hasil copy-an pertama jadi kolom1-wrap serta hasil copy-an 2 jadi kolom2-wrap hingga hasil pada akhirnya jadi seperti kode tersebut :
<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 menggerakkan langkah diatas jadi selesai telah langka untuk merubah 1 kolom sidebar jadi 2 kolom telah usai, selamat coba mudah-mudahan artikel ini dapat menolong.
Baca juga : lupa password windows
0 komentar:
Post a Comment