Belajar Membuat Template Bagian Dua

Belajar membuat template akan kita lanjutkan setelah saya istirahat beberapa lamanya hehe… , maklum…masih ada yang diurus agar “Dapur” ngebullll . .
Baiklah sekarang mari kita lanjutkan dengan terlebih dulu baca doa agar diberi kemudahan dalam memahami ilmu . Untuk sekedar mengingat , di pelajaran membuat template bagian pertama , terakhir kita sudah sampai pada pembuatan template ke empat yang kita kasih nama : template-pertamaSTEP4.html

Di situ kita sudah mulai menambahkan pengaturan posisi dengan tag kode float:left

Sebagai pembanding , anda bisa membuka kode-kode template hasil praktek anda , dengan yang saya buat disini sebagai berikut :

template-pertamaSTEP1
template-pertamaSTEP2
template-pertamaSTEP3
template-pertamaSTEP4
template-pertamaSTEP5

Catatan : Saya sengaja membuat template-pertamaSTEP5 , setelah ada perubahan pada panambahan kode float:left yang ada di template-pertamaSTEP4 . Ini sengaja saya buat satu file baru untuk memudahkan saya dalam memahami pembuatan template.

Catatan 2 : Sebaiknya buka masing-masing file di tab jendela baru , agar kita bisa melihat perbedaan dari setiap tahapan pembuatan template.

Catatan 3 : Anda bisa menyimpan kode yang ada dihalaman yang anda buka , dengan cara : klik File pada tab mozila, lalu klik save page as,simpan di komputer anda. Nanti hasil download file tersebut buka dengan cara klik kanan pada file hasil download, lalu klik open with mozilla .

Oke ya kita Lanjuuuttttt…..

Di file template-pertamaSTEP5 , jika anda buka di browser , posisi sidebar sudah bergeser kekanan , sesuai dengan yang kita inginkan. (dari rencana layout blog )

Tapi Sidebar-kanan dan sidebar kiri masih numpuk atas bawah. Nah …, mari buka lagi notepad baru , dan copas semua kode yang ada di template-pertamaSTEP5 , dan coba tambahkan lagi kode float:left di bagian CSS pengaturan sidebar , tepatnya di #ruang-Sidebar-kanan dan #ruang-Sidebar-kiri
Sehingga setelah ditambahkan akan menjadi seperti ini :

#ruang-Sidebar-kanan {
width:150px;
border:1px solid #000;
background:#bbc;
padding:3px;
float:left
 }

#ruang-Sidebar-kiri {
width:150px;
border:1px solid #000;
background:#ccd;
padding:3px;
float:left
}

Save as lagi dengan nama template-pertamaSTEP6.html

Kemudian buka template-pertamaSTEP6 di browser , bagaimana hasilnya ???
Sudah pindah mas..tapi kok ya Sidebar-kanan adanya di kiri dan Sidebar kiri adanya di kanan?

Nahhh…. Mari kita bahas masalah ini …
Sebenarnya kita bisa saja merubah #ruang-Sidebar-kanan dengan memberikan kode float nya :   float:right
Tapi karena saya ingin supaya kita lebih memahami struktur template , maka sengaja saya kasih kode dengan float:left

Ketika kita mengatur semua posisi dengan float left , maka secara otomatis layout yang ada di bagian teratas akan lebih dulu menempati posisi di sebelah kiri . Mari kita melihat lagi struktur pada bagian ISI ( kalau saya bilang isi, berarti itu adalah yang ada di bagian setelah tag <body”> dengan </body”> ) khususnya sidebar sebagai berikut : :

<div id="ruang-Sidebar">
<div id="ruang-Sidebar-top-besar">Isi ruang-Sidebar-top-besar</div>
<div id="ruang-Sidebar-kanan">Isi ruang-Sidebar-kanan</div>
<div id="ruang-Sidebar-kiri">Isi ruang-Sidebar-kiri</div>
</div>

Disitu kita lihat bahwa saya menempatkan sidebar kanan berada diatas sidebar kiri . Jadi jelas si CSS akan mengutamakan sidebar kanan agar menempati posisi kiri . Begitu juga sebaliknya Jikalau kita mengatur kedua nya dengan float:right , maka sidebar kanan pun akan langsung menempati posisi ke kanan. Untuk saya, saya lebih suka merubah posisi ISI sidebar kiri diatas sidebar kanan .
Anda bisa melihat contoh nya disini : template-pertamaSTEP6.html

Sampai disini mudah-mudah anda kita bisa memahami soal floating ini ya …? . Jika sudah paham ,nantinya anda bisa saja misalnya menempatkan Kotak posting disebelah kanan, dan Kotak sidebar disebelah kiri halaman….. di coba2 aja dahhhhh

Catatan : di template-pertamaSTEP6 ini saya sudah menambahkan pengaturan margin:2px; , agar masing-masing bagian sedikit agak terpisah.

Di templatetahap6 ini, kalau kita perhatikan , bagian footernya ,seperti menghilang dilindas oleh sidebar, untuk itu saya menambahkan kode : Overflow:hidden; pada css :
#tembok-utama ,
#kotak-posting dan dibagian
#ruang-Sidebar

Contoh realnya bisa anda lihat disini : template-pertamaSTEP7.html . Silahkan dibandingkan perbedaanya dengan template6.

Sedangkan di template-pertamaSTEP8.html , saya mengatur lebar Kotak posting dan kotak sidebar agar terlihat rapih, yaitu :

memperkecil lebar #kotakblog menjadi: 930px
memperbesar #ruang-Sidebar menjadi 395px
Memperlebar #ruang-Sidebar-top-besar menjadi 385px
Memperlebar #ruang-Sidebar-kanan menjadi 185px
Memperlebar #ruang-Sidebar-kiri menjadi 186px
Memperlebar #isi-Posting menjadi 485px

Di template tahap8 ini saya juga membuat posisi body template menjadi center dengan merubah pengaturan margin dibagian CSS    #kotakblog menjadi     margin:0 auto;

Contoh realnya bisa anda lihat disini : template-pertamaSTEP8.html

Nahhhh…kini template kita sudah mulai terbentuk dengan teratur dan sudah enak dilihat.

Catatan : Perubahan(Penambahan ) kode di bagian CSS letaknya ada didalam kurung besar {  } , contoh :
#ruang-Sidebar { disini tempat penambahan kode }

Setiap kode yang ada di dalam kurung CSS mempunyai ciri sbb :

Keterangan benda – titik dua – nilai - titik koma ,      contoh :
width:485px;
width –> keterangan yang menerangkan benda/objek yang akan diatur besaran atau nilainya
titik dua –> pengganti samadengan (=)
485px –> nilai dari si benda(objek)
titik koma –> akhir dari nilai objek

Baiklah teman saya kira saya cukupkan dulu uraian pengalaman saya dalam membuat template ,karena sudah terlalu panjang halaman nya , silahkan dibandingkan setiap  perubahan yang telah kita lakukan mulai dari template-pertamaSTEP1 sampai dengan template-pertamaSTEP8

Pada sesi membuat template tahap tiga kita akan coba memasukkan konten atau isi dari setiap bagian, agar template kita terlihat mendekati nyata. Dan pada sesi membuat template tahap empat , Inysa Allah kita baru akan memasukkan kode-kode blogspot yang merupakan kode-kode database tempat penyimpanan konten blog kita .

Semoga bermanfaat

PS : Karena ada yang nanya saya : ” mas Bahrul belajar bikin template dimana ? ”
Silahkan yang mau belajar membuat template yg lebih detail ,dengan tutorial bahasa Indonesia , disini aja ya :  Kursus HTML dan PHP utk belajar bikin template

Update 21 Agustus 2010:
ALhamdulillah Lanjutan membuat template blog bisa di lihat disini ya : tutorial-membuat-template-blog-tahap-tiga

Artikel Terkait:

• Belajar Membuat Template Blog
• Cara Membuat Halaman Tanpa Sidebar
• Tutorial Membuat Template Blog Tahap Tiga
• Mengatur Ukuran Huruf Template
• Menampilkan Adsense Di Postingan Secara Acak
• Script Jendela Browser Berputar
• Cara Merubah Layout halaman web Yang Aman dan Mudah
• Membuat Image Menyatu Dengan Artikel
• Cara Submit Blog Ke Digg.com
• Cara Membuat Tombol Bookmark di Halaman Blog