Cara membuat sidebar berada dikiri dan kanan postingan blog Bag.1

Pada postingan sebelumnya ane ngeshare hanya baru pernak-pernik yang sekiranya dibutuhkan sebagai pelengkap blog, dan jarang memberikan tips dan trik ke inti mendesign sebuah template, walaupun hanya beberapa. Nah untuk Postingan kali ini sekiranya dapat sedikit membantu lebih jauh cara membuat / mendesign template. dan postingan kali ini dipokuskan tentang cara  membuat sidebar berada dikiri dan kanan template blog.

Note :
  • Untuk lebih memahami postingan ini, Admin sangat menganjurkan baca juga postingan tentang  Mengenal struktur dasar template blog dan Mengenal struktur dasar kode body
  • Buka tiga tab sekaligus untuk dijadikan sumber referensinya 
  • Ilustrasi Sidebar berada dikiri dan kanan diantara postingan, saya akan menyingkat kata-kata yang harus dipahami terlebuh dahulu
  1. Postingan yang selanjutnya akan disingkat [M]
  2. Sidebar yang selanjutnya akan disingkat    [S]
  3. Contoh pada postingan ini adalah Sidebar, Main, Sidebar  berarti akan disingkat menjadi [S,M,S
  • Jadi inti permasalahannya ada pada singkatan (untuk selanjutnya saya akan menggunakan kata aba-aba untuk mengganti kata singkatan)
  • Untuk lebih jelasnya saya akan membahas kembali tentang permasalahan aba-aba ini pada postingan berikutnya.
Pada dasarnya (saya ambil kode simple untuk lebih mudah untuk dipahami) kode keseluruhan body yang ada pada template blog seperti dibawah ini (terkecuali template bawaan yang telah disediakan oleh blogger)

<div id='content-wrapper'>

 <div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> 
</b:section> 
</div> 

</div>

<!-- end content-wrapper -->

 <div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section> 
</div> 

<div class='clear'> </div>

<!-- spacer for skins that want sidebar and main to be the same height-->


Coba sobat perhatikan kode yang berwarna merah diatas betul sob, kode yang berwarna merah adalah kode sidebar yang mana letak posisi sidebar tersebut berada disamping kanan main wrapper (Kontent postingan blog). dan untuk kode yang berwarna abu-abu harap di abaikan, karena kita akan sedikit lebih mempokuskan cara menambahakan sidebar kiri dan kanan diantara postingan blog

Apabila ingin menambahkan sidebar baru di sebelah kiri, maka kode sidebar yang diatas ada yang harus di tambahkan di atas kode main (posting) sehingga kodenya kira-kira akan menjadi seperti ini (lihat tembahan warna orange pada script dibawah) ;

<div id='content-wrapper'>

<div class='sidebarL-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> 
</b:section> 
</div>

</div>
<!-- end content-wrapper -->

<div class='sidebarR-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section> 
</div> 

<div class='clear'> </div>
<!-- spacer for skins that want sidebar and main to be the same height-->

Sekarang kita sudah tahu, bagaimana caranya membuat dan mengubah lokasi dari sidebar dengan cara yang sangat sederhana, walaupun tidak mengerti maksud dari kode-kode HTML nya.

Langkah selanjutnya adalah menuju ke bagian CSS. Kode inilah yang memonitori kode yang berada dibagian body. Coba lihat kode CSS yang ada dibawah ini, anggap lebar blog, lebar postingan blog, sidebar kanan dan sidebar kiri blog (masing-masing lebar selector template yang telah saya beri warna biru) sama dengan lebar template blog sobat.

#outer-wrapper {width: 840px;margin:0 auto;padding:10px;text-align:left;font: $bodyfont;}
#main-wrapper {width: 410px;float: left;word-wrap: break-word;overflow: hidden;}
#sidebarL-wrapper {width: 220px;float: left;padding-left:10px; word-wrap:break-word; overflow: hidden;}
#sidebarR-wrapper {width: 180px;float: right;padding-right:10px;word-wrap:break-word;overflow: hidden;}


Terkait dengan ini

9 komentar:

  1. Atention...
    Mohon maaf atas ketidak nyamanan kepada adik kakak om tante karena saat ini seperti yang dapat dilihat oleh sahabat gaptek32, gambar yang ada disetiap postingan ini tanpa disengaja telah terhapus begitu saja oleh admin. Untuk sementara ini ane sedang mengusahakan untuk mengumpulkan kembali seluruh gambar yang telah terhapus secara manual sesegera mungkin. Dan yang pasti saat ini adminnya sedang bahagia (kesel, dongkol, bingung, lier, pening)

    BalasHapus
  2. numpang belajar gan..kebetulan lagi dapet mata kuliah web buat design template ..

    website ini sangat membantu

    BalasHapus
  3. makasih infonya gan^^

    BalasHapus
  4. Makasih ya Kang, infonya... :)

    BalasHapus
  5. Mau coba ah...lagi butuh nih..

    BalasHapus
  6. bagus artikelnya silahkan berkunjung ke
    http://www.kutugaptek.blogspot.com

    BalasHapus
  7. thanks ya gan ..

    mampir untuk melihat

    http://kutempel.blogspot.com

    BalasHapus
  8. Makasih gan
    http://polesan-mobil-motor.blogspot.com/

    BalasHapus
  9. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

Saya mohon maaf atas ketidak terurusnya blog ini, dan saya pun tidak tahu kapan ada waktu luang agar blog ini dapat membalas kritik dan pertanyaan, apalagi untuk melanjutkan postingan saya yang sempat tertunda pada akhir-akhir ini.
Kemungkinan besar blog ini tidak akan aktif selama paling sebentar 2-3bulan karena saya (admin) sibuk mencari nafkah di dunia nyata.
Saya mohon maaf yang sebesar-besarnya karena tidak bertanggung jawab dalam hal yang seperti ini.

Untuk menyisipkan kode <i rel="pre">KODE ANDA YANG TELAH DI PARSE...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>

Link hidup akan terhapus secara otomatis
Convert kode terlebih dahulu bila komentar anda mengandung kode HTML/JScript pada tombol di bawah ini

Parse HTML