MEMBUAT 3 KOLOM TEMPLATE ATAU LEBIH

BELAJAR MEMBUAT BLOGGER TEMPLATE 10

Salah satu kemampuan dasar yang paling diinginkan para pembuat blogger template adalah membuat 3-column template. Ga asik kan kalo cuma satu sidebar terus sementara di luar sana para pembuat blogger template yang lain bahkan sudah punya empat atau lebih kolom. Tutorial kali ini adalah hal langsung dan simple untuk melakukannya sendiri tanpa haru terlalu banyak melakukan code tweaking.

Tutorial ini dipersiapkan dengan asumsi bahwa kamu sudah mengerti bagian di dalam BELAJAR MEMBUAT BLOGGER TEMPLATE 8 dan BELAJAR MEMBUAT BLOGGER TEMPLATE 9, yang menjelaskan kode dasar bagian Body.

Apa yang akan kita lakukan adalah untuk mengubah atau menambahkan sidebar dengan tweaking XML code secara langsung dari halaman Blogger Edit HTML TANPA Mencentang Expand Widget Templates. Ini berarti bagian Body yang ada di bawah tidak akan diperlihatkan semua algoritma detailnya untuk widget dan post data. Itu akan membuat segalanya sesimpel mungkin

Menambahkan Sidebar Untuk membuat 3-column Template:

Ketika kita scroll ke bawah pada bagian Body, penampakan kode body mungkin akan mendekati contoh di bawah ini( note : mungkin berbeda pada template lainnya).

Contoh template 2-column:

<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 di atas memperlihatkan kode 2-column-template dengan wrapper yang disebut content-wrapper yang berisikan main-wrapper (yang berisikan Blog Posts) dan sidebar-wrapper.

Untuk membuat sidebar yang lain, apa yang perlu kita lakukan hanyalah masuk ke halaman Edit HTML dan tanpa mencentang Expand Widget Templates , paste kode sidebar-wrapper (diperlihatkan dengan warna merah) sebelum atau sesudah kode main-wrapper. Sebagai contoh, untuk membuat kolom Sidebar-Main-Sidebar, letakkan kode tersebut sebelum kode main-wrapper. Melihat pada contoh di bawah ini yang id dari sidebar-wrapper pertama adalah sidebar1 dan id dari sidebar-wrapper kedua adalah sidebar2.

Note: Kamu juga harus memastikan lebar dari kedua Sidebars dan blok Main akan pas di dalam content-wrapper dan CSS code ditulis dengan baik untuk menempatkan Sidebars secara berdampingan dengan main-wrapper. Beberapa kesalahan yang sering dilakukan adalah salah satu atau kedua Sidebars akan bertumpuk di bawah blok Main.

Contoh template 3-column dengan posisi 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 untuk membuat 3-column template dengan konfigurasi Main-Sidebar-Sidebar contohnya, apa yang kamu perlu dilakukan untuk meletakkan sidebar-wrapper dimana kamu ingin dia terlihat.

Untuk melakukan ini, simplenya masuk ke Edit HTML tanpa mencentang tanda Expand Widget Templates, cut kode sidebar-wrapper yang pertama dan paste di anatara main-wrapper dan sidebar2 lihat contoh kode di bawah ini :

Contoh template 3-column dengan posisi 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>

Sekarang kamu sudah mengetahui dasar-dasar bagaimana menambahkan atau mengubah posisi sidebar. Sangat mudah.

translate dari : ourbloggertemplate.com