Tuesday, 4 October 2016

Home / Belajar Desain Grafis / desain web / Cara membuat kerangka template blog dari awal

Cara membuat kerangka template blog dari awal

by on in ,

Baca Juga
Berlanjut dari artikel sebelumnya tentang tutorial membuat template blog. Karena di artikel sebelumnya hanya berupa dasar dari sebuah template. Sekarang saya akan membahas cara membuat kerangka template hingga bisa menjadi sebuah template yang sudah siap dipakai. Lihat contoh kerangka berikut, 



  • Setelah membuat dasar sebuah template, sekarang kita akan tambahkan widget postingan pada template tersebut. Copy kode berikut di elemen b:section setelah <body>.. (blok dan tekan CTRL + C)
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
Kode tag diatas adalah kode default untuk postingan blog, tanpa adanya kode diatas setiap artikel yang kita tulis tidak akan tampil pada blog...



  • Berikutnya copas kode 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 kode diatas setelah tag <head>. Kode diatas adalah kode untuk membuat template ada lebih SEO. 

 Berikutnya copy kode 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 kode diatas setelah <b:skin><![CDATA[..
Seperti gambar dibawah 


  • Langkah berikutnya adalah membuat outer-wrapper. Outer-wrapper adalah pembungkus paling luar sebuah template setelah body. Copy kode berikut. (blok dan tekan CTRL + C)
/*--- outer wrapper ----*/
#outer-wrapper{
background :#FFF;
width :1024px;
overflow:hidden;
margin:0 auto;
}

Paste kode diatas sebelum ]]</b:skin>. Lalu copy kode berikutnya.
 <div id='outer-wrapper'>

Paste setelah tag <body>. Copy penutup outer wrapper berikut.
  </div> <!-- penutup outer wrapper -->

Pastekan sebelum tag </body>. Lihat gambar berikut sebagai contoh.
  • Langkah berikutnya membuat header + header ads. 
Copy kode 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 setelah kode CSS outer-wrapper, atau sebelum ]]</b:skin>..
Copy kode 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 setelah tag pembuka <div id='outer-wrapper'>. 
Lihat gambar dibawah.



  • Sekarang kita akan membuat Sidebar
Copy kode CSS berikut dan paste setelah kode 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 kode html sidebar berikut. (blok dan tekan CTRL + C)

 <article id='main-wrapper'>


Pastekan setelah tag tersebut diatas tag <b:section id='main'>.

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

 </article>  <!-- penutup arikel -->
<aside id='sidebar-wrapper'>
</aside> 
<div class='clear' />

 Pastekan diatas </div> <!-- penutup outer wrapper -->.
Lihat gambar berikut.


  • Berikutnya membuat footer
Pertama copy kode 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 kode diatas sebelum ]]</b:skin>

Selanjutnya copy kode 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> <!-- penutup outer wrapper -->
Lihat gambar berikut..


  • Selesai. 
Berikutnya Anda bisa menambah widget pada header, sidebar, dan footer. Bagi yang belum mengerti tentang kode CSS dan HTML mungkin akan bingung dengan cara-cara diatas. Tapi dengan seiring waktu pasti kita akan mengerti tentang kode-kode tersebut.

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

 Jika ingin menambah menu navigasi silahkan klik disini.

Author Image

About Unknown

Artikel Lainnya :
By di
Label: ,

4 comments:

Subscribe to: Post Comments (Atom)