Mengatur Sidebar dan Content ( Part 4)

Cara Membuat Template Sederhana Blogspot : Part 1, Part 2 , Part3

OK kita mulai setelah kita bermain di header dan top Menu, kaliini kita akan bermain air di sidebar dan content. Sudah siap? Ambil minum dan cemilan dulu ya biar semangat heheheh.. kalau sudah ikuti langkah-langkah di bawah ini :

1. Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
2. Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan ruang-sidebarkiri lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIV
Setelah muncul boks TagsWizard ketik sidebar pada kotak isian di samping “id” kemudaian klik ok.Pindah </div> ke bawah tulisan sidebar-kiri .
3. Lakukan langkah-langkah pada poin ke 2 untuk bagian sidebar–kanan dan kontent. Untuk id sidebar kanan tulis sidebar dan id kontent isi dengan content. Hapus tulisan ruang-sidebarkiri, kontent, dan ruang-sidebarkanan . dan hasilnya seperti di bawah ini :
4. Langkah selanjutnya kita buat code CSS masing masing bagian . scroll layar ke atas sampai terlihat #top-menu {..... } copy paste code CSS dibawah ini untuk sidebar.
   #sidebar {
   margin:2px;
   padding:3px;
   width:200px;
   border:1px solid #000;background:#abc;
   float:left;
   Overflow:hidden;
   }
   Dan juga copy paste kode CSS di bawah ini untuk content.
   #content {
   Overflow:hidden;
   margin:2px;
   padding:3px;
   width:500px;
   border:1px solid #000;
   background:#eee;
   float:left;text-align: left;
   }
   Sudah dan haslinya seperti dibahah ini.. betul?
   
5. OK sudah selesai pengaturan sidebar dan content, jangan lupa di simpan ya... crtl+s trus kalau mau lihat klik tab preview dan hasilnya seperti dibawah ini