Sabtu, 26 Januari 2013

Cara Membuat Template Sederhana Blogspot

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

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

<!--:[ 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://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> <!--:[ 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 &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.  

4 komentar:

  1. makasih ilmu sob, maklum newbi

    BalasHapus
    Balasan
    1. Trimakasih atas kunjungannya teman.

      Hapus
  2. Terima kasih banyak mas, artikel ini sangat membantu saya..

    BalasHapus
    Balasan
    1. alhamdulillah bila artikel di atas sangat membantu anda.

      Hapus