SYAARAR.COM
  Home  |  Refleksi  |  Kombur  |  Religous  |  Free Code  |  Download  |
Desain Layout 01
Ditulis oleh : Syamsul Arham
Tanggal : 08 Januari 2008, 02:03:5
Dibaca : 12263

Bagi yang awam tentang HTML, maka desain blog sangat tidak mungkin untuk dilakukan. Maka melalui Desain Layout, kita mencoba belajar mendisain blog.

Sebelum kita melakukan editing di blog yang akan kita desain, kita perlu terlebih dahulu membuat sketsa layout yang kita inginkan menggunakan Photoshop atau pengolah gambar lainnya. Dengan sketsa ini kita sudah bisa melihat hasil desain yang kita rencanakan, mulai dari font, gambar, warna, posisi, bagan dan ukuran. Diharapkan dengan sketsa ini kita bisa lebih mudah untuk meng-aplikasikannya kedalam blog yang ingin kita rubah tampilannya.

Jika desain yang kita inginkan sudah jadi, maka kita sudah bisa melakukan editing layout dari blogger. Untuk membuat layout di blogger, maka pertama lakukan backup terhadap layout blog Anda. Ini diperlukan jika proses editing mengalami kegagalan atau kita ingin kembali ke layout yang lama. Kemudian rubah template menjadi "Minima" sebagai layout dasar untuk kemudian di renovasi sesuai dengan keinginan kita.

Untuk keamanan komponen aksesoris yang ada di sidebar atau bagian lain, sebaiknya dipindahkan ke "main" (Posting Blog). Ini juga untuk mempermudah proses editing. Setelah semua aman, baru kita mulai melakukan edit layout.

Sekarang kita coba untuk membuat sebuah layout yang sederhana yang dikembangkan dari template quot;Minima". Template Minima terdiri dari header, main dan sidebar.

Template Minima

Dari template Minima akan kita kembangkan menjadi:

Template Baru

Template yang baru ini, kita menambahkan bagian "banner" di bawah "header" dan "footer" dibagian paling bawah.

Sekarang kita akan mencoba langsung untuk melakukan perubahan ini:

  1. Login ke akun blogger Anda
  2. Pilih blog yang ingin Anda rubah dari Panel Kontrol dan klik "Layout"
  3. Klik "Pilih Template Baru"
  4. Klik template "Minima"
  5. Klik "Simpan Template"
  6. Klik "Edit HTML"
  7. Scroll area koding dan cari koding di bawah ini:

    <div id='content-wrapper'>

  8. Copy koding di bawah ini di atas koding tersebut di point 7

    <div id='banner-wrapper'>
    <b:section class='banner' id='banner' preferred='no'>
    </b:section>
    </div>

  9. Hasilnya seperti di bawah ini:

    <div id='banner-wrapper'>
    <b:section class='banner' id='banner' preferred='no'>
    </b:section>
    </div>

    <div id='content-wrapper'>

  10. Cari koding di bawah ini :

    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'>

    </b:section>
    </div>

  11. Ganti koding di atas dengan koding di bawah ini:

    div id='footer-wrapper'>
    <b:section class='footer' id='footer' preferred='yes'>

    </b:section>
    </div>

  12. Klik "Simpan Template"

Sampai disini proses edit HTML selesai. Anda bisa melihat hasilnya dengan meng-klik "Elemen Halaman". Disini terlihat pada bagian bawah "header" dan bagian paling bawah ada bagan baru.

Sekarang Anda bisa masuk elemen yang sesuai ke masing-masing bagian.

Contoh lihat disini.



Post related
  • Delete Comment
  • New Posting
  • Controll Panel
  • Login to Blogger
  • Jam Tangan Pria Casual
    Tags
    Social Media

    Posting komentar Anda :
    Name :
    Email :
    Website :
    Comment :
    Validation word :


     
    Dokomentari oleh:

    Syamsul[URL] 2009-03-30 10:56:16

    Ibu/Bp Chingtia,

    Desain web ditetukan oleh konten yang akan ditampilkan; bisnis, blog, bisnis atau apa. Ini akan berpengaruh ke tata letak, warna dan image yang akan ditampikan.

    Wassalam,
    Syamsul

    chingtia[URL] 2009-03-25 10:11:50
    bagaimana cara keserasian desian dan isi web yg menarik?/

    prass[URL] 2008-10-17 15:25:13
    its oke

    bad cards[URL] 2008-06-01 17:31:46
    Nice Site! http://google.com


    ┬ęSYAARAR.Com. All rights reserved.