Sekarang bagaimana membuat tambahan kolom sidebar dan membaginya menjadi dua ?.
Secara default kolom sidebar yang disediakan adalah seperti ini :
Bila ditambahkan dua kolom sidebar baru, nantinya seperti ini :
Contoh diatas menggunakan template minima yang telah diubah lebarnya. Untuk mengetahui cara menambah lebar template bisa dibaca disini. Sekarang kita langsung saja menuju cara membuat dan membagi dua kolom sidebar.
Sigin di draft blogger
Dalam dasbor masuk Tata Letak --> Edit HTML
1. Penambahan Kode CSS
Untuk menambah kolom di template, kita perlu membuat tambahan kode css. Karena yang akan kita buat adalah kolom untuk sidebar , kode yang perlu ditambahkan adalah kode dibawah ,Copy kode ini :
.singlesidebar {float:$endSide; word-wrap:break-word; overflow:hidden}
Letakkan atau paste dibawah kode ini
#sidebar-wrapper{ width:320px; float:$endSide; word-wrap:break-word; overflow:hidden}
Kemudian Save atau simpan dulu.2. Kode ID untuk Pemanggilan
Setelah kode css kita buat, untuk memanggilnya , kita harus mendefenisikannya, yaitu dengan membuat ID pemanggilnya. Untuk itu Copy kode dibawah ini :
<div id='sidebar-wrapper'>
<div class='singlesidebar' style='width:100%'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
<div style='width:100%'><div class='singlesidebar' style='width:50%; float:left;'>
<b:section class='sidebar' id='sidebar1' preferred='yes'/>
</div>
<div class='singlesidebar' style='width:50%;float:right;'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div>
</div><div style='clear:both'/>
</div>
<div class='singlesidebar' style='width:100%'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
<div style='width:100%'><div class='singlesidebar' style='width:50%; float:left;'>
<b:section class='sidebar' id='sidebar1' preferred='yes'/>
</div>
<div class='singlesidebar' style='width:50%;float:right;'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div>
</div><div style='clear:both'/>
</div>
Sekarang kita cari kode berikut , jika sudah ketemu hapus kode ini ganti dengan kode yang telah kita copy, kemudian paste kan disini .
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
Setelah itu anda simpan. Sekarang coba lihat hasilnya.
**** Semoga Bermanfaat ****
6 komentar:
:))
mantaf....makasih atas tutorialnya bos
numpang mampir gan
:-/
yeezy
supreme clothing
moncler
supreme clothing
hermes online
yeezy boost 350 v2
off white jordan 1
longchamp handbags
cheap jordans
supreme clothing
Posting Komentar
Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.