Cara Membuat Template Blogger 3 Kolom

Totorial Blog 9 : Cara Membuat Template Blogger 3 Kolom

Dengan memahami postingan sebelumnya tentang Kode Template Bagian Body dan Kode CSS Template Bagian Body 2, sekarang kita coba bahas tentang Cara Membuat Template Blogger 3 Kolom atau lebih karena pada dasarnya hanya tinggal mengatur kode XML bahkan tidak perlu centang Expand Widget Templat pada halaman Edit HTML.

Perlu dipahami bahwa kode HTML atau Kode CSS pada setiap template mungkin berbeda tergantung selera pembuatnya, namun  pada dasarnya variasi perbedaan itu takan terlalu jauh asal kita paham standar bakunya.

Ok langsung ke Cara Membuat Template Blogger 3 Kolom ,, yoo ke tkp :

Kita mulai dengan Contoh Kode Template 2 kolom :

Dalam contoh ini ditunjukan bahwa template 2 kolom ini berada dalam wrapper/pembungkus yang namanya content-wrapper dimana didalamnya terdiri dari main-wrapper sebagai area posting dan sidebar-wrapper.

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

Contoh Membuat Template 3 Kolom

Untuk membuat sidebar baru, tinggal copy saja kode sidebar-wrapper yang  warna merah dan paste  sebelum atau sesudah blok main-wrapper sehingga hasilnya akan seperti dibawah ini :

1.Contoh Format kolom Sidebar-Main-Sidebar atau format 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 –>

Catatan: 

• Beri nama atau id untuk sidebar-wrapper nya misalnya sidebar1 dan  sidebar2
• Ketika membuat sidebar pastikan 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 jangan sampai melorot kebawah bawah blok Main.

2. Contoh Format kolom Main-Sidebar-Sidebar atau 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 –>

Nah begitulah Cara Membuat Template Blogger 3 Kolom , jadi hanya tinggal memindahkan kode sidebar-wrapper nya saja dan jangan lupa untuk merubah nama atau id nya seperti id='sidebar2' , id='sidebar3' atau id='sidebarleft' , id='sidebarright' , dll.

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.

• Posting sebelumnya : Kode CSS Template Bagian Body 2
• Posting selanjutnya  : Belajar Membuat Template Blogger 

Source : Our Blogger Template

 

 

---

1. Thanks telah mampir, yo kita saling vote dan comment..
2. Bila berkenan tolong share/bagikan dengan tombol share dibawah.
3. Gratis langganan artikel blog ini, silahkan klik Subscribe Disini, atau masukan email disidebar yg telah disediakan

---