Skip to main content

Menambah 2 kolom di bawah sidebar utama

Tutorial blogspot - Waw cerahnya pagi ini... secerah hatiku. Karena itu kali ini aku semangat sekali bagi - bagi info untuk sobat. Setelah sebelumnya abang CHRIS ( itu nama ane bro... Sekedar perkenalan. hehehe ) memposting tentang cara membuat spoiler pada widget sidebar tanpa edit HTML, kali ini masih seputar Sidebar. Yaitu bagaimana Menambah 2 kolom di bawah sidebar utama.

Tanpa berlambat - lambat waktu kita langsung saja ke cara pasangnya. Oke!!

1. Pertama sobat login dulu ke akun blog sobat.
2. Kemudian klik Rancangan ---> edit HTML
3. Cari kode yang mirip dengan kode berikut

#sidebar-wrapper {
width: 300px;
float: $endSide;
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 */
}

Tmbhn
Ganti kode width : 350px; dengan nilai atau lebar dari sidebar blog sobat dan float : $endside; dengan letak sidebar sobat.
 $endside  sama dengan Right(kanan)
 $starside sama dengan left(kiri)

 Perhatikan!
Untuk menambah 2 sidebar di bawah sidebar utama sobat harus memprehatikan lebar dari sidebar utama. dengan kata lain jika lebarnya 300 maka untuk 2 kolom baru  di bawahnya dibagi 2 yaitu menjadi 150px; jarak antara kedua sidebar adalah 10px;
maka hasilnya yaitu 145px;. Oke!! udah jelaskan? ayo ita lanjut.

4.Letakkan kode berikut dibawah kode nomor 3.
#left-col {
width:145px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:145px;
float:right;
word-wrap:break-word;
overflow:hidden;
}

  Hasilnya akan seperti ini:
#sidebar-wrapper {
width: 350px;
float: right;
$startSide
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 */
}
#left-col {
width:145px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:145px;
float:right;
word-wrap:break-word;
overflow:hidden;
}

5. Kemudian cari kode berikut
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= blablabla....
</b:section>
</div>



6.Copy kode berikut.
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>

7. Letakkan di antara kode seperti di bawah ini

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= blablabla..../>
</b:section>
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
</div>

8. Simpan template. Kemudian klik ELEMEN LAMAN
Jika tepat maka hasilnya akan seperti ini;











SELESAI...
SEMOGA MEMBANTU
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar