Cara Membuat Template Sederhana Blogspot ~ Belajar blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Artikel kali ini mengulas tentang Cara Membuat Template Sederhana Blogspot, Langsung saja kita meluncur ke TKP.

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

<head>
<b:include data='blog' name='all-head-content' />
<title><data:blog.pageTitle/></title>

Bagian ketiga template adalah CSS Style

<b:skin><![CDATA[ /* ----------------------------------------------------- Smart Template For Blogspot By http://trikbikinblog.blogspot.com Name: Smart Template Author: Wong Normal URL: http://trikbikinblog.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>  </head>

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 &amp;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>

Demikian ulasan tentang Cara Membuat Template Sederhana Blogspot, semoga berguna.

Belajar blog

Categories

alexa aku

Pages

Followers

Info tentangku

Daftar Blog Saya

Text Widget

Sabtu, 26 Januari 2013