Desain Template Blogger: Tutorial 3
<< Tutorial 2: Struktur dari Kode Template Blogger
>> Tutorial 4: Mengatur Properties Kontainer
Kembali ke Daftar Isi
Pada tutorial ini, akan dijelaskan struktur dari kode CSS yang merupakan bagian kedua dari struktur kode template Blogspot. Walaupun semua template tidak mempunyai struktur yang sama, tergantung pada gaya pribadi dari seorang desainer.Tapi saya akan menunjukkannya selogis mungkin dan membuat semuanya jauh lebih mudah ketika coding, debugging, dan menyesuaikan template Anda. Dengan memahami tutorial ini diharapkan dapat lebih mudah untuk mengubah model dan struktur dari template.
Saya sudah mengurangi Bagian CSS Styling menjadi 9 subbagian yang lebih kecil. Untuk saat ini, saya akan menjelaskan subbagian pada umumnya. Tutorial berikutnya akan menjelaskan lebih detail tentang kode yang ada dalam setiap bagiannya. Tetaplah mengacu pada Struktur Sebuah Blogger Template untuk membantu Anda memahami lebih baik tentang subbagian dan kontainer yang saya jelaskan di sini.
Bagian 1 - Variable:
Bagian ini berisi deklarasi (pengenalan) variabel huruf dan warna yang akan muncul di tab Font dan Warna di halaman Layout. Misalnya, Warna Teks atau Teks font variabel yang dapat Anda pilih dan memodifikasi menggunakan tab Font dan Warna. Dalam template generik, telah ada penambahan banyak variabel (mendekati 40) dibandingkan dengan beberapa template Blogger standard untuk memudahkan Anda menyesuaikan banyak hal pada template itu. Deklarasi variabel huruf dan warna ini dapat diubah-ubah sesuai dengan selera.Bagian 2 - Global:
Bagian ini untuk mengontrol penampilan umum dan tata letak. Jika Anda melihat bar hijau di atas, Anda akan melihat kode "body {.....}", ini berarti bahwa setiap kode yang masuk dalam {.....} akan mengendalikan properti umum dari website, seperti ukuran, tata letak dan tampilan dari template yang terlihat dilayar komputer. Sebagai contoh, ia mengendalikan lebar seluruh template dan warna latar belakang atau gambar. Namun bagian ini tidak mengendalikan model dari seluruh template (dilakukan oleh tiap subbagian lainnya), 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. Dalam sebagian besar template generik, telah ditambahkan objek ekstra dalam Header-wrapper - yaitu Linkbar (atau pada menu horizontal). Biasanya, Anda tidak dapat menambahkan objek tambahan di Header karena Anda tidak dapat menggunakan tab Add Page Elemen, Namun dengan mengubah kode sedikit dibagian ini, kita dapat menambah elemen apapun nantinya. Ini akan dipelajari pada tutorial berikutnya.
Bagian 4 - Main:
Bagian ini mengatur properti (ukuran, tata letak dan tampilan) 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, dll. Tetapi bagian ini tidak mengatur berapa banyak sidebar yang Anda miliki atau lokasi mereka di blog (contoh Sidebar-Main-Sidebar atau Main-Sidebar-Sidebar). Bagian ini dilakukan dalam Bagian 3 dari Struktur Kode Template Blogger - Bagian Data.
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 Generic, bagian ini mengatur properti 3 sub bagian:
- Post-Footer : ini adalah tulisan dibawah posting artikel yang biasanya berisi informasi tentang artikel tersebut, seperti nama penulis, label, banyaknya komentar, dan lain-lain.
- Blog-Pager : merupakan link dibawah posting artikel, seperti "Newer Posts, Home, atau Older Posts".
- 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 sebuah hak cipta dari blog. Pada beberapa template lain, bagian Footer bisa juga ditempatkan widget tambahan seperti Recent Posts atau Popular Posts dalam 2 atau lebih kolom. Pada dasarnya, Anda dapat menempatkan apa saja di Footer seperti di Sidebar. Tetapi jika Anda ingin menambahkan lebih dari 1 kolom ke Footer, Anda harus men-tweak bagian ke-3 Struktur Kode Template Blogger Anda.
___________________
Sumber: Our Blogger Templates