Belajar buat Blog

Desain Template Blogger: Bagian dan Elemen Umum dalam Template Blogger

Berikut adalah daftar dari semua bagian dan elemen umum yang ada dalam template blogger beserta fungsi dari bagian dan elemen tersebut. Elemen pada dasarnya adalah setiap objek yang membuat fungsi di blog, sedangkan bagian/cointainers adalah suatu bagian yang besar yang berisi elemen-elemen yang lebih kecil.

Elemen-elemen yang dibahas disini nantinya belum tentu merupakan elemen yang harus ada disetiap template Blogger, tapi hanya beberapa elemen umum yang sering dipakai didalam template Blogger. Mengetahui unsur-unsur ini akan membuat Anda lebih mudah untuk mengetahui mana yang harus dicari dalam kode template dan bagaimana menangani elemen baru lainnya yang mungkin Anda temukan dalam template lainnya.

Saya akan merujuk ke gambar dari Bagian CSS di bawah ini agar lebih mudah untuk diikuti.

Simbol # dan . menunjukkan atribut dari elemen (semacam klasifikasi dari jenis elemen). Jika belum paham dengan simbol ini, diabaikan aja dulu tidak usah perlu dipikirkan secara serius. Tetapi jika ingin tahu lebih detail tentang simbol ini, pelajari di W3Schools.

Global:

body {.....} : mengatur sifat umum dari template, jika elemen yang dibawahnya tidak didefinisikan, maka properti yang ada dibagian ini yang berlaku.
#outer-wrapper {.....} : Bagian awal dan terbesar dari template. Didalam bagian ini berisi header-wrapper, content-wrapper, dan footer-wrapper.
#content-wrapper {.....} : suatu bagian yang berisi bagian sidebars dan main.
a {.....} : mengatur properti dari tulisan yang mempunyai link.
a:visited {.....} : mengatur properti dari tulisan yang mempunyai link setelah dikunjungi.
a:hover {.....} : mengatur properti dari tulisan yang mempunyai link disaat mouse melewati tulisan tersebut.

Karena semua kode harus ditulis didalam {.....} setelah judul elemen, maka untuk penjelasan berikutnya hanya ditulis judul elemennya saja.

Header:

#header-wrapper : Bagian yang membungkus judul dan deskripsi blog/website (Blog Title dan Blog Description).
#header : Bagian yang ada didalam header-wrapper.
#header h1 : Perintah yang ada didalam bagian ini mengatur tampilan dan tata letak judul blog (Blog Title).
#header h1 a : Mengatur properti link di judul blog.
#header .description : Mengatur properti dari deskripsi blog.
#header a img : Mengatur properti dari gambar yang ada didalam header.

Main:

#main-wrapper : bagian yang didalamnya terdiri atas Date Header, Blog Posts, Comments, Feed Link, dan setiap widget yang ditempatkan di atas atau bawah artikel (Blog Posts).
#main : bagian yang ada didalam main-wrapper.
#main .widget : mengatur properti dari semua widget yang ada didalam bagian main.
h2.date-header - mengatur properti dari Date Header (yang ada diatas Post Title).
.post - mengatur properti pada bagian Blog Posts.
.post h3 - mengatur properti dari judul artikel (Post Title).
.post-body p - mengatur properti dari body atau isi artikel (post).
.post ul - mengatur properti dari unordered list (daftar yang tidak bernomor).
.post ol - mengatur properti dari ordered list (daftar bernomor).
.post li - mengatur properti dari daftar individu didalam unordered list atau ordered list.
a img - mengatur properti secara umum dari sebuah gambar (memacu pada link; dan gambar pada link itu sendiri).

Sidebar:

sidebar-wrapper : bagian yang membungkus semua element dan isi yang ada didalam sidebar.
.sidebar : bagian yang ada didalam sidebar-wrapper.
#sidebar1 : mengatur properti didalam sidebar1.
#sidebar2 : mengatur properti didalam sidebar2. Jika ingin properti yang ada didalam sidebar1 dan sidebar2 sama, maka properti cukup diatur di .sidebar dan tidak perlu ditulis didalam #sidebar1 dan #sidebar2 lagi di kode CSS.
.sidebar .widget : mengatur properti semua widget (yang ditambahkan melalui Added Page Element) di sidebar.
#sidebar1 .widget : hanya mengatur widget di sidebar1.
.sidebar .BlogArchive : mengatur properti Blog Archive. Ini secara teknis merupakan widget disidebar juga, akan tetapi mengatur properti di sidebar widget tidak mengubah widget untuk Blog Archive. Oleh sebab itu properti di .BlogArchive pengaturannya ditulis sendiri.
.sidebar h2 : mengatur properti judul (title/header) pada sidebar widget.
.sidebar #BlogArchive1 h2 : mengatur properti judul pada Blog Archive.

Miscellaneous:

Pada dasarnya, bagian Profile (About Me) terletak didalam sidebar, tetapi dalam penjelasan ini diletakkan di bagian Miscellaneous.

#Profile1 : mengatur properti dari About Me.
#Profile1 h2 : mengatur judul (title/header) pada About Me.
.profile-img a img : mengatur gambar didalam About Me.
.profile-textblock : mengatur deskripsi penulis pada About Me.
.profile-data : mengatur data penulis pada About Me.
.profile-datablock : mengatur keseluruhan data dalam About Me.
blockquote : mengatur teks dalam tanda kutip (quoted text) pada artikel.
code : mengatur tulisan dalam tags code di artikel.

Post-Footer:

.post-footer : mengatur semua properti didalam post-footer.
.post-footer-line : mengatur properti setiap baris baru di post-footer.
.post-footer a : mengatur properti link text didalam post-footer.
.post-footer .post-comment-link a : mengatur link di "comment" dalam post-footer.
#blog-pager : mengatur properti link pada tulisan "newer posts", "home", dan "older posts".
#blog-pager-newer-link : mengatur properti pada link "newer posts".
#blog-pager-older-link : mengatur properti pada link "older posts" link.
.feed-links : mengatur properti pada link "Subscribe to: Posts (Atom)".

Comment:

#comments : mengatur semua properti pada bagian comment.
#comments a : mengatur properti link didalam bagian comment.
#comments h4 : mengatur header dibagian comment.
.deleted-comment : mengatur properti untuk deleted comment.
.comment-author : mengatur properti untuk comment author.
.comment-body p : mengatur properti comment body.
#comments ul : mengatur unordered list didalam bagian comment.
#comments li : mengatur daftar individu didalam comment.

Footer:

#footer-wrapper : bagian yang membungkus semua elemen dan isi didalam footer section.
#footer : bagian yang ada didalam footer-wrapper.
#footer h2 : mengatur properti dari judul (title/header) di footer.
#footer .widget : mengatur properti widget yang ada di footer.
.footer a : mengatur properti link di footer.

Dengan mengerti dan memahami bagian-bagian diatas, kita dapat dengan cepat menemukan kode dan mengubahnya untuk mengganti bagian-bagian dari template tertentu sesuai dengan selera, misalnya ingin mengganti huruf, warna tulisan, background, padding, dsb. Untuk mengubah bagian-bagian tersebut, yang dilakukan hanyalah memodifikasi kode yang ada didalam {.......} pada bagian yang ingin kita ubah saja.

___________________
Sumber: Our Blogger Templates

Desain Template Blogger: Membuat Template 3-Kolom atau Lebih

Salah satu keinginan yang paling besar ketika kita menjadi seorang blogger dan mengelola website atau blog/website kita sebelumnya telah menggunakan template yang standard (2 kolom), pasti kita mempunyai keinginan untuk menggunakan template 3 kolom didalam website kita. Dalam tutorial ini akan dijelaskan bagaimana membuat template 3 kolom secara sederhana dan tidak perlu untuk mahir dalam memprogram menggunakan bahasa HTML atau CSS.

Untuk memahami tutorial ini, diharapkan sebelumnya untuk mengerti Tutorial 8 dan Tutorial 9, yang mana telah menjelaskan dasar-dasar dari kode di bagian Body.

Untuk mengubah atau menambah sidebar, yang dilakukan hanyalah mengutak-atik kode XML di Blogger langsung dari halaman Edit HTML tanpa perlu mengaktifkan Expand Template Widget.

Menambahkan Sidebar Membuat Template 3 Kolom:

Kita akan pelajari kode-kode template, yang akan dituliskan dibawah. Kode disetiap template, mungkin akan tidak sama, tetapi variasi tidak akan begitu jauh.

Contoh Kode Template 2 Kolom:

<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 class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>


<div class='clear'> </div>

</div> 

Kode diatas merupakan kode template 2 kolom didalam wrapper/pembungkus yang namanya content-wrapper dimana didalamnya terdiri dari main-wrapper (yang berisi Blog Posts) dan sidebar-wrapper.

Untuk membuat sidebar baru, yang perlu dilakukan adalah masuk ke halaman Edit HTML tanpa mengaktifkan Expand Widget Templates, kemudian paste kode blok yang ada di sidebar-wrapper (kode yang tampil diatas dan berwarna merah) sebelum atau sesudah blok main-wrapper. Sebagai contoh, untuk membuat kolom Sidebar-Main-Sidebar/S-M-S (ada 2 kolom yang berada disamping kiri-kanan sebagai sidebar dan kolom main ada ditengah), maka letakkan kode sidebar-wrapper tersebut sebelum main-wrapper. Perhatikan pada contoh dibawah, bahwa id dari sidebar-wrapper adalah sidebar1 dan sidebar2.

Catatan: Ketika membuat sidebar kita harus memastikan bahwa lebar kedua kolom Sidebars dan Main akan cocok berada di content-wrapper dan kode CSS nya juga harus dipastikan bahwa sidebars akan terletak disamping kiri dan kanan. Beberapa kesalahan umum adalah letak Sidebars akan berada di bawah blok Main.

Contoh Kode Tamplate 3 Kolom S-M-S:

<div id='content-wrapper'>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>

<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 class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>


<div class='clear'> </div>

</div> 

Mengubah Lokasi Sidebar

Jika ingin mengubah lokasi sidebar dengan konfigurasi Main-Sidebar-Sidebar (M-S-S), yang perlu dilakukan adalah menempatkan kode sidebar-wrapper dimana ingin ditampilkan. Caranya, yaitu dengan masuk ke halaman Edit HTML tanpa perlu mengaktifkan Expand Template Widget dan cut kode 1 dari sidebar-wrapper dan letakkan diantara main-wrapper dan sidebar2. Dan hasilnya terlihat seperti kode dibawah.

Contoh Kode Template 3 Kolom M-S-S:

<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 class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>


<div class='clear'> </div>

</div> 

Sekarang kita sudah tahu, bagaimana caranya membuat dan mengubah lokasi dari sidebar. Cara yang sangat sederhana.

___________________
Sumber: Our Blogger Templates