Cara Menciptakan Kerangka Template Blog Dari Awal



Berlanjut dari artikel sebelumnya ihwal tutorial menciptakan template blog. Karena di artikel sebelumnya hanya berupa dasar dari sebuah template. Sekarang aku akan membahas cara menciptakan kerangka template sampai dapat menjadi sebuah template yang sudah siap dipakai. Lihat pola kerangka berikut, 


  • Setelah menciptakan dasar sebuah template, kini kita akan tambahkan widget postingan pada template tersebut. Copy arahan berikut di elemen b:section sehabis <body>.. (blok dan tekan CTRL + C)


  <b:widget id=’Blog1′ locked=’true’ title=’Posting Blog’ type=’Blog’></b:widget>



Kode tag diatas yaitu arahan default untuk postingan blog, tanpa adanya arahan diatas setiap artikel yang kita tulis tidak akan tampil pada blog…



  • Berikutnya copas arahan berikut,  (blok dan tekan CTRL + C)


   <b:if cond=’data:blog.isMobile’>
      <meta content=’width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0′ name=’viewport’/>
   <meta content=’noindex,nofollow’ name=’robots’/>
    </b:if>
<b:include data=’blog’ name=’all-head-content’/>
<meta content=’####################’ name=’google-site-verification’/>
<meta content=’####################’ name=’msvalidate.01’/>
<meta content=’####################’ name=’alexaVerifyID’/>
<meta content=’index, follow, noodp, noydir’ name=’robots’/>
<meta content=’id’ name=’geo.country’/>
<meta content=’Aris Istofa’ name=’author’/>
<meta content=’1 days’ name=’revisit-after’/>
<meta content=’Indonesia’ name=’geo.placename’/>
<meta content=’blogger’ name=’generator’/>
<meta content=’general’ name=’rating’/>
<meta content=’index, follow, snipet’ name=’googlebot’/>
<b:if cond=’data:blog.pageType == &quot;index&quot;’>
 <meta expr:content=’data:blog.canonicalUrl’ property=’og:url’/>
 <meta content=’website’ property=’og:type’/>
 <meta expr:content=’data:blog.title’ property=’og:site_name’/>
 <meta content=’id_id’ property=’og:locale’/>
 <meta expr:content=’data:blog.pageTitle’ property=’og:title’/>
 <meta expr:content=’data:blog.metaDescription’ property=’og:description’/>
 <meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/>
 <title><data:blog.pageTitle/></title>
 <meta content=’KEYWORD+BLOG_ANDA‘ name=’keywords’/>
</b:if>
<b:if cond=’data:blog.pageType != &quot;index&quot;’>
 <meta expr:content=’data:blog.canonicalUrl’ property=’og:url’/>
 <meta content=’article’ property=’og:type’/>
 <meta expr:content=’data:blog.title’ property=’og:site_name’/>
 <meta content=’id_id’ property=’og:locale’/>
 <meta expr:content=’data:blog.pageName’ property=’og:title’/>
 <meta expr:content=’data:blog.metaDescription’ property=’og:description’/>
 <b:if cond=’data:blog.postImageThumbnailUrl’>
  <meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/>
 </b:if>
 <title><data:blog.pageName/> – <data:blog.title/></title>
 <meta expr:content=’data:blog.pageName’ name=’keywords’/>
</b:if>
*/
&lt;style type=&quot;text/css&quot;&gt;&lt;!– /* 

Paste arahan diatas sehabis tag <head>. Kode diatas yaitu arahan untuk menciptakan template ada lebih SEO. 

Berikutnya copy arahan berikut. (blok dan tekan CTRL + C)

  /*—————————————————–
Membuat Template blog sendiri dari awal.
Name         : Nama style Template Anda
Date           : Tanggal Pembuatan Template anda
Created by : Aris Istofa / Nama Anda
——————————————————*/
.clear{clear:both;}
body{background:#eaeaea;margin:0;padding:0;font-family: calibri;color:#2c3e50;}


Paste arahan diatas setelah <b:skin><![CDATA[..
Seperti gambar dibawah 


  • Langkah berikutnya yaitu menciptakan outer-wrapper. Outer-wrapper yaitu pembungkus paling luar sebuah template sehabis body. Copy arahan berikut. (blok dan tekan CTRL + C)


/*— outer wrapper —-*/
#outer-wrapper{
background :#FFF;
width :1024px;
overflow:hidden;
margin:0 auto;
}


Paste arahan diatas sebelum ]]</b:skin>. Lalu copy arahan berikutnya.

 <div id=’outer-wrapper’>


Paste sehabis tag <body>. Copy epilog outer wrapper berikut.

  </div> <!– epilog outer wrapper –>


Pastekan sebelum tag </body>. Lihat gambar berikut sebagai contoh.

  • Langkah berikutnya menciptakan header + header ads. 
Copy arahan CSS berikut. (blok dan tekan CTRL + C)

 /*— header —*/
#header-wrapper{width:100%;overflow:hidden;}
#header{width:30%;overflow:hidden;float:left;}
#header-ads{width:70%;overflow:hidden;float:right;}
.header .widget{padding:10px;}

Pastekan sehabis arahan CSS outer-wrapper, atau sebelum ]]</b:skin>..

Copy arahan berikutnya. (blok dan tekan CTRL + C)

<header id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′>
<b:widget id=’Header1′ locked=’true’ title=’Header’ type=’Header’></b:widget>
</b:section>
<b:section class=’header’ id=’header-ads’ maxwidgets=’1’/>
<div class=’clear’/>
</header>


Paste sehabis tag pembuka <div id=’outer-wrapper’>. 
Lihat gambar dibawah.



  • Sekarang kita akan menciptakan Sidebar
Copy arahan CSS berikut dan paste sehabis arahan CSS header tadi. (blok dan tekan CTRL + C)


/*— sidebar —*/
#main-wrapper{float:left;width:724px;overflow:hidden}
#sidebar-wrapper{float:right;width:300px;overflow:hidden}
#sidebar{padding:5px}
.sidebar h2,.sidebar h2{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:’PT Sans’,Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}


Lanjut, copy arahan html sidebar berikut. (blok dan tekan CTRL + C)

 <article id=’main-wrapper’>


Pastekan sehabis tag tersebut diatas tag <b:section id=’main’>.

Selanjutnya copy arahan berikut. 
(blok dan tekan CTRL + C)


 </article>  <!– epilog arikel –>
<aside id=’sidebar-wrapper’>
</aside> 
<div class=’clear’ />


Pastekan diatas </div> <!– epilog outer wrapper –>.
Lihat gambar berikut.


  • Berikutnya menciptakan footer
Pertama copy arahan CSS berikut. (blok dan tekan CTRL + C)

/*— footer —*/
#footer{width:100%;background:#ffffff;margin:0 auto;text-align:left;border-top:7px solid #1658A0;overflow:hidden}
#footer a{color:#9c9c9c}
#footer-inners{overflow:hidden;padding:10px 20px}
.footer .widget{padding:0 1px}
.footer .widget-content{padding:0}
.footer li{list-style:none;border-bottom:1px dotted #666;padding:3px 0}
.footer h4{font-size:150%;font-weight:400;color:#fff;font-family:Oswald,Arial,Sans-serif;text-transform:uppercase;padding-bottom:10px}
#footer-left{width:34.5%;float:left;overflow:hidden}
#footer-right{float:right;width:64.5%;overflow:hidden}
@media only screen and (max-width:700px){
.footer{width:100%!important;float:none!important}
}

Pastekan arahan diatas sebelum ]]</b:skin>

Selanjutnya copy arahan html berikut. (blok dan tekan CTRL + C)

 <footer id=’footer’>
<b:section class=’footer’ id=’footer-left’ showaddelement=’yes’/>
<b:section class=’footer’ id=’footer-right’ showaddelement=’yes’/>
</footer> 


Pastekan diatas  </div> <!– epilog outer wrapper –>
Lihat gambar berikut..


  • Selesai. 
Berikutnya Anda dapat menambah widget pada header, sidebar, dan footer. Bagi yang belum mengerti ihwal arahan CSS dan HTML mungkin akan galau dengan cara-cara diatas. Tapi dengan seiring waktu niscaya kita akan mengerti ihwal kode-kode tersebut.

Jika sudah mengerti dengan kode-kode diatas kita akan semakin gampang meng-otak-atik template yang sudah ada maupun menciptakan template sendiri. 
Selamat Mencoba

Jika ingin menambah sajian navigasi silahkan klik disini.


Related Posts