tag:blogger.com,1999:blog-36105415497365360292011-07-07T23:26:48.863-07:00EraEnglishhttp://www.blogger.com/profile/16438191714907698162noreply@blogger.comBlogger11100tag:blogger.com,1999:blog-3610541549736536029.post-73326491755605888782009-12-02T07:02:00.000-08:002009-12-05T18:29:45.470-08:00<div style="text-align: justify;">Pada Dasarnya struktur dasar sebuah template dapat di gambarkan sebagai berikut:<br /></div><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/_MhlfFYbGt4M/SxaA83wFYZI/AAAAAAAAANc/p-Xl0UIcGKA/s1600-h/New+Picture.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_MhlfFYbGt4M/SxaA83wFYZI/AAAAAAAAANc/p-Xl0UIcGKA/s320/New+Picture.jpg" /></a><br /></div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Kita pelajari dulu dari blok yang paling besar sampai blok terkecil:<br /><span style="font-weight: bold;">1. Body</span>: block paling lebar yang merupakan badan dari template (pada dasarnya semua yang terlihat di layer komputer).<br /><span style="font-weight: bold;">2. Outer-wrapper</span>: 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<br /><span style="font-weight: bold;">3. Header</span>: 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.<br /><span style="font-weight: bold;">4. Content</span>: 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.<br /><span style="font-weight: bold;">5. Footer</span>: adalah kotak paling bawah dari template. Seperti bagian header, kita juga memerlukan Footer wrapper untuk memuat sub-block yang lain di bagian footer.<br /><span style="font-weight: bold;">6. Main</span>: 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.<br /><span style="font-weight: bold;">7. Sidebar</span>: 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.<br /><span style="font-weight: bold;">8. Blog Post</span>: block ini memuat isi terpenting- Judul posting, post, Post author, label, dll.<br />Satu cara lain untuk melihat struktur ini adalah dengan melihat bagian <span style="font-weight: bold;">hierarkis</span>. Dimulai dengan kotak terbesar kemudian kotak-kotak di dalamnya, strukturnya terlihat seperti bagian di bawah ini : <br /><span style="font-size: 24px; font-weight: bold;"></span><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 0in;"><span style="font-size: 24px; font-weight: bold;">Body</span><br /></div><div style="text-align: justify;"><span style="font-size: 24px; font-weight: bold;"></span><br /><span style="font-size: 20px; font-weight: bold;"></span><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 0.5in;"><span style="font-size: 20px; font-weight: bold;">Outer-wrapper</span><br /></div><div style="text-align: justify;"><span style="font-size: 20px; font-weight: bold;"></span><br /><span style="font-weight: bold;"></span><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 1in;"><span style="font-weight: bold;">Header-wrapper</span><br /></div><div style="text-align: justify;"><span style="font-weight: bold;"></span><br /><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 1.5in;">Blog Title<br /></div><div style="text-align: justify;"><br /><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 1.5in;">Blog Description<br /></div><div style="text-align: justify;"><br /><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 1.5in;">Other widgets<br /></div><div style="text-align: justify;"><br /><span style="font-weight: bold;"></span><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 1in;"><span style="font-weight: bold;">Content-wrapper</span><br /></div><div style="text-align: justify;"><span style="font-weight: bold;"></span><br /><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 1.5in;">Sidebar-wrapper (1,2,3...)<br /></div><div style="text-align: justify;"><br /><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 1.5in;">Main-wrapper<br /></div><div style="text-align: justify;"><br /><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 2in;">Date Header<br /></div><div style="text-align: justify;"><br /><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 2in;">Posts<br /></div><div style="text-align: justify;"><br /><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 2.5in;">Post Title<br /></div><div style="text-align: justify;"><br /><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 2.5in;">Post Content (or called Post Body)<br /></div><div style="text-align: justify;"><br /><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 2.5in;">Post Footer (Author, Labels, etc)<br /></div><div style="text-align: justify;"><br /><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 2in;">Comments<br /></div><div style="text-align: justify;"><br /><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 2in;">Feed Link<br /></div><div style="text-align: justify;"><br /><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 2in;">Other widgets (mostly ad units)<br /></div><div style="text-align: justify;"><br /><span style="font-weight: bold;"></span><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 1in;"><span style="font-weight: bold;">Footer-wrapper</span><br /></div><div style="text-align: justify;"><span style="font-weight: bold;"></span><br /><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 1.5in;">Footer text (disclaimer, copyrights, etc)<br /></div><div style="text-align: justify;"><br /><br /></div><div class="MsoNormal" style="text-align: justify; text-indent: 1.5in;">Other widgets<br /></div><div style="text-align: justify;"><br /><br />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. <br /></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3610541549736536029-7332649175560588878?l=edit-mytemplate.blogspot.com' alt='' /></div>EraEnglishhttp://www.blogger.com/profile/16438191714907698162noreply@blogger.com0