 |
| Belajar Membuat Template Manual |
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 pengaturanmargin: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 dengantemplate-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 .
0 komentar:
Posting Komentar