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