Halaman

misther-junett.blogspot.com
  • Web
  • misther-junett
  • Kamis, 03 Februari 2011

    HOME , Belajar Membuat Template Bagian Dua

    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 . :D .
    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? :D
    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 bendatitik duanilai - 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


    Artikel Terkait

    Tidak ada komentar:

    Posting Komentar