Home » , » Cara Membuat Template Sendiri ( 2 Kolom )

Cara Membuat Template Sendiri ( 2 Kolom )

Written By Rendy Fernando on Monday, October 7, 2013 | 2:42 PM

Cara Membuat Template 2 Kolom Sendiri - Bagi Anda yang menginginkan template blogger 2 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, Contoh blog saya yang satu ini VXC D-Center dibuat dengan struktur template dibawah ini.(Template sudah di ganti)
Cara Membuat Template 2 Kolom Sendiri

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" ?>
<!DOCTYPE html>
<html lang='id'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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> 
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
Share this article :

Kode Smiley Untuk Komentar


:a   :b   :c   :d   :e   :f   :g   :h   :i   :j   :k   :l   :m   :n   :o   :p   :q   :r   :s   :t

0 comments:

Post a Comment


 
Support : Maskolis | Johny Template | 2eGM | Post RSS | Comment RSS
Copyright © 2013. 2eGM - All Rights Reserved
Template Update by Rendy VXC Published by Mas Template
Proudly powered by Blogger