Tutorial 10: Membuat 3-Kolom Template

by : www.ourblogtemplates.com (modifikasi terjemahan)

 

Salah satu keinginan yang paling dasar setelah menjadi seorang  blogger dan menggunakan template standar untuk sementara adalah memiliki dorongan untuk menemukan 3-kolom template. Jadi, inilah yang sederhana dan lurus-maju tutorial tentang cara melakukan ini sendiri tanpa melalui terlalu banyak code tweaker.
Tutorial ini disusun dengan asumsi Anda memahami hal-hal yang dibahas dalam Tutorial 8 dan Tutorial 9, yang menjelaskan dasar-dasar bagian code Tubuh.
Apa yang akan kami lakukan untuk mengubah atau menambahkan tweaker sidebars hanyalah code XML Blogger langsung dari halaman Edit HTML TANPA memutar pada Expand Template Widget. Ini berarti bahwa Badan di bagian akhir code tersebut tidak akan ditampilkan penuh dengan algoritma terperinci untuk widget dan post data. Ini akan sederhana seperti ini dapat, yang jelas merupakan suatu hal yang baik:).


Menambahkan Sidebar Membuat 3-kolom Template:
Bila Anda menggulir ke bawah untuk Tubuh bagian, code mungkin punya sesuatu yang tampak dekat dengan contoh di bawah ini (perhatikan bahwa Anda dapat memiliki variasi yang sedikit berbeda dari code ini untuk berbagai template):


Contoh 2-kolom template:


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


Di atas menunjukkan sebuah 2-kolom-code template dalam bungkus disebut content-wrapper yang berisi main-wrapper (yang berisi Blog Posts) dan sidebar-wrapper.
Untuk membuat sidebar lain, apa yang perlu Anda lakukan adalah hanya menuju ke halaman Edit HTML halaman dan tanpa mencentang pada kotak Expand Template Widget, paste blog lain sidebar-wrapper code tersebut (ditampilkan di atas merah) sebelum atau sesudah main-wrapper blog. Sebagai contoh, untuk membuat Sidebar Sidebar-Main-kolom, tempat itu sebelum main-wrapper. Perhatikan dalam contoh di bawah ini bahwa id dari 1 sidebar-wrapper adalah sidebar1 dan id dari ke-2 adalah sidebar2.
Catatan: Anda juga harus memastikan bahwa kedua Sidebars lebar dan blog Utama akan muat di dalam content-wrapper dan bahwa code CSS dengan benar ditulis untuk Sidebars untuk berbaring di samping satu sama lain. Beberapa kesalahan umum adalah bahwa salah satu atau kedua Sidebars akan jatuh di bawah blog Utama.


Contoh 3-kolom template SMS:


<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 Sidebar Lokasi:
Jika Anda ingin mengubah lokasi sidebar untuk membuat template 3-kolom dengan konfigurasi Main-Sidebar-Sidebar misalnya, apa yang perlu Anda lakukan adalah menempatkan blog sidebar-wrapper tempat yang Anda inginkan untuk muncul.
Untuk melakukannya, cukup masuk ke halaman Edit L HTM halaman dan tanpa menoleh pada kotak Expand Template Widget, potong-1 sidebar-wrapper code dan paste di antara main-wrapper dan sidebar2 blog. Lihat code contoh di bawah ini:


Contoh MSS 3-kolom template:


<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, pada dasarnya anda tahu cara menambah atau mengubah lokasi sidebar. Penggunannya memang semudah itu!

Artikel Terkait:

1 comments:

Solusi Bisnis said...

Boz, gmn cara pasang iklansolusi bau mulut, napas, obesitas dan kurus, masalah kerusakan rambutRiza, 0857 4194 1815


Post a Comment

 
© 2009 - The Inspitarion Of Weblog | Free Blogger Template designed by Choen

Home | Top

/* Google Analytics */ /* navigasi page number */