Membuat Template Blogger Part 7 ( Memulai Menciptakan Template Blog )

Memulai Membuat Template Blogspot



Setelah memahami dan mengerti tutorial-tutorial sebelumnya, saatnya untuk menciptakan dan

merancang template sendiri di Blogspot. Dalam tutorial ini, akan diberikan langkah-langkah
untuk menciptakan template sendiri secara cepat dan dengan mudah.

Sebenarnya perihal 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, supaya tidak terlalu banyak buang-buang waktu dalam menciptakan dan merancan template.

Langkah 1: Pilih template yang sudah jadi sebagai acuan

Sebagai pemula, cara yang termudah dan tercepat untuk merancang template ialah memulainya dengan template yang sudah ada. Tetapi jangan melakukannya dengan maksud untuk menjiplak itu. Pilihlah template sebagai pola yang bersahabat dengan tujuan dari template yang akan dirancang.

Pemilihan template sebagai pola ini dimaksudkan supaya kita tidak menuliskan kode-kode
template dari awal dan menghindari terlibat dengan urusan programming.
Tetapi ketika melaksanakan ini, tidak bermaksud untuk melaksanakan pengkodean sedikit dan
kemudian mengklaim bahwa versi terakhir ialah desain sendiri, itu SALAH dan TIDAK ETIS. 

Template awal hanyalah titik awal untuk membantu proses pengkodean. Template awal yang berguna untuk pola ialah bab Body (yang tetapkan tata letak keseluruhan / layout danjumlah kolom) , isyarat CSS (misalnya # main-wrapper,. Sidebar, # sidebar2, blog-pager, dll) dan beberapa 'default' isyarat yang dihentikan dimodifikasi atau dihilangkan.

Langkah 2: Menetapkan Jumlah dan Letak Kolom di Sidebar

Jika seorang pemula, pastikan memulai dengan template yang seolah-olah dengan desain yang akan dirancang, contohnya kalau ingin merancang template 3 kolom, jangan beracuan dengan template 2 kolom. Jika ingin menambah atau mengubah sidebar, baca tutorial sebelumnya perihal menciptakan template 3 kolom.

Langkah 3: Menetapkan Lebar Kolom

Hal pertama yang perlu dilakukan sesudah mendapat template awal sebagai pola adalah
mengatur lebar dari template. Untuk mengatur lebar yang perlu dilakukan ialah 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 ialah yang ada di container-wrapper alasannya di dalamnya terdapat bab Main dan Sidebar, kalau lebar tidak diatur dengan baik, maka Sidebar sanggup 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 mempunyai kutipan (blockquote), daftar bernomor, daftar tidak bernomor dan menciptakan beberapa widget untuk melihat bahwa tampilan sidebar sesuai dengan yang diinginkan.

Langkah 5: Memodifikasi isyarat CSS untuk mengubah tampilan

Disinilah kita memulai mengutak-atik isyarat 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 isyarat alasannya hal yang sangat jarang untuk langsung mendapatkan sesuatu yang tepat untuk pertama kali. Baca tutorial sebelumnya perihal struktur dari isyarat CSS, dan tutorial lainnya tentang mengatur properti dari setiap bab di CSS dan tutorial perihal bab dan elemen di template Blogger.

Langkah 6: Menguji di browser lain

Cara ini sebetulnya 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 adakala tampilan yang kita rancang akan bagus di browser yang satu tetapi belum tentu untuk browser yang lain, untuk itulah uji coba perlu dilakukan supaya web kita terlihat anggun untuk dilihat oleh semua orang. Ada tool yang anggun untuk menguji tampilan website supaya kompatibel disemua browser, cobalah uji di Browsershots.org.


Langkah 7: Menggunakan gambar sebagai latar belakang

Jika bosan dengan memakai warna yang polos ditemplate kita, kita sanggup menggantinya
dengan gambar. Gambar ini sanggup dipakai sebagai latar belakang dari keseluruhan template atau untuk bagian-bagian tertentu saja, contohnya Post, Sidebar, Footer, Header, dll. Bagian ini akan kita bahas eksklusif dibawah ini tentang Memodifikasi isyarat dalam penggunaan gambar sebagai latar belakang.


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

Memodifikasi isyarat dalam penggunaan gambar sebagai latar belakang.


Bagaimana Menggunakan Gambar Sebagai Latar Belakang?

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

Gambar ini disebut sebagai gambar latar belakang. Gambar yang dipakai sebagai
latar belakang sanggup 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 dipakai sebagai latar belakang, sanggup diletakkan di bab manapun, baik dibagian Body (yang mengisi layar secara penuh),bagian Post, Sidebar, Comment, atau dibagian
header (Comment Header).

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

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

Kode Peletakkan Gambar Sebagai Latar Belakang

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

Kode dipakai "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 warta diatas, sanggup membantu sahabat dan bermanfaat.


Terima kasih.

Salam,
www.sundaku.com

0 Response to "Membuat Template Blogger Part 7 ( Memulai Menciptakan Template Blog )"

Posting Komentar