Tutorial Membuat Template Blogger Part 2( Strukture Kode CSS )

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 tutorial kali ini, Sundaku akan menjelaskan bagian-bagian yang umum dan akan dijelaskan lebih detail tentang kode yang ada dalam setiap bagiannya.

Berikut gambar dibwah ini:




Bagian 1 - Variable:
Bagian ini berisi deklarasi variabel huruf dan warna yang akan muncul dihalaman websiteDeklarasi 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 yan 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. 





Bagian 4 - Main:
Bagian ini mengatur properti (ukuran, tata letak dan tampilan) dari segala sesuatu yang ada
didalam Main-wrapper, seperti Date Header, Post, Comment, Feed Link, dan setiap widget yang dapat ditambahkan dalam Main dengan menggunakan Add Page Elemen.

Bagian 5 - Sidebar:
Bagian ini mengatur properti dari segala sesuatu yang ada didalam Sidebar-wrapper, seperti Labels, Blog Archive, unit Adsense, Link Lists, etc.Tetapi ini tidak mengatur semua sidebar yang ada dalam template blog, pengaturannya tergantung dari lokasi dimana sidebar tersebut berada.


Bagian 6 - Miscellaneous:
Bagian ini mengatur properti dari unsur-unsur tambahan didalam blog yang tidak diatur oleh semua bagian-bagian diatas. Unsur-unsur itu misalnya Profile (atau bagian About Me), Blockquote, dan kode. Itu berarti, jika ingin mengubah mengubah warna teks yang ada di blockquote, maka harus mengubah properti yang ada di bagian tersebut.




Bagian 7 - Post-Footer:
Di template yang standard, bagian ini biasanya terdapat 3 sub bagian yang dapat diatur
propertinya:
1. Post-Footer : ini adalah tulisan dibawah posting artikel yang biasanya berisi informasi
tentang artikel tersebut, seperti nama penulis, label, banyaknya komentar, dan lain-lain.
2. Blog-Pager : merupakan link dibawah posting artikel, seperti "Newer Posts, Home, atau
Older Posts".
3. Feed-Link : link yang bertuliskan "Subscribe to: Posts (Atom)".


Bagian 8 - Comment:
Bagian ini mengatur properti dari bagian Comments dalam blog.

Bagian 9 - Footer:
Bagian ini mengatur semua properti di bagian Footer. Umumnya, dibagian Footer berisi
beberapa tulisan, yang menjelaskan kepemilikan atau hak cipta dari blog
Pada beberapa template lain, bagian Footer bisa juga ditempatkan widget tambahan yang terdiri dari beberapa kolom. 
Pada dasarnya bagian ini terdiri atas 1 kolom, namun jika kita ingin mengubah menjadi
beberapa kolom, maka kita harus meodifikasi sedikit kodenya.

Baiklah sobat, mungkin sampai disini dulu ya, nanti kita akan lanjutkan lagi untuk pembahasan yang lebih detailnya.

Tutorial selanjutnya, Sundaku akan membahas tentang mengatur properti CSS dari bagian-bagian yang ada dalam template. Tunggu part selanjutnya yaitu : Membuat Template Blogger Part 3 Lengkap (Mengatur Properti di CSS).

Terima kasih

Salam,
www.sundaku.com

Berlangganan update artikel terbaru via email:

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel