Sekarang kita akan mulai belajar untuk pembuatan dasar template blogger 2 kolom.
Berikut dasar koding untuk pembuatan template 2 kolom:
<?xml version="1.0" encoding="UTF-8" ?>Koding diatas sangat sederhana dan terdiri dari beberapa element seperti header 2 kolom, posting, sidebar, dan footer. Untuk langkah berikutnya kita akan bahas pengkodean CSS untuk header blog, posting, sidebar, dan footer. Sekian dulu sampai disini
<!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 : Rendy VXC
URL : http://2egm.blogspot.com
URL 2 : http://www.rendy-vxc.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}
#header-wrapper{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;}
#content{margin:0 auto;width:1000px;background:#FFF;}
#posting{float:left;width:67%;margin:0;padding:5px;}
#sidebar{float:right;width:30%;margin:0;padding:5px;}
#footer{width:1000px;margin:0 auto;padding:5px;}
]]></b:skin>
</head>
<body>
<div id='header-wrapper'>
<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='content'>
<div id='posting'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar'>
<b:section class='isi-sidebar' id='isi-sidebar' preferred='yes'/>
</div>
<div style='clear:both;'/>
<div id='footer'>
<b:section class='isi-footer' id='isi-footer' preferred='yes'/>
</div>
</div>
</body>
</html>
0 comments:
Post a Comment