Desain Template Blogger: Tutorial 10
<< Tutorial 9: Penjelasan lebih lanjut tentang Kode Body
>> Tutorial 11: Mulai Membuat Template Blogger Anda Sendiri
kembali ke Daftar Isi
Salah satu keinginan yang paling besar ketika kita menjadi seorang blogger dan mengelola website atau blog/website kita sebelumnya telah menggunakan template yang standard (2 kolom), pasti kita mempunyai keinginan untuk menggunakan template 3 kolom didalam website kita. Dalam tutorial ini akan dijelaskan bagaimana membuat template 3 kolom secara sederhana dan tidak perlu untuk mahir dalam memprogram menggunakan bahasa HTML atau CSS.
Untuk memahami tutorial ini, diharapkan sebelumnya untuk mengerti Tutorial 8 dan Tutorial 9, yang mana telah menjelaskan dasar-dasar dari kode di bagian Body.
Untuk mengubah atau menambah sidebar, yang dilakukan hanyalah mengutak-atik kode XML di Blogger langsung dari halaman Edit HTML tanpa perlu mengaktifkan Expand Template Widget.
Menambahkan Sidebar Membuat Template 3 Kolom:
Kita akan pelajari kode-kode template, yang akan dituliskan dibawah. Kode disetiap template, mungkin akan tidak sama, tetapi variasi tidak akan begitu jauh.
Contoh Kode Template 2 Kolom:
<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 class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
Kode diatas merupakan kode template 2 kolom didalam wrapper/pembungkus yang namanya content-wrapper dimana didalamnya terdiri dari main-wrapper (yang berisi Blog Posts) dan sidebar-wrapper.
Untuk membuat sidebar baru, yang perlu dilakukan adalah masuk ke halaman Edit HTML tanpa mengaktifkan Expand Widget Templates, kemudian paste kode blok yang ada di sidebar-wrapper (kode yang tampil diatas dan berwarna merah) sebelum atau sesudah blok main-wrapper. Sebagai contoh, untuk membuat kolom Sidebar-Main-Sidebar/S-M-S (ada 2 kolom yang berada disamping kiri-kanan sebagai sidebar dan kolom main ada ditengah), maka letakkan kode sidebar-wrapper tersebut sebelum main-wrapper. Perhatikan pada contoh dibawah, bahwa id dari sidebar-wrapper adalah sidebar1 dan sidebar2.
Catatan: Ketika membuat sidebar kita harus memastikan bahwa lebar kedua kolom Sidebars dan Main akan cocok berada di content-wrapper dan kode CSS nya juga harus dipastikan bahwa sidebars akan terletak disamping kiri dan kanan. Beberapa kesalahan umum adalah letak Sidebars akan berada di bawah blok Main.
Contoh Kode Tamplate 3 Kolom S-M-S:
<div id='content-wrapper'>
<div class='sidebar-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 class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
Mengubah Lokasi Sidebar
Jika ingin mengubah lokasi sidebar dengan konfigurasi Main-Sidebar-Sidebar (M-S-S), yang perlu dilakukan adalah menempatkan kode sidebar-wrapper dimana ingin ditampilkan. Caranya, yaitu dengan masuk ke halaman Edit HTML tanpa perlu mengaktifkan Expand Template Widget dan cut kode 1 dari sidebar-wrapper dan letakkan diantara main-wrapper dan sidebar2. Dan hasilnya terlihat seperti kode dibawah.
Contoh Kode Template 3 Kolom M-S-S:
<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 class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
Sekarang kita sudah tahu, bagaimana caranya membuat dan mengubah lokasi dari sidebar. Cara yang sangat sederhana.
___________________
Sumber: Our Blogger Templates
28 Januari 2014 pukul 22.28
klo ini cuman tutorial desain programmingnya gan, klo mau yang desain grafisnya (ada full gambarnya, ada JPEG dkk nya), mungkin next time aja gan klo ada waktu... hehe...