Cara Membuat Sidebar Bersebelah dengan Artikel Blog

Selamat subuh, sudah sehari saya tidak melanjutkan tutorial cara membuat template sendiri yang sebelumnya sudah sampai ke "Cara Membuat DropDown Menu di Blog". Nah, sekarang saatnya mulai dilanjutkan ke bawah lagi yaitu membuat sidebar nya bersebelahan dengan artikel blog. Sebelumnya anda sudah tahu pada tutorial membuat widget di header, yaitu caranya dengan menambahkan b:section, kode bawaan blogger untuk membuat element widget.

Pada tutorial header juga, untuk membuat widget tersebut bersebelahan kode CSS nya kurang lebih memakai float:left dan float:right. Begitupun dengan artikel dan sidebar ini. Jika anda ingin membuat artikelnya berada di kiri, gunakan css float:left. Sidebar di kanan, gunakan float:right. Sebelumnya, kita harus tentukan berapa ukuran artikel dan berapa ukuran sidebar. Kita samakan seperti template simplefast2014, artikel berukuran 680px dan sidebar berukuran 1000-680 px = 320px. Pastinya sudah tau kan kenapa saya membuat sidebar nya berukuran 320px? Ya benar, 320px pada sidebar untuk membuat iklan berukuran 300 x 250 px nyaman di sidebar dengan padding 10px. Oke semoga anda mengerti sendiri yaa hehe.

Oke, 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 ini

#artikel-wrapper{float:left;width:680px;overflow:hidden;}
#sidebar-wrapper{float:right;width:320px;overflow:hidden;}

Letakkan CSS di atas tepat di bawah #wrapper

Nah, bagaimana cara untuk meletakkany 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>

dengan kode berikut

<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>

Kurang lebih hasilnya akan seperti berikut.

Modifikasi Widget

Untuk memodifikasi widget, hanya memerlukan CSS. Anda perlu menemukan CSS mana yang sesuai dengan element tersebut. Misalkan judul sidebar, menemukan CSS nya seperti berikut.

Karena tadi kita membuat widget di sidebar dengan kode <b:section class='sidebar' id='sidebar'/> dan judul pada widget di sidebar menggunakan tag <h2> maka CSS nya menjadi .sidebar h2. Untuk memodifikasi widget keseluruhan sidebar, coba anda lihat di atas judul widget ada kode <div class="widget PopularPosts">, maka tetap di awali dengan class .sidebar ditambah dengan class atau id seterusnya. Karena di atas dituliskan class="widget PopularPosts", setelah spasi anda bisa coret menjadi class="widget PopularPosts". Maka CSS nya menjadi .sidebar .widget. Jika masih ada yang bingung, bisa berkomentar di bawah ya.

Tunggu tutorial selanjutnya di subuh berikutnya.