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

12 komentar

5 Desember 2014 10.44 delete

kalo mau buat baru gimana? misal buat untuk di bawah postingan?

Reply
avatar
5 Desember 2014 13.18 delete

Kalau yang dibawah postingan namanya bukan sidebar.

Reply
avatar
2 Februari 2015 17.11 delete

mas... aku request dunk.... cara memasukan postingan ke menu yang ada di header. sampai saat ini blm ada penjelasan yg enak utk di ikutin. otak ku masih beku kayakny a hehehe
blog saya www.livinginindonesia4expats.blogspot.com
masih terpisah-pisah dari menu.. namun visitornya sudah cukup memuaskan untuk umur blog 2 bln... byk visitor asing yg berkunjung
mohon pencerahannya mas

trimakasih
salam kenal
Dindin

Reply
avatar
12 Mei 2015 22.41 delete Komentar ini telah dihapus oleh pengarang.
avatar
12 Mei 2015 22.45 delete

Sumpah otak ane ruet liat caranya gan, sorry ane masih nubie.... tolong dampingannya gan

oya ane mau naruh link rumah ane : http://dokak.blogspot.com/

Terus berkarya gan, bagi-bagi pengetahuan, hehehehe. Thans gan

Reply
avatar
21 Agustus 2015 11.49 delete

ane coba praktek dulu ya mas di blog ane http://incarfakta.blogspot.com/

Reply
avatar
1 Mei 2016 12.50 delete

selama ini ane bingung gimana nentuin letak posisinya, ternyata cuma mainin posisi float-nya doang ya wkwkwkwkwk

nice post gan, lanjutkan

Reply
avatar
2 Juli 2016 05.51 delete

wah , saya ikuti cara diatas , dan akhirnya blog saya agak terlihat lebih bagus daripada sebelumnya , thanks ya

Reply
avatar
28 Agustus 2016 11.23 delete

kok punya saya gk ada tulisan .

Reply
avatar
28 Agustus 2016 11.24 delete

kok punya saya gk ada tulisan <b:section

Reply
avatar
21 November 2016 04.00 delete

Terimakasih Gan skrip nya dan langkah-langkahnya. Mohon kunjungan baliknya di : http://www.tokoindofurniture.com/tempat-tidur-anak/tempat-tidur-anak-modern-putih.html

Reply
avatar

Mohon masukkan saran / kritikan Anda. Atau tanyakan sesuatu yang tidak Anda pahami. Free promosi asal sopan.