Novi Amalia

Saat kita melihat home page orang yang tampilannya artistik kepengen juga memilikinya, memang banyak sekali template blog yang diberikan secara gratis untuk kita gunakan.

Tapi walaupun template tersebut bagus, kadang tak sesuai dengan misi blog atau selera kita, nah masalah inilah yang sering timbul. Lalu kendalanya apa ? masalah teknis mengubah layout, misalnya tata letak, tampilan background, jenis huruf dan warna, belum lagi masalah isi postingan. Misalnya tidak bisa menampilkan slide foto koleksi kita. Bukan berarti tidak bisa insert foto, kalau sekedar insert tentu saja bisa dan gampang, yang aku maksud disini agar foto statis tadi bisa memiliki tampilan yang lebih menarik dilihat dengan memberi sentuhan animasi.

Dengan pengalaman seperti yang aku sebutkan diatas, aku mencoba meng-utak atik template gratisan yang banyak di share di google. Saat melihat life demo-nya, aku tertarik kemudian menguduhnya. Begitu aku coba pasang pada template blog yang aku punya, ternyata menemui banyak masalah, sebagai contoh foto berubah letaknya, demikian juga tampilan sidebar jadi berantakan. Jika isi postingan masih sedikit mungkin tidak masalah bisa kita edit ulang, yang jadi masalah jika isi postingan kita sudah ratusan !

Tulisan ini hanyalah sebagai catatan pribadiku saja, tidak bermaksud menggurui, karena aku juga masih belajar. Karena masih belajar, tentu saja banyak yang salah. Ok, aku akan menulis catatan bab template blog yang aku dapat dari berbagai sumber, yang aku rangkum sesuai kemapuan dan pemahaman otakku.

Untuk dapat mengubah template sebaiknya kita mengenal susunan (istilah)koding dalam mendesain template. Kalau sekedar kopi paste seperti saran di banyak blog tetangga yang punya misi tutorial blog, kadang koding mereka tidak bisa diterapkan pada template kita, mungkin karena beda struktur, namanya juga buatan orang lain yang kita tidak kenal, tentu tak sesuai seperti yang kita harapkan.

Lebih ruwet lagi yang men-desain template yang kodingnya memakai isitlah yang tidak umum, menggunakan istilah sesuai selera siperancang, sebagai contoh blog oyin ini, dimana perancang pertamanya creating website maskolis, istilah dalam koding semaunya siperancang, membingungkan jika kita ingin mengubah tampilan template buatan dia, misalnya mengubah tata letak, atau ingin menambah koding CSS, sedangkan kita buta isitilah dalam koding struktur blog. Beda jika kita ambil template dari rancangan orang luar sana. Umumnya rapih, sehingga lebih mudah di difahami karena bahasanya baku.

Struktur template pada blog.


Didalam dunia desain web, layout atau mengatur tata letak template, format huruf, dan lainnya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagian desain web lainnya.

Karena jika kita membuat layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal ini juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan bisa jadi default dari browsernya sendiri juga berbeda-beda. Browser yang paling rewel soal layout CSS adalah IE karena kurang mendukung pada format CSS.

Sebelum kita melangkah ke hal yang lebih spesifik sebaiknya kita mengenal susunan atau istilah koding dari template blog. Pada umunya ada enam bagian yang sering ada dalam layout sebuah web yaitu:

1. 1. Header berisi tema atau judul, bisa berupa tulisan, gambar, logo atau campuran.
2. 2. Main wraper berisi menu dari topik2 yang diposting
3. 3. Sidebar berisi pernak-pernik blog agar terlihat menarik sebelum masuk ke postingan
4. 4. Footer berisi identitas atau copyright
5. 5. Outer wrapper merupakan pembungkus seluruh elemen blog
6. 6. Body tampilan seluruh blog seperti oyin ini

Dalam merancang sebuah desain blog, pertama kita harus memiliki pola atau gambaran seperti apa template yang akan kita buat. (lihat gambar diatas)

Ada dua cara penempatan elemen dalam web dengan CSS yaitu:
1. Position (Posisi) yang terdiri dari empat cara dalam penempatannya;

• Static    : posisi normal (default).
• Relative : posisi elemen tergantung dari elemen yang lain.
• Absolute : posisi elemen berpatokan pada jendela browser.
• Fixed    : posisi elemen tetap walaupun digeser.

2. Float (Nempel)

• Float:left dimana elemen akan menempel pada sebelah kiri elemen induk.
• Float:right dimana elemen akan menempel pada sebelah kanan elemen induk.
• Clear:left dimana elemen akan menempel pada sebelah kiri dan berada di bawah.
• Clear:right dimana elemen akan menempel pada sebelah kanan dan berada dibawah
• Clear:both dimana elemen akan berada pada posisi bawah elemen diatasnya.
• Margin jarak atau batas elemen dengan elemen lain
• Border adalah garis tepi elemen
• Padding jarak elemen dengan isi elemen (elemen anak)

Demikian pengertian dasar dari layout template suatu web atau blog. Selanjutnya kita beralih ke topik cara penempatan atau pemasangan kode CSS untuk mengatur tampilan agar sesuai yang kita harapkan. (dilanjutkan pada posting bagian ke dua)