Belajar Membuat Template Blogger

Tutorial Blog 10 : Belajar Membuat Template Blogger

Berdasarkan postingan sebelumnya dalam serial Tutorial Blog dan Template dari tutorial 1 sampai 10, rasanya cukup sebagai dasar untuk melakukan editing template  blogspot bahkan untuk Belajar Membuat Template Blogger hasil rancangan sendiri.

Bagi para designer template memang punya cara dan selera masing-masing dalam rancangannya, itulah sebabnya banyak template yang kode CSS ( Cascading Style Sheets ) berbeda termasuk juga dalam susunannya.

Oleh karena hal diatas maka khusus bagi pemula seperti saya perlu memperhatikan beberapa langkah  berikut ini sebagai panduan dalam Belajar Merancang Template Blogger sendiri, diantaranya :

Langkah 1:  Pilih template yang sudah jadi sebagai acuan

Cara termudah dan tercepat untuk mulai merancang template sendiri Untuk pemula adalah dengan memulai dari template yang ada dan dianggap cocok dengan selera tanpa bermaksud menjiplak tapi semata-mata  sebagai acuan dan kita tidak perlu menuliskan kode-kode template yang cukup rumit tapi tinggal copas saja kode-kode yang diperlukan.
Template awal yang berguna untuk acuan adalah bagian Body (yang menetapkan tata letak keseluruhan / layout dan jumlah 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 lokasi kolom 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 Cara Membuat Template Blogger 3 Kolom.

Langkah 3:  Menetapkan lebar dari template 

Hal pertama yang perlu Anda lakukan setelah mendapatkan template awal adalah untuk mengatur lebar dari template Anda. Untuk ii yang perlu dilakukan adalah  memodifikasi kode di CSS. lihat penjelasanya di postingan Cara 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 di container-wrapper karena didalamnya ada bagian Main dan Sidebar, jika lebar tidak diatur dengan baik, maka Sidebar dapat berada dibawah Main.

Langkah 4: Menguji Template

Jika merancang template baru, kita harus tahu bahwa perubahan yang dilakukan itu telah 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.  Silahkan baca postingan : 

1. Setting Properti Kontainer Template Blogger
2. Bagian CSS Styling Template Blogger
3. Stuktur CSS Template Blogger 1
4. Struktur Dasar Template Blogger 3
5. Struktur Dasar Template Blogger 2
6. Struktur Dasar Template Blogger 1
7. Struktur / Bagian Dasar Template Blogger

Langkah 6:  Menguji Template di browser lain

Hal ini perlu dilakukan karena pengguna interet ini banyak dan menggunakan browser yang berbeda. Oleh karena itu cobalah uji dengan Google Chrome opera, firefox, internet explorer dan lain-lain. Adakalanya sebuah blog tampil sempurna di firefox  dan chrome tapi kurang sempurna di browser lainnya.

Langkah 7:  Menggunakan gambar sebagai latar belakang

Jika Anda bosan menggunakan warna polos, Anda dapat menggunakan gambar yang lebih bagus sebagai latar belakang seluruh blog atau latar belakang dari beberapa wadah (misalnya Post, Sidebar, Footer, Header, dll).

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.

Ok sampai disini dulu rangkaian artikel Tutorial blog dalam topik bahasan Belajar Mengenal Template Blogger. Memang belum tuntas karena masih banyak yang perlu dibahas namun dalam tahap pertama ini saya cukupkan dulu sampai postingan ini yaitu Belajar Membuat template Blogger sebagai implementasi atau prakteknya.

Semoga bermanfaat , yang jelas ini sebagai bahan rujukan  saya pribadi dalam utak-atik template blog ini dan blog lainnya.

Semua postingan dalam serial Mengenal Template Blogger  :

1. Cara Membuat Template Blogger 3 Kolom
2. Kode CSS Template Bagian Body 2
3. Kode Template Bagian Body
4. Cara Mengatur Ukuran Template
5. Kontainer Umum Dan Elemen Template Blogger
6. Setting Properti Kontainer Template Blogger
7. Bagian CSS Styling Template Blogger
8. Stuktur CSS Template Blogger 1
9. Struktur Dasar Template Blogger 3
10. Struktur Dasar Template Blogger 2
11. Struktur Dasar Template Blogger 1
12. Struktur / Bagian Dasar Template Blogger

Bahan referensi : Our Blogger Template

---

1. Thanks telah mampir, yo kita saling vote dan comment..
2. Bila berkenan tolong share/bagikan dengan tombol share dibawah.
3. Gratis langganan artikel blog ini, silahkan klik Subscribe Disini, atau masukan email disidebar yg telah disediakan

---