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

STRUKTUR BLOGGER TEMPLATE CODE

BELAJAR MEMBUAT BLOGGER TEMPLATE 2

Inilah penampakan struktur blogger template, inilah cara paling sederhana untuk melihatnya (sebenernya ribet sih. Hehehe). Banyak template yang struktur kodenya seperti ini. Gambar di bawah ini menunjukkan cara membagi bagian kode menjadi tiga bagian dan memperlihatkan baris atas saja dari setiap bagian sehingga kita bisa melihat dari baris pertama dan selanjutnya.



Bagian 1: Header dari kode. Pada dasarnya bagian ini mengandung informasi penting tentang template kode dan judul dari blog. Tapi, yang terpenting, kita tidak perlu kawatir tentang apapun di bagian ini. Sudah ada header standard untuk semua template. Kita cuma perlu menambahkan beberapa kode saat menyisipkan meta tag (informasi tambahan untuk SEO).

Bagian 2: Ini adalah CSS Styling Section. CSS singkatan dari Cascading Style Sheets, bahasa pemrograman web yang digunakan untuk mengatur style (desain) dari HTML dokumen. Inilah bagian yang harus paling dipahami untuk memodifikasi template kita sekarang atau membuat template baru. Meskipun ini merupakan kode pemrograman web, kita masih bisa melakukan banyak hal pada template kita jika mengerti struktur dari bagian ini tanpa perlu banyak tahu tentang HTML dan CSS. Kita akan membahas bagian ini nanti di tutorial berikutnya.

Bagian 3 : Ini adalah Body (badan) atau data dari kode- bagian paling penting yang mengambil semua content dari blogger database dan meletakkannya di bagian yang benar ke dalam blog ketika seseorang melihat blog kita.Ini juga bagian yang memberitahu blog bagian mana yang muncul duluan- header, sidebar, Main, Post, Footer, dll. Tapi bagian ini tidak mengatur tampilan blog dan bagaimana kelihatannya di internet(karena bagian CSS-lah yang punya peran di sini).

Kita tidak perlu kawatir terlalu banyak tentang bagian ini juga, hanya seperti tahap permulaan. Tapi kita harus tahu sedikit tentang bagian ini jika ingin menambahkan extra widget yang tidak bisa dilakukan dengan menggunakan tombol add page element, seperti tombol social bookmarking-Digg, AddThis, RSS button, atau jika ingin meletakkan adsense kode di tempat special seperti pada bagian post, atau meletakkan google Analitics code untuk menarik visitor ke blog kita, dan lebih banyak lagi. Saat ini sudah banyak instruksi mudah untuk membantu kita menyisipkan semua di atas. Jadi tidak usah terlalu kawatir dengan bagian ini.

Source : ourbloggertemplate

STRUKTUR BLOGGER TEMPLATE

O'chan nemu tutorial cara membuat template di suatu blog. sayangnya blog itu berbahasa inggris, jadi ochan coba translate ke bahasa indonesia agar gampang dipelajari.

BELAJAR MEMBUAT BLOGGER TEMPLATE 1

Sebelum mendesign template, kita harus punya ide bagaimana struktur dasar dari template tersebut. Pada umumnya, struktur dari beberapa template tidak persis sama. Tapi, dengan mengenal struktur dasar, kita dapat dengan mudah mendapatkan ide bagaimana mengembangkan template kita yang sekarang, mendesain template, dan bagaimana mengubahnya sehingga memiliki struktur yang berbeda.

beberapa bagian struktur template jelas terlihat dari kebanyakan blog yang kita lihat. Contohnya : header, footer, dan bagian posting. Tapi ada beberapa bagian lain yang (bs disebut block atau containers berikutnya) yang tidak terlihat di layar monitor tapi bagian penting HTML untuk membangun template agar praktis dan benar kerjanya.

Untuk memulai kita lihat dulu struktur dasar template di bawah ini, kebanyakan template memiliki struktur seperti ini :


Kita pelajari dulu dari blok yang paling besar sampai blok terkecil:
1. Body: block paling lebar yang merupakan badan dari template (pada dasarnya semua yang terlihat di layer komputer).
2. Outer-wrapper: kotak ini melapisi bagian template (Body lebih mirip bagian luar template). Pada umumnya, kita membangun sebuah wrapper untuk menempatkan beberapa kotak lebih kecil di dalamnya. Kotak-kotak yang paling umum di dalam outer-wrapper adalah : header, content, dan footer
3. Header: Kotak ini adalah bagian teratas dari blog (namanya sudah memperlihatkan dengan jelas. Tapi di dalam header kita punya sub-block lain-Header title block, Header description block, dan lainnya contohnya adsense banner, menu bar, dll. Jadi, untuk menggabungkan semua sub-block ini dalam satu kotak besar, kotak paling besar di bagian header biasanya Header-wrapper yang menggabungkan semua di dalamnya.
4. Content: Di bawah header adalah content wrapper- pada dasarnya ini bagian terpenting dari semua block. Di dalam wrapper ini ada kotak-kotak sidebar (1,2 atau lebih) dan kotak utama ( main block) yang memuat Post, comment, dan beberapa iklan.
5. Footer: adalah kotak paling bawah dari template. Seperti bagian header, kita juga memerlukan Footer wrapper untuk memuat sub-block yang lain di bagian footer.
6. Main: Main-wrapper adalah kotak paling lebar dalam content wrapper. Di dalam main-wrapper terdapat Post block, comment block, date header, dan widget lain yang dibuat dari add page element option.
7. Sidebar: adalah block yang memuat semua side widget- About me, label, archieve, text, Html and Javascript, adsense, dll. Dalam blogger template standard, kita sering menemukan satu sidebar saja, oleh karena itu disebut 2-column template (Main dan sidebar). Tapi sebenarnya mudah menambahkan banyak kolom sidebar. Yang paling banyak setelah satu sidebar adalah 2 sidebar atau 3-column template. Kita akan belajar itu nanti. Setelah mempelajari rangkaian tutorial ini, pertama kita pahami dulu struktur template, nanti akan terasa mudah menambahkan maupun memindahkan sidebar ke bagian kiri atau kanan main block.
8. Blog Post: block ini memuat isi terpenting- Judul posting, post, Post author, label, dll.
Satu cara lain untuk melihat struktur ini adalah dengan melihat bagian hierarkis. Dimulai dengan kotak terbesar kemudian kotak-kotak di dalamnya, strukturnya terlihat seperti bagian di bawah ini :

Body

Outer-wrapper

Header-wrapper

Blog Title

Blog Description

Other widgets

Content-wrapper

Sidebar-wrapper (1,2,3...)

Main-wrapper

Date Header

Posts

Post Title

Post Content (or called Post Body)

Post Footer (Author, Labels, etc)

Comments

Feed Link

Other widgets (mostly ad units)

Footer-wrapper

Footer text (disclaimer, copyrights, etc)

Other widgets

Pertama-tama kita pahami dulu struktur dasar ini, akan lebih mudah untuk mulai belajar tentang structure kode blogger template. Belajar struktur kode tidak hanya belajar HTML or CSS, tapi lebih banyak tentang bagaimana mengorganisasi template code, yang sangat seperti bagaimana mengorganisasi kotak-kotak ini. Sangat mengejutkan jika ternyata meskipun dengan pengetahuan kecil dalam pemrograman, kita bisa menyesuaikan menyesuaikan template dengan baik dengan memahami struktur dasar dan beberapa bahasa CSS.

Tutorial berikutnya ditunggu ya...

source :www.ourblogtemplates.com