Membuat Template Blog sendiri Dengan Notepad
Kamis, 19 April 2012
Hal yang harus diperhatikan dalam mendesain template blog ada lah anda harus memahami "Tag HTML" dan juga beberapa kode CSS untuk membuat Blog menarik.
Sudah siap? Ayo kita mulai :P
1. Langkah Awal
Download Contoh Tag HTML Diatas agar mudah untuk menjelaskannya dan mudah untuk dimengerti. Tenang aja, filenya tidak ada Virusnya kok ;) hanya berisi Tag HTML.txt dan juga CSS.txt
2. Buka File Tersebut di Notepad.
Didalamnya terdapat beberapa contoh CSS dan juga Tag HTML yang saya tulis sendiri.
3. Buat Blog Baru pada Blogger.com
Berfungsi agar menghindari hal yang tidak diinginkan pada template blog anda. Seperti kesalah pada Jarak, Warna, Ukuran, Font, sampai dengan Gambar.
4. Letakkan semua Tag HTML Tersebut
Maksudnya adalah Copy dan Paste semua kode yang terdapat pada Tag HTML.txt tersebut ke dalam Edit HTML pada blog yang baru anda buat.
5. Ganti seluruh Tag head dengan kode XML
Karena blog menggunakan XML untuk template, kita harus merubah Tag HTML tersebut menjadi tag HTML, caranya dengan mengganti kode dari <html> hingga </head> dengan kode dibawah ini :P
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Insert CSS Here */
]]></b:skin>
</head>6. Masukkan CSS
edit file CSS.txt dan Ganti tulisan /* Insert CSS here */ diatas dengan seluruh kode yang terdapat pada file css.txt tersebut. Css pada XML template blogger dimulai dengan tulisanadalah tulisan<b:skin><![CDATA[ dan berakhir pada kode ]]></b:skin> .
7. Memberi Blogger Tag
Anda diharuskan untuk merubah Static Content dengan Dinamic Content yang telah disediakan oleh Blogger.
Untuk lebih lengkapnya, silahkan pergi ke Link http://support.google.com/blogger/bin/answer.py?hl=en&answer=46888
Cara ini dilakukan agar anda dapat lebih leluasa dalam mengedit dan mengatur dalam "Tata Letak". Selain itu, Dynamic Content juga berfungsi agar Post yang anda publikasi bisa Muncul pada Blog anda. Jika template tidak diberikan Blogger Tag, maka template akan Static, maksudnya ketika anda melakukan pengeditan pada template, post, ataupun widget anda, maka semua tidak akan berubah.
a. Mengganti Header
Ganti <!-- Batas Awal Title --> ... <!-- Batas Akhir Title --> dengan kode berikut ;)
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>b. Memberikan Dynamic Content pada Posting
Ganti <!-- Awal Post Kontent --> ... <!-- Akhir Post Kontent --> dengan kode berikut :P
<div id="main-content">
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>c. Memberi efek Dynamic Content pada Widget
Ganti <!-- Awal Widget --> ... <!-- Akhir Widget --> dengan kode dibawah ini :D
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>8. Save dan Preview
Save template anda, jika ada kesalahan ataupun error pada kode tersebut, anda diharuskan untuk mengulang lagi dari langkah 4 diatas.
9. Sedikit Mengedit Kode CSS
CSS itu sangatlah penting, kenapa ? karena css adalah bagian terpenting dalam suatu situs web. CSS ini sendiri yang mengatur tata-letak dari suatu Element yang berantakan menjadi elemen yang teratur dan nyaman untuk dilihat. Tidak hanya mengatur sebuah Elemen, CSS juga dapat mengatur Warna, Dekorasi, Bingkai(Border), hingga Gambar latar. Untuk kali ini, mari kita mulai mengedit sebagian CSS pada blog agar terlihat menarik ;)
Mulailah mengedit text dan link yang terdapat di template tersebut:
a{
color:red;
text-decoration:none;
}
a:hover{
font-weight:bolder;
}
a:visited{
color:darkred;
}
/* Link yang berada pada Widget */
#widget-wrapper a{
color: yellowGreen;
text-decoration: none;
}
/* Penanggalan pada Posting */
.post-outer h3 a{
text-decoration:none;
color:red;
}
.post-outer h3 a:hover{
color:orange;
}Sekarang, tambahkan beberapa Properties seperti Gambar latar ataupun warna pada elemen <body> :
body{
background: #888 url('http://alamatgambaranda') repeat;
color: #eee;
text-shadow:1px 1px 1px #555;
}Tambahkan beberapa Properties pada Main page (elemen posting) :
/* Penanggalan */
.post-outer h3{
display: block;
border-bottom: 1px solid;
color: red;
border-right: 5px solid;
font: 20px cursive;
text-decoration:none;
}Dan Merubah beberapa CSS yang telah jadi ;)
/* Element pada Wrapper */
#inner {
background: #AAA;
padding: 12px;
float: left;
width: 900px;
margin: 35px 0px;
border-radius: 10px;
box-shadow: 15px 15px 11px #999;
}
/* Element pada Post */
#postwidget {
width: 640px;
float: left;
background: #222;
border-radius: 10px;
box-shadow: 6px 6px 6px #555;
}
#postcontent {
padding: 10px 20px 30px;
font: 13px arial;
color: white;
}
/* Element pada Widget */
#widget-wrapper {
float: right;
padding: 7px;
background: #222;
border-radius: 10px;
box-shadow: 3px 3px 9px #555;
}
Save dan Preview ;)
untuk DEMO, anda dapat ke sample blog saya ;)
Artikel Terkait:
Previous Article
Post a Comment