Membuat Template Blogger Part 7 ( Memulai Membuat Template Blog )

Memulai Membuat Template Blogspot



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.


Langkah 7: Menggunakan gambar sebagai latar belakang

Jika bosan dengan menggunakan warna yang polos ditemplate kita, kita bisa menggantinya
dengan gambar. Gambar ini dapat digunakan sebagai latar belakang dari keseluruhan template atau untuk bagian-bagian tertentu saja, misalnya Post, Sidebar, Footer, Header, dll. Bagian ini akan kita bahas langsung dibawah ini tentang Memodifikasi kode dalam penggunaan gambar sebagai latar belakang.


Langkah 8: Menyelesaikan Template
Langkah ini adalah langkah yang terakhir, yaitu menguji template, melihat dengan hati-hati
tampilan blog dan memeriksanya apakah semua kode yang dituliskan dapat bekerja dengan baik atau tidak.

Memodifikasi kode dalam penggunaan gambar sebagai latar belakang.


Bagaimana Menggunakan Gambar Sebagai Latar Belakang?

Ini adalah tutorial terakhir dari Seri Tutorial Template Blogger. Pada tutorial terakhir ini, akan dijelaskan bagaimana menggunakan gambar sebagai latar belakang dari template di Blogger. Kita tentunya sering melihat template-template dari suatu website/blog yang latar belakangnya tidak menggunakan warna yang polos, akan tetapi terbuat dari pola yang berulang dari suatu gambar. 

Gambar ini disebut sebagai gambar latar belakang. Gambar yang digunakan sebagai
latar belakang dapat berupa satu gambar besar yang mengisi layar atau atau gambar kecil
(misalnya 50 x 50 piksel) yang berulang secara horizontal dan / atau vertikal. Gambar yang digunakan sebagai latar belakang, dapat diletakkan di bagian manapun, baik dibagian Body (yang mengisi layar secara penuh),bagian Post, Sidebar, Comment, atau dibagian
header (Comment Header).

Sebagai contoh kasus jika kita ingin membuat frame yang ada bayangannya untuk digunakan didalam template (sekarang banyak digunakan di blog-blog), bagaimana melakukannya?? Secara garis besar yang pertama dilakukan adalah membuat gambar kecil, yang mempunyai panjang memenuhi lebar template. 

Kemudian selanjutnya yang kedua adalah, membuat gambar yang ada bayangannya yang ditempatkan disamping kiri dan kanan dan diulang secara vertikal. Gambar ini nantinya diletakkan dibagian outer-wrapper. Lalu bagaimana kode cara meletakkan gambar sebagai latar belakang yang dapat berulang secara vertikal maupun horisontal?

Kode Peletakkan Gambar Sebagai Latar Belakang

Misalkan kita ingin menggunakan gambar 100 x 100 piksel sebagai latar belakang di bagian
Sidebar1. Apa yang perlu kita lakukan adalah menemukan kode sidebar1 {...} di bagian CSS dan kemudian menambahkan kode yang berwarna merah (kode ada dibawah) tersebut kedalam bagian Sidebar1. Kode yang berwarna biru dibagian bawah, hanyalah contoh kode tambahan saja.

Kode digunakan "background:..." untuk meletakkan gambar sebagai latar belakang dan berulang baik secara vertikal maupun horisontal. Posisi awal gambar akan berada di posisi paling kiri (left-most) dan atas sendiri (top-most).

Format perintah background secara umum adalah

background: URL(http://...) repeat-command x-position y-position;

Perintah Perulangan
• no-repeat (gambar tidak diulang)
• repeat (berulang secara horisntal dan vertikal)
• repeat-x (berulang secara horisontal)
• repeat-y (berulang secara vertikal)

Perintah Posisi Horisontal (x)
• left (peletakkan gambar dimulai pada sisi paling kiri)
• center (peletakkan gambar mulai dari tengah)
• right (peletakkan gambar mulai dari sisi paling kanan)

Perintah Posisi Vertikal (y)
• top (peletakkan gambar dimulai dari sisi paling atas)
• center (peletakkan gambar dimulai dari tengah)
• bottom (peletakkan gambar dimulai dari sisi paling bawah)


Baiklah sobat, pada tutorial kali ini, untuk pengenalan dan pengertian cara pembuatan template blog sudah selesai, nanti kita akan lanjutkan pada part selanjutnya yaitu : Praktek Membuat Template Blog .

Semoga informasi diatas, dapat membantu sobat dan bermanfaat.


Terima kasih.

Salam,
www.sundaku.com

Berlangganan update artikel terbaru via email:

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel