Berikutnya menjelaskan Struktur CSS Styling Section, yang merupakan bagian kedua dari Blogger Template Code Structure. Tetapi tidak semua template mempunyai kode struktur yang sama, structure yang dipakai adalah Blogger Template Code Structure ttutorial sebelumnya. Pada dasarnya struktur tergantung dari seseorang mendesainnya mau menggunakan gaya atau model bagaimana? Akhirnya nanti anda bisa membuat stuktur blog dengan gaya anda sendiri setelah anda memahami struktur dasarnya. Disini saya berikan struktur dasar sederhana supaya anda mudah memahami dan mudah menggunakan, pengembangannya tergantung anda sendiri.
Saya telah mengurangi bagian CSS Styling menjadi 9 bagian yang kecil. Sekarang saya akan menggambarkan bagian secara umumnya. Kita juga akan sampai ke detail coding dalam tutorial selanjutnya. Yang penting selalu diingat Template acuan yang kita gunakan adalah Blogger Template Code Structure tutorial sebelumnya. Untuk memahami lebih lanjut mengenai subbagian dan kontainer saya jelaskan pada gambar berikut ini ;
SubSection 1 - Variabel
Bagian ini berisi deklarasi pengenalan dari variabel font dan warna yang muncul ditab font dan warna dihalaman Layout. MIsalnya untuk teks warna atau teks font variabelnya bisa dipilih dan dimodifikasi menggunakan tab font dan warna. Dalam template saya telah menambahkan banyak variabel kurang lebih 40 buah dibandingkan template standar dengan tujuan memudahkan bagi anda menyesuaikan banyak hal pada template.
SubSection 2 - Global
Bagian ini berisi coding untuk mengatur tampilan umum dan layout. Silahkan anda lihat pada gambar diatas yang berwarna hijau. anda akan melihat code dengan tanda body {...}. Ini berarti setiap kode yang berada diantara tanda { dan } akan mengatur properti umum (layout, ukuran dan tampilan) dari bagian template dan segala sesuatu yang muncul di layar monitor anda. Sebagai contoh mengatur lebar template, warna dan gambar. Tetapi tidak mengendalikan sifat dari seluruh template yang kita buat (sifat detail template karena bagian itu diatur oleh subsection yang lain). Atau jika anda mengeset (contoh pengaturan font) dalam kode body dan juga dalam kode subsection tersendiri maka yang akan digunakan adalah yang ada disubsection sedangkan kode ditubuh tidak dipakai, bila anda tidak mengaturnya di subsection maka yang digunakan aturan kode yang di body.
Didalam sub section Global anda juga akan menemukan kontainer Outer-wrapper dan Content-wrapper.
SubSection 3 - Header
Bagian ini mengatur properti segala sesuatu didalam Header-Wrapper kontainer anda. Yang paling umum adalah blog title dan blog deskription. Disebagian template saya, telah saya tambahkan objek baru di header wrapper, seperti linkbar (dalam horizontal menu). Biasanya anda tidak dapat menambahkan menu dalam header karena tidak terdapat option Add Page Elemen tab. Untuk menambahkan linkbar saya harus menambahkan kode pada Section bagian 3 yang merupakan code tempate (bagian data). Dalam blog saya (dzelque.blogspot.com) saya menambahkan beberapa opsi yang lain sendiri seperti Google Search Bar. Idealnya anda dapat menambahkan apa saja di bagian Section ke 3 dan ini akan kita bahas nanti.
SubSection 4 - Main
Bagian ini mengatur (size, layout dan tampilan) dari segala sesuatu di Main-Wrapper blok yang mengandung Tanggal, Posting, Komentar, Feed Link, dan widget yang anda tambahkan ke main menggunakan Add Page Element.
SubSection 5 - SideBar
Bagian ini mengatur properti dalam sidebar-wrapper misalnya dalam Labels, Blog Archives, Adsense Units, Link List dan lainnya. Tetapi tidak mengatur berapa banyak sidebar yang anda miliki atau lokasi mereka diblog (contoh Sidebar-Main-Sidebar atau Main-Sidebar-Sidebar). Bagian ini dilakukan dalam Bagian ke 3 dari Blogger Template Code Structure.
SubSection 6 - Miscellaneous
Bagian ini mengatur properti tambahan dalam blog anda yang tidak dikendalikan oleh semua subSection diatas. Elemen ini berisi Profile (blok About Me), Blogquote, dan kode. Ini berarti jika anda ingin mengubah text atau warna dalam nickname anda dalam block About Me, ini adalah bagiannya.
SubSection 7 - PostFooter
Dalam Template Generik saya bagian ini mengontrol properties dalam 3 hal :
Bagian ini berisi deklarasi pengenalan dari variabel font dan warna yang muncul ditab font dan warna dihalaman Layout. MIsalnya untuk teks warna atau teks font variabelnya bisa dipilih dan dimodifikasi menggunakan tab font dan warna. Dalam template saya telah menambahkan banyak variabel kurang lebih 40 buah dibandingkan template standar dengan tujuan memudahkan bagi anda menyesuaikan banyak hal pada template.
SubSection 2 - Global
Bagian ini berisi coding untuk mengatur tampilan umum dan layout. Silahkan anda lihat pada gambar diatas yang berwarna hijau. anda akan melihat code dengan tanda body {...}. Ini berarti setiap kode yang berada diantara tanda { dan } akan mengatur properti umum (layout, ukuran dan tampilan) dari bagian template dan segala sesuatu yang muncul di layar monitor anda. Sebagai contoh mengatur lebar template, warna dan gambar. Tetapi tidak mengendalikan sifat dari seluruh template yang kita buat (sifat detail template karena bagian itu diatur oleh subsection yang lain). Atau jika anda mengeset (contoh pengaturan font) dalam kode body dan juga dalam kode subsection tersendiri maka yang akan digunakan adalah yang ada disubsection sedangkan kode ditubuh tidak dipakai, bila anda tidak mengaturnya di subsection maka yang digunakan aturan kode yang di body.
Didalam sub section Global anda juga akan menemukan kontainer Outer-wrapper dan Content-wrapper.
SubSection 3 - Header
Bagian ini mengatur properti segala sesuatu didalam Header-Wrapper kontainer anda. Yang paling umum adalah blog title dan blog deskription. Disebagian template saya, telah saya tambahkan objek baru di header wrapper, seperti linkbar (dalam horizontal menu). Biasanya anda tidak dapat menambahkan menu dalam header karena tidak terdapat option Add Page Elemen tab. Untuk menambahkan linkbar saya harus menambahkan kode pada Section bagian 3 yang merupakan code tempate (bagian data). Dalam blog saya (dzelque.blogspot.com) saya menambahkan beberapa opsi yang lain sendiri seperti Google Search Bar. Idealnya anda dapat menambahkan apa saja di bagian Section ke 3 dan ini akan kita bahas nanti.
SubSection 4 - Main
Bagian ini mengatur (size, layout dan tampilan) dari segala sesuatu di Main-Wrapper blok yang mengandung Tanggal, Posting, Komentar, Feed Link, dan widget yang anda tambahkan ke main menggunakan Add Page Element.
SubSection 5 - SideBar
Bagian ini mengatur properti dalam sidebar-wrapper misalnya dalam Labels, Blog Archives, Adsense Units, Link List dan lainnya. Tetapi tidak mengatur berapa banyak sidebar yang anda miliki atau lokasi mereka diblog (contoh Sidebar-Main-Sidebar atau Main-Sidebar-Sidebar). Bagian ini dilakukan dalam Bagian ke 3 dari Blogger Template Code Structure.
SubSection 6 - Miscellaneous
Bagian ini mengatur properti tambahan dalam blog anda yang tidak dikendalikan oleh semua subSection diatas. Elemen ini berisi Profile (blok About Me), Blogquote, dan kode. Ini berarti jika anda ingin mengubah text atau warna dalam nickname anda dalam block About Me, ini adalah bagiannya.
SubSection 7 - PostFooter
Dalam Template Generik saya bagian ini mengontrol properties dalam 3 hal :
- Post Footer teks yang berada dibawah body. Ini adalah bagian yang berisi informasi tentang posting anda seperti diposkan oleh NickName Anda, Labels ...., 5 komentar dan lain-lain.
- Blog Pager bagian yang berada dibawah posting anda yang mengatakan Next Post, HOME, Older Post.
- Feed Link bagian ini merupakan link yang berfungsi menampilkan Entri Langganan Artikel seperti POst (Atom) Feed.
SubSection 8 - Coment
Bagian ini mengatur properti yang ada pada komentar blog anda.
SubSection 9 - Footer
Bagian ini mengatur properties yang ada dibagian footer, umumnya berisi info kepemilikan atau hak cipta dari sebuah blog. Ada juga diblog lain yang menampilkan Recent Post ataupun Popular Post dalam 2 kolom atau lebih. Dasarnya anda dapat menempatkan apa saja dalam footer seperti dalam sidebar. Tetapi jika ingin membagi footer lebih dari 1 kolom anda harus mengubah Bagian kode ke 3 dari Blogger Template Code Structure.
No comments:
Post a Comment