Setelah memahami dan mengerti tutorial-tutorial sebelumnya, saatnya untuk membuat dan
merancang template sendiri di Blogspot. Dalam tutorial ini, akan diberikan langkah-langkah
untuk membuat template sendiri secara cepat dan dengan mudah.
Sebenarnya tentang teknik merancang template, setiap orang yang sudah terbiasa membuat
template akan mempunyai cara yang berbeda-beda. Akan tetapi dalam tutorial ini akan diberikan langkah-langkah untuk mempercepat proses pembuatan template bagi kita yang baru memulainya, agar tidak terlalu banyak buang-buang waktu dalam membuat dan merancan template.
Langkah 1: Pilih template yang sudah jadi sebagai acuan
Sebagai pemula, cara yang termudah dan tercepat untuk merancang template adalah memulainya dengan template yang sudah ada. Tetapi jangan melakukannya dengan maksud untuk menjiplak itu. Pilihlah template sebagai acuan yang dekat dengan tujuan dari template yang akan dirancang.
Pemilihan template sebagai acuan ini dimaksudkan agar kita tidak menuliskan kode-kode
template dari awal dan menghindari terlibat dengan urusan programming.
Tetapi ketika melakukan ini, tidak bermaksud untuk melakukan pengkodean sedikit dan
kemudian mengklaim bahwa versi terakhir adalah desain sendiri, itu SALAH dan TIDAK ETIS.
Template awal hanyalah titik awal untuk membantu proses pengkodean. Template awal yang berguna untuk acuan adalah bagian Body (yang menetapkan tata letak keseluruhan / layout danjumlah kolom) , kode CSS (misalnya # main-wrapper,. Sidebar, # sidebar2, blog-pager, dll) dan beberapa 'default' kode yang tidak boleh dimodifikasi atau dihilangkan.
Langkah 2: Menetapkan Jumlah dan Letak Kolom di Sidebar
Jika seorang pemula, pastikan memulai dengan template yang mirip dengan desain yang akan dirancang, misalnya jika ingin merancang template 3 kolom, jangan beracuan dengan template 2 kolom. Jika ingin menambah atau mengubah sidebar, baca tutorial sebelumnya tentang membuat template 3 kolom.
Langkah 3: Menetapkan Lebar Kolom
Hal pertama yang perlu dilakukan setelah mendapatkan template awal sebagai acuan adalah
mengatur lebar dari template. Untuk mengatur lebar yang perlu dilakukan adalah memodifikasi kode di CSS, baca tutorial 7, mengatur ukuran template. Bagian yang biasanya untuk mengatur lebar adalah
• body
• outer-wrapper
• content-wrapper
• header-wrapper
• main-wrapper
• sidebar-wrapper (atau sidebar1, sidebar2, dan selanjutnya)
• footer-wrapper
Pengaturan lebar yang sedikit rumit adalah yang ada di container-wrapper karena di dalamnya terdapat bagian Main dan Sidebar, jika lebar tidak diatur dengan baik, maka Sidebar dapat berada di bawah Main.
Langkah 4: Menguji
Jika merancang template yang baru, maka kita harus tahu bahwa perubahan yang kita lakukan telah mengubah rancangan sesuai dengan yang diinginkan. Bagaimana mengujinya? yaitu dengan mengirimkan artikel yang memiliki kutipan (blockquote), daftar bernomor, daftar tidak bernomor dan membuat beberapa widget untuk melihat bahwa tampilan sidebar sesuai dengan yang diinginkan.
Langkah 5: Memodifikasi kode CSS untuk mengubah tampilan
Disinilah kita memulai mengutak-atik kode CSS, untuk menyesuaikan tata letak blog dan
tampilan sesuai dengan yang diinginkan. Proses ini biasanya memakan waktu yang paling lama, kita akan bolak-balik memodifikasi kode karena hal yang sangat jarang untuk langsung mendapatkan sesuatu yang sempurna untuk pertama kali. Baca tutorial sebelumnya tentang struktur dari kode CSS, dan tutorial lainnya tentang mengatur properti dari setiap bagian di CSS dan tutorial tentang bagian dan elemen di template Blogger.
Langkah 6: Menguji di browser lain
Cara ini sebenarnya sangat menjengkelan dan menjenuhkan, tetapi harus kita lakukan, kenapa? Dikarenakan yang lihat web yang telah kita rancang nantinya sangatlah bervariasi, ada pengguna opera, firefox, internet explorer dan lain-lain, dan kadang kala tampilan yang kita rancang akan bagus di browser yang satu tetapi belum tentu untuk browser yang lain, untuk itulah uji coba perlu dilakukan agar web kita terlihat bagus untuk dilihat oleh semua orang. Ada tool yang bagus untuk menguji tampilan website agar kompatibel disemua browser, cobalah uji di Browsershots.org.
No comments:
Post a Comment