Sabtu, 27 September 2014

Cara Membuat Sidebar Kanan Pada Template Blog

Cara Membuat Sidebar Bersebelahan Dengan Artikel Pada Template Blog - Artikel ini merupakan lanjutan dari artikel sebelumnya yaitu Cara Membuat Template Blog. Sekarang kita akan belajar membuat Sidebar Kanan yang bersebelahan langsung dengan artikel blog.

Cara Membuat Sidebar Kanan Pada Template 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> 

Cara Membuat Sidebar Kanan Pada Template Blog

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.

Cara Membuat Sidebar Kanan Pada Template Blog

Sekarang coba Simpan Template dan lihat hasilnya. Apabila ada kesulitan bisa bertanya dengan cara berkomentar. Selamat mencoba dan semoga sukses.

Artikel Sebelumnya :
- Cara Membuat Template Blog
- Cara Membuat Header

Artikel Selanjutnya :
- Cara Membuat Dropdown Menu
- Cara Membuat Footer


Source : http://www.noval.web.id/2014/01/cara-membuat-sidebar-bersebelah-dengan.html

Artikel Terkait

Cara Membuat Sidebar Kanan Pada Template Blog
4/ 5
Oleh