Dalam membuat Template Blogspot yang sederhana, Saya bagi komponen-komponennya menjadi beberapa bagian, karena Saya belum bisa menjelaskannya secara detail :D
Hasilnya ya bisa saja berbeda, tergantung pengetahuan masing-masing orang, kalau Saya sih baru bisa menghasilkan CANVASnya saja :D
DEMO SCRIPT
DOWNLOAD SUMBER
Bagian pertama template blogspot merupakan tipe dokumen dan html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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'>
Bagian kedua template itu adalah head dan title
<!--:[ START HEADING ]:-->
<head>
<b:include data='blog' name='all-head-content' />
<title><data:blog.pageTitle/></title>
Bagian ketiga template adalah CSS Style
<!--:[ START STYLE ]:-->
<b:skin><![CDATA[
/* -----------------------------------------------------
Smart Template For Blogspot By http://fau2i.blogspot.com
Name: Smart Template
Author: Muhammad Fauzi
URL: http://fau2i.blogspot.com
-------------------------------------------------------- */
#navbar-iframe{display:none;height:0;visibility:hidden}
html{-webkit-text-size-adjust:none}
body{background:#f8f8f8}
#outer-wrapper{width:980px;margin:0 auto;background:#fff;overflow:hidden;box-shadow:0 2px 6px rgba(100,100,100,.3);-moz-box-shadow:0 2px 6px rgba(100,100,100,.3);-webkit-box-shadow:0 2px 6px rgba(100,100,100,.3);color:#222;font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, 'AppleGothic', sans-serif;font-size:1em;line-height:1.575em;text-align:left}
#header-wrapper{margin:0 auto}
#header{width:100%;height:120px;clear:both}
#header-inner{margin:20px;padding:20px}
#header h1,#header h3{color:#222;font-family:Lucida sans unicode,Georgia, Times New Roman;font-weight:400;margin:0;padding:0;font-size:35px}
#header h2{color:#888;font-family:Georgia, Times New Roman;font-weight:400;text-decoration:none;margin:0;padding:0;font-size:12px}
#header-navigation{border-top:1px solid #ddd;border-bottom:1px solid #ddd}
#header-navigation ul{padding:0}
#header-navigation li{width:20px;padding:10px;list-style:none;display:inline;text-decoration:none}
#main-wrapper{margin:10px}
#content-wrapper{float:left;width:600px;border-right:1px solid #eee;margin: 0 10px}
.post-body img{padding:5px;border:1px solid #eee;box-shadow:0 2px 4px #999}
.post-body h2{border-bottom:1px solid #ccc;font:Segoe UI, Serif;line-height:1.4em;letter-spacing:.1em;color:#549D50;font-size:1.25em;margin:10px 0 4px;}
.post-body h3{font:Segoe UI, Serif;line-height:1.4em;letter-spacing:.1em;color:#303035;font-size:150%;margin-top:10px;margin-bottom:2px;}
.post-body img{overflow:hidden;border:1px solid #dcd9d9;max-width:100%;padding:5px;box-shadow:0 2px 6px rgba(100,100,100,.3);-moz-box-shadow:0 2px 6px rgba(100,100,100,.3);-webkit-box-shadow:0 2px 6px rgba(100,100,100,.3)}
img{max-width:100%;height:auto}
.video{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}
.video iframe,.video object,.video embed{position:absolute;top:0;left:0;width:100%;height:100%}
a{color:#00adeb;text-decoration:none}
a:hover{color:#000609}
#sidebar-wrapper{float:right;width:320px;margin:0 10px 0 0}
.sidebar ul{padding:0}
.sidebar li{list-style:none}
.sidebar h2,.sidebar h4{font-size:16px;}
.item-thumbnail{width:72px;height:72px;padding:5px;border:1px solid #eee;box-shadow:0 2px 4px #999}
#footer-wrapper{width:100%;margin:0 auto;border-top:3px double #ccc;padding-top:10px;clear:both}
#footer1{width:33%;float:left;margin:0}
#footer2{width:33%;float:left;margin:0 0 0 5px}
#footer3{width:33%;float:right;margin:0}
.credit{margin-top:20px;border-top:2px solid #ddd}
.credit,.credit a{color:#999}
.credit p{float:left;margin-left:20px}
.credit span{display:block;float:right;margin-right:20px;margin-top:15px;font-size:75%}
.Top{border-bottom:15px solid #000;border-left:15px solid transparent;border-right:15px solid transparent;position:fixed;bottom:0;right:10%;width:0;height:0;z-index:1}
::-webkit-scrollbar{width:15px;background:rgba(0,0,0,.07);}
::-webkit-scrollbar-thumb{background:#790;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;}
@media screen and (max-width: 980px) {
body,#outer-wrapper,#header-wrapper,#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{width:95.725%;margin:0 auto}
#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{display:inline-block;width:100%}
}
@media screen and (max-width: 750px) {
body,#outer-wrapper,#header-wrapper,#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{width:90%;margin:0 auto}
#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{display:inline-block;width:100%}
}
]]></b:skin>
<!--:[ END STYLE ]:-->
</head>
<!--:[ END HEADING ]:-->
Bagian keempat theme blogger yaitu body, outer dan header
<!--:[ START BODY ]:-->
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'/>
<!--:[ Start Outer ]:-->
<div id='outer-wrapper'>
<!--:[ Start Header ]:-->
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Smart Theme (Header)' type='Header'/>
</b:section>
</div>
<!--:[ End Header ]:-->
Bagian kelima dari komponen template ialah main, navigasi, content, sidebar, footer
<!--:[ Start Main Wrapper ]:-->
<div id='main-wrapper'>
<!--:[ Start Header Navigation ]:-->
<div id='header-navigation'>
<b:section class='topmenu' id='topmenu' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Menu' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<!--:[ End Header Navigation ]:-->
<!--:[ Start Content Wrapper ]:-->
<div id='content-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<!--:[ End Content Wrapper ]:-->
<!--:[ Start Sidebar Wrapper ]:-->
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<div style='clear:both;'/>
<div class='sidebar21' style='float:left;width:42.5%;'>
<b:section class='sidebar' id='sidebar-right-2-1' preferred='yes'/>
</div>
<div class='sidebar22' style='float:right;width:57.5%;'>
<b:section class='sidebar' id='sidebar-right-2-2' preferred='yes'/>
</div>
<div style='clear:both;'/>
<b:section class='sidebar' id='sidebar3' preferred='yes'/>
<div style='clear:both;'/>
</div>
<div class='clear' style='height:40px'/>
<!--:[ End Sidebar Wrapper ]:-->
<!--:[ Start Footer Wrapper ]:-->
<div id='footer-wrapper'>
<div id='footer-bottom' style='text-align: center; padding-top:10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer1'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
<div style='clear:both;'/>
<!--:[ End Footer Wrapper ]:-->
<!--:[ Start Credit Links ]:-->
<div class='credit'>
<p>Copyright &copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='All Rights Reserved'> <data:blog.title/></a></p>
<span>Designed By: <a href='http://fau2i.blogspot.com' title='Fauzi Blog'>Fauzi Blog</a></span>
<div class='clear'/>
</div>
<!--:[ End Credit Links ]:-->
</div>
<!--:[ End Main Wrapper ]:-->
Bagian terakhir dari template tersebut adalah penutup dari div, body dan html
</div>
<!--:[ End Outer ]:-->
<!--:[ START EMBEDDED WIDGET ]:-->
<b:include data='blog' name='google-analytics'/>
<!--:[ END EMBEDDED WIDGET ]:-->
</body>
<!--:[ END BODY ]:-->
</html>
No comments:
Post a Comment