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;
}
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;
}
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>
</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>
SELESAI...
SEMOGA MEMBANTU
1 comments:
Write commentsmakasih infonya sob
ReplyEmoticonEmoticon