Tutorial membuat template blogger dari dasar (Part II)

Struktur dari Kode Template Blogspot

Setelah mempelajari bagian-bagiannya dalam struktur dari template blogger, sekarang kita pelajari struktur dari kode template Blogspot. 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 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-kodetersebut dalam template blog. 

Tutorial selanjutnya tentang Struktur dari kode CSS. 

Pada tutorial kali ini akan dijelaskan struktur dari kode CSS yang merupakan bagian dari struktur kode template Blogspot. Walaupun semua template tidak mempunyai struktur yang sama, namun pemahaman dari tutorial sebelumnya diharapkan dapat membantu untuk lebih mengenal template dari Blogspot, sehingga dapat lebih mudah ketika melakukan coding, debugging atau memodifikasi template. Dengan memahami tutorial ini diharapkan dapat lebih mudah untuk mengubah model dan struktur dari template. Untuk lebih memahami kode CSS, telah dibagi bagian-bagian dari CSS menjadi 9 bagian yang lebih kecil. Untuk tutorial ini, akan dijelaskan bagian-bagian yang umum, Tutorial berikutnya akan dijelaskan lebih detail tentang kode yang ada dalam setiap bagiannya.

Bagian 1 - Variable: Bagian ini berisi deklarasi variabel huruf dan warna yang akan muncul dihalaman website. Deklarasi variabel huruf dan warna ini dapat diubah-ubah sesuai dengan selera.

Bagian 2 - Global: Bagian ini untuk mengontrol penampilan umum dan tata letak. Kode CSS dari bagian ini adalah "body {.....}",  ini berarti bahwa setiap kode yang masuk dalam {.....} akan mengendalikan model umum dari website, seperti ukuran, tata letak dan tampilan dari template yanG terlihat dilayar komputer. Misalnya mengontrol lebar dari template dan warna latar belakang atau gambar. Namun bagian ini tidak mengendalikan model dari seluruh template, jika bagian yang lebih kecil mendeklarasikan sendiri maka secara otomatis deklarasi yang ada di "body {.....}" ini akan diganti atau dibatalkan.

Bagian 3 - Header: Bagian ini adalah untuk mengatur properti yang ada didalam bagian Header-wrapper. Yang paling umum adalah judul dan deskripsi blog. Dibagian Header, biasanya kita tidak dapat menambahkan elemen melalui menu tab Add Page Elemen, Namun dengan mengubah kode sedikit dibagian ini, kita dapat menambah elemen apapun nantinya. Ini akan dipelajari pada tutorial berikutnya. 

Stay tune yah, Semoga Mmbantu