Tutorial Membuat Template Blog dari Nol



Pernah punya niat pengen buat template blog sendiri mulai dari nol? Sebenarnya tidak sulit-sulit amat. Template baru www.ramlantjong.com ini juga dibuat dari nol. Ada aturan main,'nya, ketika membuat sebuah template Blogger. Kode kode awal,'nya sbb ;

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' 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.title/></title>
<meta content='' name='description'/>
<meta content='' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> Nama situs</title>
<meta expr:content='data:blog.pageName + &quot; - &quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot; &quot;' name='keywords'/>
</b:if>
<b:skin><![CDATA[

]]></b:skin>
</head>
<body>
</body>
</html>

Bahkan kita bisa membuat sebuah blog tanpa desain tambahan, hanya menggunakan table. Cukup tambahkan aja kode <table></table> diantara kode <body>
</body>

Untuk memanggil posting blog, tambahkan kode ini,; <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>dibagian yang kita rasa bagus untuk munculnya posting,'an-posting,'an blog. 
Setelah postingan blog muncul, maka bisa meneruskan desainnya. 

Tapi bila mau menambahkan desain, bisa dengan menambahkan css setelah kode <b:skin><![CDATA[

Lalu memanggil desain dengan <div></div> setelah kode <body>

Contoh :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' 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.title/></title>
<meta content='' name='description'/>
<meta content='' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> Nama situs</title>
<meta expr:content='data:blog.pageName + &quot; - &quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot; &quot;' name='keywords'/>
</b:if>
<b:skin><![CDATA[
#kota-utama{width:992px;border:1px solid #ccc;padding:4px;}
#kotak-utama .kiri{width:200px;float:left;}
#kotak-utama .tengah{width:492px;float:left;}
#kotak-utama .kanan{width:300px;float:left;}
]]></b:skin>
</head>
<body>
<div id='kotak-utama'>
<span class='kiri'></span>
<span class='tengah'><b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/></span>
<span class='kanan'></span>
</div>
</body>
</html>

Tips : Yang tidak boleh dilupakan ketika membuat template blog blogger adalah dua baris pengapit ini
<div id='wrap2'>
<div id='content-wrapper'>
-----------------------
</div></div>
Tutup semua kota <div> didalam dua kode diatas..
So, jadinya ntar begini
<div id='wrap2'>
<div id='content-wrapper'>
<div id='kotak-utama'>
<span class='kiri'></span>
<span class='tengah'><b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/></span>
<span class='kanan'></span>
</div>
</div>
</div>

Oke, selesai. Sebelum pergi klik kanan blog ini, lalu view page source untuk melihat strukturnya..
Terima Kasih
Description: Tutorial membuat template blog, tutorial mendesain blog blogger, tutorial desain template blogspot 
Rating: 5
Reviewer: Ramlan Tjong - ItemReviewed : Tutorial Membuat Template Blog dari Nol

Comments