Dalam tutorial ini kita akan membahas struktur dasar dari kode pada bagian Body sehingga kita mendapatkan ide bagaimana itu bekerja dengan kode kita yang lain. Kode ini terletak dalam Section 3 dari Blogger Template Code Structure. Ini adalah bagian utama dari kode Blogger template yang menerima data untuk ditampilkan ke dalam blog. Itu pada dasarnya bagian inti yang membuat seluruh fungsi blog berfungsi dengan baik.Kode yang mengatur bagaimana itu muncul di dalam blog adalah CSS Styling code.
Merefer kembali pada tutorial Blogger Template Code Structure, Body code terletak dalam Section 3 seperti diperlihatkan dalam gambar di bawah ini
Di bawah ini ditampilkan Body code yang dicopy dari Blogger Edit HTML tanpa mencentang 'Expand Widget Button'. Sebaiknya kita tidak memasukkan dulu kode komplitnya, ada 2 alasan. Pertama, belum perlu melakukan hal ini. Sebenarnya kita tidak perlu tahu apa yang terjadi di dalam kode lengkapnya untuk mendesain blogger template yang berfungsi dengan baik. Semua itu akan dilakukan secara otomatis oleh blogger, yang merupakan kelebihan new Blogger template dibandingkan dengan yang klasik. Yang kedua, dengan melihat kode yang lebih sederhana, kita akan meletakkan lebih mudah ide bagaimana semua container dalam template berposisi.
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Testpage Two (Header)' type='Header'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='Blogger Template | Bordr' type='Text'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
Untuk lebih simple, abaikan kode yang berwarna abu-abu. Semua itu adalah komentar atau kode statis yang membuat semua bekerja dengan baik yang tidak perlu dirubah. Bagian inti dari kode bisa dipisahkan menjadi empat bagian.
1. Header (merah)
2. Main (hijau)
3. Sidebar (biru)
4. Footer (cokelat)
Kita akan lihat di atas adalah semua kode yang dibungkus dalam tag body, diikuti oleh tag outer-wrapper, kemudian tag wrap2. wrapper-wrapper ini digunakan untuk mengelompokkan container bersama sehingga semuanya bisa diedit bersama. Menggunakan wrapper juga membuat tempat untuk container jauh lebih mudah khususnya jika kita akan membuat sidebar tambahan atau container extra. (seperti linkbar container). Dalam penjelasan di bawah ini, aku hanya mengacu pada outer-wrapper sebagai wrapper yang lebih besar tanpa mengacu pada semua wrap2 wrapper. Semuanya sama (aku sampai sekarang belum benar2 mengerti kenapa wrap2 ada di tempat pertama).
Di dalam kontainer besar ini, kita akan melihat 3 wrapper - header-wrapper, content-wrapper, dan footer-wrapper. Mereka diposisikan secara vertikal dengan header-wrapper ditempatkan paling atas, footer-wrapper paling bawah. Sangat mudah karena header-wrapper disebutkan paling pertama , diikuti content-wrapper, dan terakhir footer-wrapper. Dalam point ini, kita tidak harus tahu apa yang ada di dalam content-wrapper. Itu membuat jauh lebih bersih dan lebih mudah untuk menghindari kekacauan content-wrapper dan bekerjasama dengan main-wrapper dan sidebar-wrapper bersamaan sekaligus. Itu bisa menjadi kekacauan besar.
karena outer-wrapper adalah wrapper terbesar, kita harus yakin bahwa lebar semua wrapper lainnya di dalamnya kurang atau sama dengan lebar outer-wrapper. Tapi, jika kita menambahkan border, itu akan menambah extra pixels untuk semua wrapper yang juga kita tambahkan border. Jadi hati-hati menambahkan border.
menambahkan wrapper baru (container) di dalamnya di antara wrapper ini mudah. Hanya paste dalam wrapper code (lihat di bawah ini sebagai contoh) dan rename dengan nama baru, sebut saja banner-wrapper. Kode preferred='yes' akan membuat tombol 'Add Page Element' yang membolehkan kita membuat widget baru.
<div id='banner-wrapper'>
<b:section class='banner' id='banner' preferred='yes'>
</b:section>
</div>
Menambahkan wrapper hanya membuat container baru, atau kotak di dalam blog. Itu tidak mengatur bagaimana itu terlihat atau dimana akan diletakkan. Untuk customize bagaimana itu terlihat dan diletakkan di dalam blog, kita BUTUH mengedit kode CSS.
Di dalam content-wrapper, kita punya main-wrapper dan sidebar-wrapper. Untuk meletakkan dua wrapper ini side-by-side seperti kebanyakan blog, kita harus mengatur lebar 2 wrapper ini yang jumlahnya kurang atau sama seperti content-wrapper. Ditambah lagi, kita harus menambahkan beberapa perintah di dalam CSS Styling code sehingga mereka dapat ditempatkan berdampingan. Di lain pihak, mereka hanya akan bertumpuk secara vertical di atas yang lainnya. Biasanya, kita perlu menggunakan perintah 'float:left' untuk ini. Lihat beberapa contoh template untuk mengecek lebih banyak tentang ini. Jika kamu ingin menambah sidebar lagi, katakana saja 3-column template, kita dengan mudah menambahkan sidebar-wrapper code (warna biru). Nanti lihat pada Tutorial 10 untuk mengetahui bagaimana menambah atau mengurangi atau menempatkan sidebar..
Setelah kita memahami ide dasar di belakang kode body, mudah untuk melihat mengapa struktur umum Blogger template kode terlihat seperti ini (lihat di bawah ini untuk contoh 3-kolom template). Jika kita ingin menambahkan ulang atau kontainer atau wrapper, apa yang harus kita lakukan adalah untuk mengubah body dari kode. Semudah itu! Tetapi kemudian, kita harus tweak dengan kode CSS untuk mengatur bagaimana itu terlihat dalam blog.
translate dari ourbloggertemplate.com
Mantab infonya. Ini sudah saya cari-2 sejak lama. Tank,s! Salam kenal
ReplyDeletekog salam kenal??? yang punya blog ini sama dengan yang punya cerpen kita lho!!! kita dah kenal. hehehehe...
ReplyDeletemantap nih ifo,salam kenal dari saya,
ReplyDeleteMakasih Infonya gan.....
ReplyDeleteTanya dong....
ReplyDeleteKlo membuat body post yg fleksibel gimana yah? Maksudnya yg menyesuaukan dengan besarnya post. Misal kita posting gambar dengan ukuran besar, otomatis postingan gambar kita akan melewati baras side bar kanan atau kiri. Nah, bagaimana supaya post body lebarnya bisa menyesuaikan sendiri, klo postingan gambar besar dia bisa ngikut, gmana yah caranya?? Mohon bantuannya ...