Bagi Anda yang menginginkan template blogger 3 kolom mungkin sangat banyak di internet secara gratis, tapi bagaimana kalau hasil karya Anda sendiri? mungkin lebih memuaskan dan lebih mengetahui struktur kerangka template yang dibuat sediri dari pada template hasil download di internet. Sekarang kita akan mulai belajar untuk pembuatan dasar template blogger 3 kolom.Sedikit tentang keterangan gambar diatas hasil kreasi saya sendri :
- Header blog, judul blog dan deskripsi blog.
- Header blog yang ke dua untuk penempatan iklan atau widget lainnya.
- Bagian posting.
- Sidebar kiri kanan, untuk menempatkan widget-widget yang dirasa perlu ditampilkan diblog.
- Bagian footer.
Berikut dasar koding untuk pembuatan template 3 kolom:
<!DOCTYPE html>
<html lang='id'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> - Deskripsi Blog Anda</title>
</b:if>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:skin><![CDATA[
/*
Created : Doky Asde
URL : http://www.dokyasde.com
*/
#Attribution1,#Navbar1{height:0;visibility:hidden;display:none}
body{background:#fff ;color:#000;margin: 0 auto;font-family:Arial, sans-serif;font-size: .8em;word-wrap: break-word;}
a:link,a:visited{color:#3B5998;text-decoration:none}
a:hover{color:#3B5998;text-decoration:underline;}
a img,img{border-width:0}
#headerx{width:1000px;margin:0 auto;padding:0px;}
#header{float:left;width:25%;margin:0;padding:5px;}
#header-ads{float:right;width:73%;margin:0;padding:5px;}
#kontenx{margin:0 auto;width:1000px;background:#FFF;}
#sidebar-kiri{float:left;width:25%;margin:0;padding:5px;}
#postingx{float:left;width:45%;margin:0;padding:5px;}
#sidebar-kanan{float:right;width:25%;margin:0;padding:5px;}
#footerx{width:1000px;margin:0 auto;padding:5px;}
]]></b:skin>
</head>
<body>
<div id='headerx'>
<b:section class='header' id='header' maxwidgets='1' showaddelemenet='no'>
<b:widget id='Header1' locked='true' title='titl blog (Header)' type='Header'/>
</b:section>
<b:section class='header-ads' id='header-ads' preferred='yes'/>
<div style='clear:both;'/>
</div>
<div id='kontenx'>
<div id='sidebar-kiri'>
<b:section class='isi-sidebar-kiri' id='isi-sidebar-kiri' preferred='yes'/>
</div>
<div id='postingx'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-kanan'>
<b:section class='isi-sidebar-kanan' id='isi-sidebar-kanan' preferred='yes'/>
</div>
<div style='clear:both;'/>
<div id='footerx'>
<b:section class='isi-footerx' id='isi-footerx' preferred='yes'/>
</div>
</div>
</body>
</html>
Koding diatas sangat sederhana dan terdiri dari beberapa element seperti header 2 kolom, posting, sidebar kiri kanan, dan footer. Untuk step berikutnya kita akan bahas pengkodean CSS untuk header blog, posting, sidebar, dan footer. Sesuai dengan keterangan template diatas.
www.ceaster.com
Ceaster Corp
Posts
