STRUKTUR DARI BAGIAN CSS STYLE

BELAJAR MEMBUAT BLOGGER TEMPLATE 3

Di tutorial ini akan diperlihatkan struktur dari CSS Styling Section, yang merupakan bagian ke 2 dalam struktur blogger template code. Sekali lagi, tidak semua template memiliki struktur yang sama. Itu tergantung style pribadi dari desainernya. Tapi saya menemukan struktur yang memperlihatkan struktur yang sangat logis dan banyak memudahkan ketika coding, debugging, dan customizing template. Sekali lagi, Jika kita bisa mengerti tutorial ini, nanti kita bisa mengubah desain dan struktur dengan cara yang kita mau. Tapi pertama-tama kita harus mengerti ini dan di bawah ini ada struktur yang sangat sederhana untuk dimengerti dan digunakan.

Kita bagi CSS Styling Section menjadi 9 bagian yang lebih kecil. Untuk saat ini kita akan mempelajari bagian-bagian ini secara umum. Kita akan mempelajarinya lebih detail mengenai coding di dalam sub-bagian2 ini nanti di rangkaian tutorial ini. Selalulah mengacu pada struktur blogger template code untuk membantu kita memahami sub-bagian yang dijelaskan di sini.


Subsection 1 - Variable:
Sub-bagian ini mengandung deklarasi (pengenalan) dari font dan warna variable yang muncul di bagian Font and Color tab dalam page Layout. Contohnya Text color atau text font variable yang bisa kita pilih dan ubah menggunakan font and colors tab. Di dalam template-template yang dibuat ourbloggertemplate.com, ditambahkan banyak variable (mendekati 40+) disesuaikan dengan beberapa standard blogger template untuk memudahkan kita mengatur banyak hal dalam template.

Subsection 2 - Global:
Bagian ini berisikan kode untuk mengontrol Layout dan tampilan umum. Jika kita melihat kotak hijau d atas, kita akan melihat "body {.....}". ini berarti setiap kode berada di dalam "{.....}" akan mengontrol property umum (size, layout, dan tampilan) dari badan template (body/semua yang terlihat di layer komputer). Sebagai contoh, bagian ini mengontrol lebar dari template dan warna latar belakang atau gambar. Tapi ini tidak mengatur property detail dalam body container, jika ini mendeklarasikan text font kemudian dalam sub-bagian memasang kembali property yang sama, property yang diatur dalam body container akan tidak diperlihatkan atau dibatalkan.

Dalam sub-bagian, kita juga menemukan bagian besar yang penting lainnya-Outer-wrapper dan content-wrapper- sehingga sub-bagian ini tempat untuk mengatur bagian-bagian ini.

Subsection 3 - Header:
bagian ini mengatur property di dalam bagian header wrapper. Yang paling umum adalah Blog Title dan Blog Description. Pada kebanyakan template di ourblogspottemplate, sudah ditambahkan extra objek pada Header wrapper-yakni Linkbar (Menubar Horisontal). Biasanya, kita tidak bisa menambah objek pada header karena tidak bisa menggunakan tab Add Page Element. Untuk menambahkan linkbar, kita bisa mengubah bagian ke 3 dari template code struktur ( bagian data). Selain itu Ada juga yang menambahkan Google Search Bar. Idealnya, kita bisa menambahkan apapun yang kita inginkan jika tahu bagaimana caranya menggunakan bagian ketiga ini. Ini akan kita lakukan nanti.



Subsection 4 - Main:
Bagian ini mengatur segala property (ukuran, Layout, dan tampilan) dalam Main –Wrapper, antara lain- Date Header, Posting, Comment, feed link, dan beberapa widget yang kita tarik ke bagian Main menggunakan tab add page element.

Subsection 5 - Sidebar:
Bagian ini mengatur property dari segala sesuatu dalam Sidebar-wrapper, contohnya label, Blog Archieve, adsense, links, dll. Tapi ini tidak mengatur berapa banyak sidebar yang kita punya atau lokasinya di blog (contoh: template Sidebar-main-sidebar atau main-sidebar-sidebar). Bagian yang mengatur hal itu adalah bagian tiga dari struktur blogger template code - yaitu Data Section.

Subsection 6 - Miscellaneous:
Bagian ini mengatur property dari elemen-elemen tambahan yang tidak diatur oleh bagian-bagian di atas. Elemen tersenut antara lain Profile (about me), Blockquote, dan kode. Ini berarti jika ingin mengubah warna quoted text atau font dari nama panggilan di profile, bagian inilah yang perlu diubah.



Subsection 7 - Post-Footer:
Dalam template umum, bagian ini mengatur 3 hal:
1. Post-Footer – text di bawah post body. Ini bagian yang berisikan Informasi tentang posting, atau text yang berkata "Posted by YourNickname, Labels: ....., 5 Comments, dll.
2. Blog-Pager – Link di bawah posting yang berkata "Newer Posts, Home, atau Older Posts".
3. Feed-Link – link yang bilang "Subscribe to: Posts (Atom)".

Subsection 8 - Comment:
Bagian ini mengatur property dari bagian Comment di dalam blog.

Subsection 9 - Footer:
Bagian ini mengatur property dalam bagian footer. Pada umumnya, bagian footer berisikan beberapa text yang menjelaskan kepemilikan atau copyright dari blog. Dalam beberapa blog, mereka juga meletakkan bagian extra seperti : Recent Posts atau Popular Posts dalam 2 kolom atau lebih. Pada dasarnya, kita bisa meletakkan apapun dalam footer seperti dalam sidebar. Tapi jika kita ingin menambahkan lebih dari 1 kolom di bagian footer, kita harus merombak bagian ketiga dari struktur blogger template code
ourbloggertemplate.com