Tutorial Template Blogger (1)

Dalam pembuatan Template / Skin / Theme, ada 2 faktor yang mendukungnya, yaitu:

1. Pengetahuan dasar tentang bahasa HTML
2. Kemampuan dalam mengolah image dengan menggunakan software image editor, seperti Adobe Photoshop.

Untuk tutorial yang pertama ini, hal yang dibahas adalah dasar-dasar penataan template blogger melalui HTML.

Secara umum, sebuah page HTML terdiri dari <HEAD> dan <BODY>.

<HEAD> berisi tag:
<title> yang merupakan judul dari page. Title bisa dibuat penambahan tulisan dengan catatan tidak mengubah kode <$BlogPageTitle$>
<style> yang merupakan tempat kita dalam menata disain dan style blogger.

<BODY>.merupakan isi dari page keseluruhan.

Untuk blogger, isinya diawali dengan tag <blogger>. Tag ini secara garis besar terdiri dari:

1. Tanggal
<BlogDateHeader><h2><$BlogDateHeaderDate$></h2></BlogDateHeader>
Kalau ingin membuat perubahan, bisa dilakukan diantara tag <h2>.
Misalnya: <h2>Tanggal dibuat<$BlogDateHeaderDate$></h2>
Atau ingin menambahkan image: <h2><img src="http://i79.photobucket.com/albums/j152/riniaisyah/aza-aza-fighting-arrow.gif" /><$BlogDateHeaderDate$></h2>

2. Judul Postingan
<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link" class="title-link"></BlogItemUrl>
<h3><$BlogItemTitle$></h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>
Sama seperti pada Tanggal, untuk Judul dapat juga dibuat perubahan seperti penambahan tulisan atau gambar. Perubahan dapat dilakukan diantara tag <h3>.

3. Isi Postingan
<div><p><$BlogItemBody$></p></div>
Perubahan seperti Tanggal dan Judul dapat dilakukan dengan penambahan diantara tag <p>. Selain itu, bisa juga ditambahkan image untuk background.

Caranya dengan menambahkan tag style pada tag <p>:
<p style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg);">

Penulisan style background seperti di atas akan memberi perintah image yang berulang-ulang (repeat). Penambahan no-repeat akan menghentikan perulangan image:
<p style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg) no-repeat;">
Perulangan image dapat dibuat secara horizontal dengan mengubah no-repeat menjadi repeat-x ataupun vertikal dengan menggunakan repeat-y.

Selain itu, posisi image juga dapat diatur dengan menambahkan align posisinya, misal bottom, top, middle, center, left, right atau fixed:
<p style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg) no-repeat bottom right;">

4. Footer Postingan
Bagian ini berisi informasi tentang author, penulis postingan (posted by), tanggal postingan dan jumlah komentar.
<p><em>posted by <$BlogItemAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#comments"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</MainOrArchivePage><$BlogItemControl$></p>
Kalimat 'posted by' bisa diubah, disesuaikan dengan bahasa Indonesia, misal: 'ditulis oleh', 'dikirim', dll.
Kata 'comments' juga bisa diubah, misalnya menjadi 'komentar'.

5. Komentar
<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<h4><$BlogItemCommentCount$> Comments:</h4>
<dl>
<BlogItemComments>
<dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
At <$BlogCommentDateTime$>, <$BlogCommentAuthor$> said...
</dt>
<dd>
<p>"<$BlogCommentBody$>"</p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p><$BlogItemCreate$></p>
<p><a href="<$BlogURL$>"><< Home</a></p>
</BlogItemCommentsEnabled>
</div>
</ItemPage>
Merupakan bagain dari komentar yang tidak terlihat di halaman depan.

Judul berada di <h4><$BlogItemCommentCount$> Comments:</h4>
Sama seperti sebelumnya, bisa diubah, ditambahkan image. Kata 'Comments' boleh diubah, misalnya menjadi 'komentar'.

At <$BlogCommentDateTime$>, <$BlogCommentAuthor$> said...
Dapat diberi variasi, misal tambahkan image, ubah kalimat, misalnya menjadi:
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/aza-aza-fighting-arrow.gif" />Jam <$BlogCommentDateTime$>, <$BlogCommentAuthor$> nulis...

Variasi lainnya, bisa dengan menambahkan garis horizontal yang letaknya diantara footer postingan dan komentar. Menjadi:
<ItemPage>
<hr noshade="noshade" color="#4487CD" size="1" width="500px" align="center">
...
Selain garis, juga bisa ditambahkan image. Garis atau image ini tidak akan terlihat di halaman depan, hanya terlihat di page yang terdapat komentar.

Untuk penambahan image di setiap postingan, tag <img> diletakkan setelah tag <blogger> bila ingin image berada di atas.
Bila image ingin di bawah, tag <img> diletakkan di atas tag komentar, <ItemPage>.

Sedangkan untuk bagian SideBar, umunya terdiri dari:

1. Recent Posts
<ul>
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>

2. Archieves
<MainOrArchivePage>
<ul>
<BloggerArchives><li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li></BloggerArchives>
<ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
</ul>
</MainOrArchivePage>

3. dll

<Tutorial Selanjutnya Membuat Blog Sederhana. InsyaAllah>

Artikel tambahan:
- tentang tag HTML
- tentang kode karakter (simbol)


Lihat tutorial lainnya di Azzahrah Design


5 komentar:

jacka said...

Lewat google sy ktmu blog ini. Templatenya bagus2! Sy ingin belajar merubah template Blogger. Jazakillah tutorialnya..

Sinopi said...

akhirnya ada juga yg bahas ttg ini..

ini ilmu yg saya cari, karna pusing lihat kode html..

btw gimana cara bikin recent comment?

Unknown said...

jazakillahukhairon infonya, tolong bantu yah, aku ingin membuat kotak komentar karena dari template aslinya gak ada kotak komentar seperti ini loh contohnya http://mediaseluller.blogspot.com gimana tuh bikin kotak komentarnya

kaka said...

bagus nih kk.
saya baru belajar
hehe ga bisa-bisa
belum saatnya kali ya?

win said...

@Abu Hany -> Kalau mau mudah pake comment tempelin aja dari http://www.shoutmix.com/

seperti blog sederhana saya
http://bonnysmart.blogspot.com

@kaka -> kalau pingin belajar harus mencoba, dari template sederhana aja.

-- -- --

Copyright © 2008 - Free Islamic Blogger Templates - powered by Blogger