 [klik pada gambar untuk memperbesar] |
| ||||||||
Sekarang kita akan membuat sebuah template sederhana. Template ini tidak menggunakan style CSS.
Agar tidak mengganggu blog yang sedang dipakai dan untuk memudahkan proses belajar membuat template sederhana, buatlah blog khusus untuk ini.
Hapus semua isi template yang ada. Copy HTML pokok di bawah ini dan paste ke dalam template yang sudah kosong:
--------------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title></title></head>
<body></body>
</html>
-------------------------------------------------------
Ide disain aku kali ini adalah sebuah blog yang isinya berada di tengah dan memiliki border di tepinya. Gambar utama yang menunjang adalah gambar untuk header dan sebuah gambar untuk background. Ditambah beberapa gambar tambahan lainnya.
1. Pengaturan <head>
- Tambahkan kode blogger untuk title page:
<title><$BlogPageTitle$></title> - Tambahkan kode <$BlogMetaData$> sebelum
</head>.
Hasil sementara menjadi:
------------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
</head>
<body></body>
</html>
--------------------------------------------------------
2. Pengaturan <body>
- Set background template
Dapat menggunakan warna, image atau keduanya. Pada tutorial sebelumnya sudah diungkapkan bagaimana penggunaan background.
Untuk tutorial kali ini, aku menggunakan background warna biru muda dengan kode #ADD2FF dan sebuah image yang sudah diupload di http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg.
Background image ini dibuat berulang-ulang ke bawah (repeat-y) dan diletakkan di bagian tengah dari monitor (center).
<body style="background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center;">
- Set warna font text, jenis font, dan ukuran
Untuk tutorial ini, aku menggunakan verdana dengan ukuran 12px dan warna biru tua #01244F.
Pengaturan font juga diletakkan di dalam tag <style> yang ada di dalam tag <body>.
Hasil penambahan menjadi:
<body style="background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;">
- Tentukan warna untuk link dan visited link
Visited link maksudnya adalah link yang sudah pernah di-klik, sudah pernah dilihat. Untuk kali ini, aku menggunakan link yang berwarna hitam: link="#000000" vlink="#000000".
Hasil penambahannya:
<body style="background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000">
- Seting margin
Margin mengatur posisi isi keseluruhan template dari bagian atas, kiri, kanan, dan bawah. Sama seperti saat menulis di word.
Kali ini aku memakai keseluruhan monitor, ini berarti margin keseluruhannya adalah 0 atau leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0".
Ditambahkan di tag <body>
Hasil akhir untuk tag <body> menjadi:
<body style="margin-top:33px; background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
- Hasil sementara keseluruhan template:
-------------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
</head>
<body style="margin-top:33px; background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
</body>
</html>
-------------------------------------------------------
3. Tahap selanjutnya adalah membuat bentukkan layout, pembagian template.
Kali ini, template yang ingin aku buat terdiri dari 4 bagian, yaitu header, sidebar, main, dan footer. Karena itu kita menggunakan 4 tag <div>. Ditambah 2 tag <div> induk. Yaitu 1 <div> untuk mengatur agar posisi isi blog berada di tengah dan 1 <div> menjadi content. Kesemuanyanya menjadi 6 tag <div>. Tag <div> ini diletakkan di antara tag <body> dan </body>.
- <div> utama
Yang mengatur posisi isi blog. Kita akan membuat isi blog berada di tengah monitor, sehingga align diposisikan center atau kodenya:
<div align="center"></div>
- <div> content
Penulisannya: <div id="content"></div>
Tag <div id="content"> ini akan kita atur posisinya, ukuran, background, dan bordernya. Sebelumnya kita telah membuat posisi isi blog rata tengah. Kita akan mengembalikan posisi blog rata kiri sesuai dengan arah text dari kiri ke kanan dan kodenya:
<div id="content" align="left"></div>
Kode sementara untuk bagian <body> adalah:
-------------------------------------------------------
<body style="margin-top:33px; background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<div id="content" align="left"> </div>
</div>
</body>
-------------------------------------------------------
Selanjutnya adalah tahapan memberi 'sentuhan' style untuk content. Sentuhannya berupa ukuran atau kreasi-kreasi lainnya. Ide awalnya adalah sebuah blog yang berada di tengah. Untuk itu, ukuran lebar yang sesuai adalah sebesar 750px (width:750px). Selanjutnya adalah border. Dengan melihat image yang dipakai, telah ada border di tepinya, namun tidak ada di tepi atasnya. Berarti kita menambahkan border tepi atas (border-top) dengan warna kuning (#FFE53C) dan bentuk border solid.
Kodenya:
<div id="content" align="left" style="width:750px; border-top:5px solid #FFE53C;">
4. Header
Header ( <div id="header"></div> ) ini diletakkan di dalam tag content, yaitu:
<div id="content" align="left" style="width:750px; border-top:5px solid #FFE53C;">
<div id="header">
</div>
</div>
Di dalam header ini kita akan meletakkan image. Ambil image yang ingin dijadikan header. Sedikit tips dariku. Sebelum membuat template coba cari warna yang kira-kira senada dengan header dan ukurannya juga sesuai dengan lebar content (750px). Kalau image memilki kb yang tinggi (lebih dari 60kb) lebih baik, image dibagi atas dua bagian atau lebih agar proses loading gambar lebih cepat.
Template kali ini, aku juga membagi image atas 3 bagian:
http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header1.jpg
http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header2.jpg
http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header3.jpg
Kode untuk menampilkan image:
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header1.jpg"/>
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header2.jpg"/>
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header3.jpg"/>
Note. jangan ada jarak diantara image seperti spasi, dll.
Agar image tepat berada di posisi atas, maka margin haru diatur, dibuat di angka 0 (style="margin:0;")
Hasil sementara untuk content:
-------------------------------------------------------
<div id="content" align="left" style="width:750px; border-top:5px solid #FFE53C;">
<div id="header" style="margin:0;">
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header1.jpg"/>
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header2.jpg"/>
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header3.jpg"/>
</div>
</div>
--------------------------------------------------------
*Coba lihat dulu hasilnya, biar lebih semangat .....
Eh, kayak skin siapa ya ....:D
5. Sidebar
Sidebar ( <div id="sidebar"> </div> ) ini diletakkan masih di dalam content dan setelah header:
<div id="content" align="left" style="width:750px; border-top:5px solid #FFE53C;">
<div id="header">
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header1.jpg"/>
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header2.jpg"/>
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header3.jpg"/>
</div>
<div id="sidebar">
</div>
</div>
- Mendisain sidebar
Tahap selanjutnya adalah mendisain bagian sidebar, seperti memberi ukuran lebar, background, dan lainnya. Untuk disainku kali ini, background yang diletakkan pada <body> sudah termasuk background untuk sidebar.
Hal yang penting adalah membuat letak sidebar agar berada di kiri, yaitu dengan menentukkan float (float:left;)
Lebar sidebar harus ditentukan. Aku membuat sidebar berukuran 230px (width:230px;)
Sama seperti pada content, sidebar aku disain juga mempunyai border pada tepi atasnya (border-top:5px solid #FFE53C;)
Tentukan ukuran dan text font. Aku menginginkan ukuran text pada sidebar lebih kecil (font-size:11px;)
Kode style untuk sidebar:
<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">
</div>
- Mengisi sidebar
Kita sudah sampai pada tahap mengisi sidebar. Sidebar ini umumnya berisi daftar postingan sebelumnya, arsip postingan, dan profil pemilik blog.
Sebelum mengisi, kita tentukan dulu style untuk tiap judul bagian isi sidebar. Aku menggunakan background image untuk judul (background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0;).
Untuk font juga ada perubahan, yaitu (: font-weight:bold; font-size:14px; color:#A93101; ). Penambahan style lainnya adalah dengan mengatur ukuran kotak untuk judul serta posisi text digeser ke kanan agar tidak menimpa image background. Pengaturannya dilakukan dengan menambah padding:
padding-left:20px; padding-top:5px; padding-bottom:5px;
Mari kita langsung gunakan. Bila telah dilihat hasilnya, bisa kita adakan perubahan kecil untuk membuatnya lebih menarik.
Yang pertama, kita memunculkan bagian Recent Posts.
Kode dasar untuk Recent Posts adalah:
<ul>
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>
Kita tambahkan judul di atasnya, "...Hari Kemarin" dengan menggunakan tag <h2> yang telah kita rancang sebelumnya, menjadi:
<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Hari Kemarin</h2>
<ul>
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>
</div>
Lihat dulu deh hasilnya. Listnya masih menggunakan bulatan kecil :D. Mau diganti? Bisa aja, asal dah ada image yang cucok tuk itu. Aku menggunakan image ini,
http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif.
Pertama yang kita atur adalah bagian tag <ul>. Non aktifkan dulu style list (list-style:none;) Text terlalu ke kanan, sehingga kita atur margin-leftnya lebih ke kiri (margin-left:0;). Jarak antara list agar tidak terlalu rapat, kita atur ketinggiannya (line-height:1.5em;).
Tag <ul> menjadi:
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
Lanjut untuk mendisain bagian tag <li>. Di tag inilah image background untuk list diletakkan. Posisi tepat dari image juga harus diatur (background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif)
no-repeat 0 .45em;) Posisi text digeser ke kanan agar tidak menimpa gambar background dengan menggunakan padding-left (padding-left:16px;).
Hasil dari tag <li>:
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif)
no-repeat 0 .45em; padding-left:16px;">
Hasil kode untuk menampilkan Recent Posts:
--------------------------------------------------------
<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Hari Kemarin</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerPreviousItems>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a>
</li>
</BloggerPreviousItems>
</ul>
</div>
-------------------------------------------------------
Archieves
Kode dasar untuk archieves adalah:
<MainOrArchivePage>
<ul>
<BloggerArchives><li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li></BloggerArchives>
<ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
</ul>
</MainOrArchivePage>
Kemudian diberi penambahan title "...Kumpulan Arsip" gambar untuk tiap list-nya. Sama seperti kode pada Recent Posts, yang diubah pada tag <h2> <ul> dan <li>.
Kode keseluruhan untuk Archieves menjadi:
--------------------------------------------------------
<h2 style="background:#D6E9FD url(white-love/images/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Kumpulan Arsip</h2>
<MainOrArchivePage>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerArchives>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</li>
</BloggerArchives>
<ArchivePage>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogURL$>">Current Posts</a>
</li>
</ArchivePage>
</ul>
</MainOrArchivePage>
-------------------------------------------------------
Selanjutnya, bisa kita tambahkan kode untuk profil dengan kode:
<$BlogMemberProfile$>
Begitu juga dengan aksesoris-aksesoris lainnya yang ingin diletakkan di bagian sidebar ini, seperti daftar list blog teman:
<h2 style="background:#D6E9FD url(white-love/images/white-love-title.jpg) no-repeat 0 0 font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Blog Teman</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://riniaisyah.blogspot.com/" target="_blank">rini medan</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://blogger-skin-resources.blogspot.com/" target="_blank">free skin </a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;"> <a href="http://moeslimah.blogspot.com/" target="_blank">muslimah</a>
</li>
</ul>
Kode akhir untuk sidebar kita adalah:
---------------------------------------------------------
<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Hari Kemarin</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerPreviousItems>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a>
</li>
</BloggerPreviousItems>
</ul>
<h2 style="background:#D6E9FD url(white-love/images/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Kumpulan Arsip</h2>
<MainOrArchivePage>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerArchives>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</li>
</BloggerArchives>
<ArchivePage>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif)
no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogURL$>">Current Posts</a>
</li>
</ArchivePage>
</ul>
</MainOrArchivePage>
<$BlogMemberProfile$>
<h2 style="background:#D6E9FD url(white-love/images/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Blog Teman</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://riniaisyah.blogspot.com/" target="_blank">rini medan</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://blogger-skin-resources.blogspot.com/" target="_blank">free skin</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://moeslimah.blogspot.com/" target="_blank">muslimah</a>
</li>
</ul>
</div>
*Ribet ya .... ^_* Tarik napas dulu deh.
Atau ambil minum.. gleg glek, yang puasa jangan minum ya. Yang puasa, semogapuasa diterima Allah SWT, semangat !!
Ayo lanjut lagi . .. .....
6. Main
<div id="main"></div>. Main masih berada di dalam content. Kita letakkan setelah sidebar.
Main berada di sisi kanan, gunakan float (float:right;).
Lebarnya berukuran 500px (width:500px;).
Warna background sama dengan warna content. Karena main masih berada di dalam content, maka background tak perlu lagi ditulis ulang. Padding juga ditentukan agar isi blog rapih dengan semua ukuran padding atas, bawah, kanan, dan kiri sama yaitu 5px (padding:5px;).
Kode lengkapnya:
<div id="main" style="float:right; width:500px; padding:5px;"></div>
- Mengisi Main
Pada tutorial sebelumnya, sudah diterangkan bagaimana trik mengisi main ini. Main ini berisi postingan. Terdapat 5 bagian postingan, yaitu tanggal, judul, isi, footer, dan komentar. Bagian posting ini diawali dengan tag <Blogger>.
Hasil sementara untuk bagian main:
--------------------------------------------------------
<div id="main" style="float:right; width:500px; padding:5px;">
<Blogger>
</Blogger>
</div>
-------------------------------------------------------
Tanggal
Kode dasar untuk menampilkan tanggal adalah:
<BlogDateHeader><h2><$BlogDateHeaderDate$></h2></BlogDateHeader>
Pada bagian ini, aku disain menjadi:
<BlogDateHeader>
<h2 style="text-align:right; font:bold 85% Georgia,Serif; color:#4487CD; text-transform:uppercase; letter-spacing:.3em;"> ...........|| <$BlogDateHeaderDate$> ||</h2>
</BlogDateHeader>
Keterangannya:
- text-align:right; posisi text diawali dari sisi kanan
- font:bold 85% Georgia,Serif; font bold denganukuran 85% dari 12 px dan jenis font adalah Georgia,serif.
- color:#4487CD; warna font biru muda.
- text-transform:uppercase; huruf kapital, semuanya.
- letter-spacing:.3em; jarak antar huruf.
Judul Postingan
<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<h3><$BlogItemTitle$></h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>
Pada bagian ini, ideku:
<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<h3 style="background: url(white-love/images/white-love-title.jpg) no-repeat 0 0; padding:2px 14px 2px 25px; font:bold Georgia,Serif; color:#A93101; border-bottom:1px dashed #000000;"><$BlogItemTitle$></h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>
Keterangannya:
- background: url(white-love/images/white-love-title.jpg) no-repeat 0 0; background yang tak diulang dengan posisi image di titik 0 dan 0
- padding:2px 14px 2px 25px; padding tulisan, atas 2px, kanan 14px, bawah 2px, dan kiri 25px. Coba utak atik angka ini, disesuaikan dengan selera aja.
- font:bold Georgia,Serif; font bold dengan tipe Georgia,serif
- color:#A93101; warna font, sama dengan judul pada sidebar.
- bottom:1px dashed #000000; merupakan garis bawah, aksen saja.
Isi.
Kodenya:
<p>
<$BlogItemBody$>
</p>
Kreasinya:
<p style="background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right; line-height:1.5em;">
<$BlogItemBody$>
</p>
Keterangannya:
- background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right; menggunakan background warna dan image. image tidak berulang dan posisinya ditentukan selalu berada di sisi bawah dan samping kanan untuk setiap postingan.
- line-height:1.5em; jarak antara baris text.
Footer.
Kode aslinya:
<p>
<em>posted by <$BlogItemAuthorNickname$>
@ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
</em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</MainOrArchivePage><$BlogItemControl$>
</p>
Yang berwarna merah adalah tag yang bisa kita beri style. Gini nih idenya:
<p style="line-height:1.5em; color:#4487CD; text-align:right;">
<em style="float:left; text-align:left;">posted by <$BlogItemAuthorNickname$>
@ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
</em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</MainOrArchivePage><$BlogItemControl$>
</p>
Keterangannya:
<p style="line-height:1.5em; color:#4487CD; text-align:right;"> :
- tag paragraph <p> diberi style
- line-height:1.5em; jarak antara baris text besarnya 1.5em
- color:#4487CD; warna font
- text-align:right; posisi text diawali dari kanan ke kiri
<em style="float:left; text-align:left;"> :
- tag untuk mengaktifkan tulisan miring (italic) yaitu <em> juga diberi style. Berisi nama yang membuat postingan dan waktunya dibuat huruf miring.
- float:left; nama dan waktu posting dibuat di sisi kiri.
- text-align:left; begitu juga dengan arah tulisan dari kiri ke kanan.
<a style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" href="<$BlogItemPermalinkUrl$>#komentar"> :
- background:url(white-love/images/white-love-comment.gif) no-repeat 0 .3em; untuk memberi image pada tulisan link komentar.
- padding-left:14px; menggeser text ke kanan agar tidak menimpa image.
Komentar
<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<h4><$BlogItemCommentCount$> Comments:</h4>
<dl>
<BlogItemComments>
<dt 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>
Yang diberi warna merah adalah tag yang dapat diberi style. Hasilnya gini nih:
<ItemPage>
<BlogItemCommentsEnabled><a name="comments"></a>
<h4 style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 1em; padding-left:14px; padding-top:10px; font-size:14px; border-top:1px dashed #000000;"><$BlogItemCommentCount$> Comments:</h4>
<dl>
<BlogItemComments>
<dt style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" 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>
</ItemPage>
Keterangannya:
<h4 style="background:url(white-love/images/white-love-comment.gif) no-repeat 0 1em; padding-left:14px; padding-top:10px; font-size:14px; border-top:1px dashed #000000;"> :
- diberi image background, ukuran font diperbesar, padding diberi ukuran serta diberi border di bagian atas dengan tipe border dashed atau garis-garis.
<dt style="background:url(white-love/images/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" :
- setiap komentar diberi image dan text digeser ke kanan dengan menggunakan padding.
<p>"<$BlogCommentBody$>"</p> :
- hanya menambahkan tanda petik untuk setiap isi komentar.
Hasil akhir kode untuk main adalah:
------------------------------------------------------
<div id="main" style="float:right;
width:500px; padding:5px;">
<Blogger>
<BlogDateHeader>
<h2 style="text-align:right; font:bold 85% Georgia,Serif; color:#4487CD; text-transform:uppercase; letter-spacing:.3em;"> ..........|| <$BlogDateHeaderDate$> ||</h2>
</BlogDateHeader>
<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<h3 style="background: url(white-love/images/white-love-title.jpg) no-repeat 0 0; padding:2px 14px 2px 25px; font:bold Georgia,Serif; color:#A93101; border-bottom:1px dashed #000000;"><$BlogItemTitle$></h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>
<p style="background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right; line-height:1.5em;">
<$BlogItemBody$>
</p>
<p style="line-height:1.5em; color:#4487CD; text-align:right;">
<em style="float:left; text-align:left;">posted by <$BlogItemAuthorNickname$>
@ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
</em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</MainOrArchivePage><$BlogItemControl$>
</p>
<ItemPage>
<BlogItemCommentsEnabled><a name="comments"></a>
<h4 style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 1em; padding-left:14px; padding-top:10px; font-size:14px; border-top:1px dashed #000000;"><$BlogItemCommentCount$> Comments:</h4>
<dl>
<BlogItemComments>
<dt style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" 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>
</ItemPage>
</Blogger>
</div>
-------------------------------------------------------
7. Footer
<div id="footer"></div>
Merupakan bagian yang berisi tulisan penutupan di paling bawah dari template. Ideku adalah membuatnya berwarna kuning dan berisi tulisan yang sesuai dengan title dari blog. Isi tulisannya adalah sama denga kode title (<$BlogPageTitle$>):
<div id="footer"><$BlogPageTitle$></div>
Selanjutnya mengatur style.
- menonaktifkan float left dan right (clear:both;)
- background berwarna kuning (background:#FFE43B;)
- posisi text rata tengah (text-align:center;)
- atur ukuran padding (padding:2px;)
Kode untuk footer:
<div id="footer" style="clear:both; background:#FFE43B; text-align:center; padding:2px;"><$BlogPageTitle$></div>
8. Hasil akhir template:
------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
</head>
<body style="margin-top:33px; background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<div id="content" align="left" style="width:750px; border-top:5px solid #FFE53C">
<div id="header" style="margin:0;">
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header1.jpg" /><img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header2.jpg" /><img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header3.jpg" />
</div>
<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px;padding-top:5px; padding-bottom:5px;">...Hari Kemarin</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerPreviousItems>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a>
</li>
</BloggerPreviousItems>
</ul>
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Kumpulan Arsip</h2>
<MainOrArchivePage>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerArchives>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</li>
</BloggerArchives>
<ArchivePage>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogURL$>">Current Posts</a>
</li>
</ArchivePage>
</ul>
</MainOrArchivePage>
<$BlogMemberProfile$>
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Blog Teman</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://riniaisyah.blogspot.com/" target="_blank">rinimedan</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://blogger-skin-resources.blogspot.com/" target="_blank">free skin</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://moeslimah.blogspot.com/" target="_blank">muslimah</a>
</li>
</ul>
</div>
<div id="main" style="float:right; width:500px; padding:5px;">
<Blogger>
<BlogDateHeader>
<h2 style="text-align:right; font:bold 85% Georgia,Serif; color:#4487CD; text-transform:uppercase; letter-spacing:.3em;"> ...........|| <$BlogDateHeaderDate$> ||</h2>
</BlogDateHeader>
<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<h3 style="background: url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; padding:2px 14px 2px 25px; font:bold Georgia,Serif; color:#A93101; border-bottom:1px dashed #000000;"><$BlogItemTitle$></h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>
<p style="background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right; line-height:1.5em;">
<$BlogItemBody$>
</p>
<p style="line-height:1.5em; color:#4487CD; text-align:right;">
<em style="float:left; text-align:left;">posted by <$BlogItemAuthorNickname$>
@ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
</em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</MainOrArchivePage><$BlogItemControl$>
</p>
<ItemPage>
<BlogItemCommentsEnabled><a name="comments"></a>
<h4 style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 1em; padding-left:14px; padding-top:10px; font-size:14px; border-top:1px dashed #000000;"><$BlogItemCommentCount$> Comments:</h4>
<dl>
<BlogItemComments>
<dt style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" 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>
</ItemPage>
</Blogger>
</div>
<div id="footer" style="clear:both; background:#FFE43B; text-align:center; padding:2px;"><$BlogPageTitle$></div>
</div>
</div>
</body>
</html>
----------------------------------------------
Hasil kode template dalam file txt
Hasil dapat dilihat di http://skin-test.blogspot.com/
Lihat tutorial lainnya di Azzahrah Design Read More......
Size : 12 kb
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
Size : 22 kb
Info : Skin untuk Maisara.
Subscribe to:
Posts (Atom)
