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.

 

 


    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

    Sobat sedang membaca artikel Cara Membuat Template Blogger 3 Kolom dengan Url https://tutorialdanbisnis.blogspot.com/2012/11/cara-membuat-template-blogger-3-kolom.html , bila berkenan silahkan bagikan dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, letakan link aktif artikel ini sebagai sumbernya dengan copy kode di bawah ini.


    Related Post:

    6 komentar:

    1. Terima kasiih untuk informasinya yaaa :D salaam kenal

      BalasHapus
    2. mantep gan artikelnya sangat bermanfaat.,.

      BalasHapus
    3. kunjungan sore mas ikut nyimak infonya makasih

      BalasHapus
    4. Terima kasiih untuk informasinya yaaa ,, dan tips y sangat bermanfaat

      BalasHapus
    5. nice post sob,, salam kenal

      BalasHapus

    Silahkan Comment disini, saya comment di sana..

    Langganan Artikel

    Enter your email address:

    Delivered by FeedBurner

    Label

    1. Bisnis (5)
    2. Daftar Isi (4)
    3. Info (4)
    4. Link (2)
    5. Olah Raga (1)
    6. SEO (5)
    7. Software (3)
    8. Template (14)
    9. Tips Dan Trik (2)
    10. Tutorial (16)

    Alexa