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
18 komentar:
aku salut dengan kak Rini, karena nggak pelit berbagi ilmu, ini ikhlas lho. Semoga bermanfaat, termasuk aku yang lagi coba-coba belajar. biar nggak ngerepotin orang,..terus..he..he..
Baru kutemukan saat broser....
Ada blog seperti ini...mau berbagi gak tangung2 lagi...pokoknya luar biasa deh, aku jadi gak repot2 bereksperimen template...
Tks ya Rini...
salam kenal and Selamat berkarya
sy sdng belajar bikin blogger,yg ingin saya sampakan bahwa Sebaik-baiknya manusia adalah orang yang bermanfaat untuk orang lain..dan kamu adalah salah satunya.
terima kasih atas berbagai ilmunya..semoga tidak terputus pahala yang diberikan kepada kamu dari Allah SWT.
Mungkin sudah 12 atau mungkin lebih site-site yang ngebahas tutorial pembuatan templates keren......tapi kayaknya hanya disini yang memberikan keterangan dan ulasan yang bener-bener TOP...sulit mencari blog kayak ini ...salutt buat mbak Rini...
@all
makasih atas semangatnya ... ^_^
assalamualaikum mbak, salam kenal, mbak saya boleh nggak minta artikel ini yang bisa di print, soalnya artikelnya panjang buanget jadinya aku mau pelajari artikel ini secara offline, boleh nggak kalau boleh artikelnya bisa di kirim ke nugroho[at]weanenugi[dot]web[dot]id
Wassalamualaikum
@nugi
silahkan di-print
Ass. mbak Rini...aku termasuk new comer nih di dunia per-blogger-an. Jadi, banyak banget istilah-istilah yang belum ngerti...Aku nemuin tutorial dari mbak rini. Aku mau coba. Doain ya bisa berhasil...Kelihatannya kok njelimet banget ya... Aku sudah bikin blok tapi masih sederhana banget. Mbak boleh lihat (kaylakita.blogspot.com)dan kasih komentar harus gimana ya blog ku biar menarik... Syukron...Wass.
Ass. Mbak, aku lagi nih...ternyata blog ku belum bisa masuk di daftar pencariannya google, padahal kemarin sudah tak coba...yaah...yang berarti gagal dong...ajarin ya mbak... Syukron...
@reni.
Sudah dikunjungi blognya. Nge-pink. Tapi, ukuran font masih terlalu kecil, susah dibaca. Semangat ya ...
^_^
untuk bisa masuk di google searching, gampang2 susah. Dan blog yang baru dibuat ga bisa langsung terpajang di listing google. Coba pake kata kunci url blog anti... Ulangi beberapa kali, gunakan lebih dari 3 IP. Mudah2an berhasil masuk.
Assalamu alaikum
Ukhti, saya pendatang baru di dunia blog..sangat baru.
saya beberapa kali mencoba memasukkan tempelate dari ukhti ke dalam blog saya, wal hasil, saya gagal. ketika pratinjau, sepertinya berhasil, tapi saat dilihat ternyata gagal. saya minta sarannya dong ukhti. Jazakumullah ahsanal Jaza'
mmmm kenapa ya..?
coba sebutkan, apa nya yang salah. Biasa selalu disebutkan, errornya dimana.
ass.wr.wb
hallo...kak...
huh,knp saya coba contoh kode2 templatenya kok error bgini yaa pesanya??...
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Content is not allowed in prolog.
maskud dari ituh apaa ya? tolong ya.. :)
kirim balasanya lwt e-mail sayaa yaa.. trimakasii..
syukron mba rini..makasih bgt..
selama ini aku selalu susah ngedit layoutnya..gagal mulu..
makasih ya mba,,
penjelasannya bener2 rinci dan rapi^^
ass... mbah aku dah coba tapi yang muncul pesan ini : Kami tidak dapat menyimpan template Anda.
Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The content of elements must consist of well-formed character data or markup.
gimana itu yach apa yg salah dan solusinya gimana ???
mba, ini untuk template jenis classic bukan XML template.
mantab kali tutorial'a,,,,
salut buat kakak....
makasih ya???
assalamu'alaikum..
mbak rini aku baru buat blog tp msh bingung ganti tampalte aja masih gak mudeng-mudeng ..
gmn ya buat ganti tamplate pdhl code script nya dah ta paste di edit html tp kok gak bs bs knp ya??
mksh buat jwbanya..
Post a Comment