Tutorial Membuat Template Blogger Part I Lengkap

Ada baiknya kita belajar bersama membuat atau mendesign template blog sendiri. Sebelum sobat memulai untuk membuat atau mendesign template blog sendiri, langkah utama adalah sobat harus tahu terlebih dahulu strukture template blog. Mari kita bahas bersama-sama .

1. Struktur dari Template Blogspot

Sebelum merancang template, sobat harus tahu tentang struktur atau bagian-bagian dari template. Setiap template tidak harus memiliki struktur yang sama. Namun dengan mengetahui struktur dasarnya, sobat dapat dengan mudah mendapatkan ide untuk merancang template dan mungkin dapat mengubah dengan struktur yang berbeda sesuai selera sobat.

Sobat bisa lihat contoh strukture atau bagian-bagian template pada gambar dibawah ini







Jika sobat bingung atau belum paham dengan gambar diatas, sobat bisa membaca artikel sebelumnya tentang Mengenal Bagian-bagian Template

Berikut penjelasan mengenai bagian-bagian strukture pada template blog:


  • Body: blok paling luar adalah Body dari template (pada dasarnya merupakan seluruh layar dari komputer).


  • Outer-wrapper: bagian ini adalah yang melingkupi template (bagian dari batas luartemplate). Secara umum, wrapper digunakan untuk menempatkan blok-blok yang lebih kecil yang ada didalamnya. Blok yang paling umum didalam Outer-wrapper adalah Header, Content, and Footer.


  • Header: blok ini adalah bagian paling atas dari blok. Didalam Header dapat juga memiliki sub-blok, misalnya: Header Judul blog, Deskripsi blog, dan lain-lain seperti banner Adsense, menu bar, dll. Diluar header atau untuk membungkus semua sub-blok didalam header biasanya dinamakan Header-wrapper.


  • Content: dibawah Header adalah Content-wrapper - Pada dasarnya merupakan bagian dari blok yang paling penting. Secara umum bagian wrapper ini didalamnya terdiri dari blok Sidebar (bisa 1,2 atau lebih sidebar) dan blok Main (yang berisi hasil posting artikel, komentar, atau beberapa ads).


  • Footer: adalah bagian bawah dari template. Seperti di Header, dibutuhkan juga Footerwrapper yang berisi bagian-bagian dari footer.


  • Main: Main-wrapper adalah bagian luar dari blok Main yang didalamnya terdapat Content-wrapper. Didalam Main-wrapper terdapat blok Post, blok Comment, Date Header, dan bagian lain yang dapat dibuat dari opsi Add Page Element.



  • Sidebar: adalah bagian yang dapat berisi semua widget dan biasanya terletak dibagian samping, seperti: About Me, Labels, Archive, Text, HTML, Adsense, etc. Didalam standard template dari Blogger, biasanya ditemukan 1 sidebar, jika terdapat 1 sidebar maka template terdiri dari 2 kolom, yaitu Main dan Sidebar. Tetapi jumlah sidebar dapat ditambahkan dengan mudah. Yang paling umum adalah memiliki 2 sidebar atau berarti template memiliki 3 kolom. Dengan mengikuti seri tutorial ini diharapkan, nantinya kita dapat mengerti struktur dari template dan dengan mudah menambah atau memindah sidebar kekiri atau kanan.


  • Blog Post: blok ini berisi bagian yan paling penting, seperti Posts Titles (judul artikel), Post (artikel), Post Author (Penulis artikel), Labels (label), etc.



Struktur dari template blogger, jika dilihat secara hierarki, mulai dari bagian yang paling besar ke bagian yang paling kecil, dapat ditampilkan sebagai gambar berikut:



Setelah memahami struktur diatas, akan lebih mudah untuk memahami struktur kode dari
templat Blogger. Belajar struktur kode dari template sebenarnya tidak belajar tentang
HTML atau CSS, tetapi lebih terhadap bagaimana kode tersebut disusun dan terorganisir.

Dengan memahami struktur dari template, walaupun punya pengetahuan yang minim terhadap pemrograman web, sobat dapat mengubah template atau mendesain sesuai dengan selera.


2. Struktur dari Kode Template Blogspot

Setelah mempelajari bagian-bagian dalam struktur dari template blogspot, sekarang kita
pelajari struktur dari kode template Blogger
Untuk mempelajarinya digunakan template standard dari Blogger, tetapi jangan kawatir semua kode di template Blogger hampir mempunyai struktur yang sama.

Secara sederhana, struktur dari kode template Blogger terpisah menjadi 3 bagian, baris dari atas setiap bagiannya dapat dilihat pada gambar sebagai berikut:


Bagian 1:
Ini adalah 'header' dari kode template. Bagian ini berisi informasi penting tentang kode template dan judul dari blog. Bagian ini tidak perlu dipikirkan secara serius, karena tidak mempengaruhi tampilan dari sebuah template, selain itu bagian ini merupakan standard dari semua template. Kadang-kadang kita perlu edit bagian ini, hanya untuk menambahkan kode meta tags.


Bagian 2:
Ini adalah bagian untuk kode CSS (Cascading Style Sheets). Kode CSS adalah bahasa web yang digunakan untuk mengatur format dari dokumen HTML. Bagian ini adalah bagian yang harus diketahui dan dimengerti, jika ingin memodifikasi atau membuat template baru. Meskipun ini merupakan kode pemrograman web, dengan memahami struktur bagian dan kode dari template, kita berharap dapat memodifikasi dan membuat template baru tanpa harus banyak mengerti tentang kode HTML dan CSS.




Bagian 3:
Ini adalah bagian 'body' atau kode untuk data. Bagian yang paling penting untuk mengambil semua data dari database Blogger dan meletakkannya ditempat yang tepat di Blog. Ini juga merupakan bagian yang mengatur bagian mana yang ditampilkan lebih dulu pada saat blog dilihat, apakah bagian header, sidebar, post atau footer. Tetapi bagian ini, tidak mengatur tampilan di internet, karena untuk mengatur tampilan, sudah dikendalikan oleh kode CSS.

Sebenarnya bagian-bagian diatas tidak menuntut untuk memahami secara detail tentang kode pemrograman HTML dan CSS, tetapi kita harus tahu sedikit tentang kode-kode tersebut jika ingin menambahkan widget yang tidak disediakan dalam elemen 'tambah widget' yang ada di Blogger, atau kita ingin menambahkan kode adsense didalam bagian posting artikel. Tetapi jangan kawatir, banyak petunjuk yang tersedia di internet untuk menambahkan kode-kode tersebut dalam template blog.

Baiklah sobat, sampai disini dulu. 
Selanjutnya nanti kita akan membahas tentang Tutorial Membuat Template Blogger Part II (STRUKTURE DARI KODE CSS).

Semoga bermanfaat.

Terima kasih


Salam,

Berlangganan update artikel terbaru via email:

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel