Posted by Unknown on Senin, April 13, 2015 in Tips dan trik | No comments
Cara Membuat Sidebar Bersebelahan Dengan Artikel Pada Template Blog
Sekarang kita akan belajar membuat Sidebar Kanan yang bersebelahan langsung dengan artikel blog.
Pada tutorial header, kemarin kita membuat widget tersebut bersebelahan. Kode CSS nya kurang lebih memakai float:left dan float:right.
Begitu pula dengan cara membuat Sidebar. Jika anda ingin membuat
artikelnya berada di kiri, gunakan css float:left dan Sidebar berada di
kanan, gunakan float:right.
Sebelum membuat Sidebar, kita harus menentukan berapa ukuran artikel dan
berapa ukuran sidebar. Ukurannya akan kita sesuaikan dengan ukuran
kemarin yang terdapat pada artikel Cara Membuat Template,
artikel berukuran 680px dan sidebar berukuran 1000-680 px = 320px.
Pastinya sudah tau kan kenapa sidebarnya dibuat berukuran 320px? Sidebar
dibuat dengan ukuran 320px tujuannya untuk menyesuaikan dengan iklan
yang biasanya berukuran 300 x 250 px.
Kita anggap nama CSS untuk artikel yaitu #artikel-wrapper dan untuk
sidebar yaitu #sidebar-wrapper. Sudah disepakati sebelumnya di atas
ukuran-ukuran dan letak-letaknya. Artikel 680px berada di kiri dan
sidebar 320px berada di kanan. Kurang lebih CSS nya seperti dibawah ini.
#artikel-wrapper{float:left;width:680px;overflow:hidden;}
#sidebar-wrapper{float:right;width:320px;overflow:hidden;}
Letakkan CSS tersebut di bawah #wrapper
Nah, bagaimana cara untuk meletakkan HTML-nya? Caranya mudah, sama
seperti tutorial membuat header, ada pembungkus dan ada element widget
(b:section). Gantikan kode <b:section class='main' id='main'>...sampai...</b:section>
Ganti dengan kode dibawah ini.
<aside id='artikel-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</aside>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar'/>
</aside>
Maka hasilnya akan terlihat seperti gambar dibawah.
Sekarang coba Simpan Template dan lihat hasilnya. Apabila ada kesulitan bisa bertanya dengan cara berkomentar. Selamat mencoba dan semoga sukses.
0 komentar:
Posting Komentar
Silahkan Komentar Disini