Cara Membuat Template Blog Sendiri dengan Keren dan Mudah – Bagi anda kalau sudah mampu memahami bahasa HTML, CSS dan Javascript cara ini akan sangat terlihat mudah. Dan jika anda sudah mengetahui 3 bahasa diatas anda akan bisa membuat template blog sendiri yang keren.

Dengan ini anda diperlukan waktu yang tidak singkat atau lama. Dengan ini para pembuat template tidak senang bila template merek atau link creditnya dibuang. Bagi anda pengguna template gratisan atau premium janganlah buang credit link tersebut, hargailah karya orang lain.

Cara Membuat Template

Kali ini saya akan mengajarkan anda cara bagaimana membuat template sendiri dengan mudah.
Berikut tampilan layout yang akan saya ajarkan.
Berikut langkah cara membuat template sendiri :
 
1. Anda masuk ke edit template tetapi dengan blog zombie atau dummy
Hapus semua kode yang ada dengan cara CTRL+A lalu delete. Kemudia pastekan kode dibawah ini ke editor template tadi :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
   <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='Mas Yadi' 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;!-- /* <b:skin><![CDATA[
/*
Bagi anda yang mengerti dan blogger profesional pastinya tidak akan menghapus link ini. Membuat template ini tidak cukup 1 jam bro!
Blogger Template Style
Name       : Nama Template Anda
Date       : Tanggal Pembuatan Template Ini
Updated by : Mas Yadi/Namamu
*/
#navbar-iframe{height:0;visibility:hidden;display:none;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
a:link,a:visited{color:#1BC7A5;text-decoration:none;margin-left:0px;margin-right:0px;}
a img{border-width:0;}
img{max-width:100%;vertical-align:middle;border:0;height:auto;}
.quickedit{display:none;}
.clear{clear:both;}
body{background:#eaeaea;margin:0;padding:0;font-family: calibri;color:#2c3e50;}
]]></b:skin>
<style type='text/css'>

 

</style>
</head>
<body>

<b:section class=‘main’ id=‘main’>
<b:widget id=‘Blog1’ locked=‘true’ title=‘Posting Blog’ type=‘Blog’></b:widget>
</b:section>

</body>
</HTML>

Membuat Wrapper pada Template

setelah anda copas script diatas kali ini kita akan membuat wrapper template dengan ukuran 1024px ukuran ini bisa dirubah sesuai kehendak anda.
1. pasang css ini setelah </style>

#wrapper{
background:#FFF;
width:1024px;
overflow:hidden;
margin:0 auto;
}

 

2. kemudian kita panggil fungsi css diatas dengan cara taruh script dibawah ini diatas <body>
  1. <div id='wrapper'>
3. kemudian kita tutup kode wrapper diatas dengan cara menaruh kode dibawah ini diatas </body>
</div>
 
4. Sekarang simpan template anda tersebut kini kita telah berhasil membuat wrapper template.
(Baca Cara selanjutnya!)
 

Cara membuat Header dan Header Ads

Setelah tadi kita membuat wrapper template kini kita akan membuat header blog dan header untuk iklan, caranya yaitu :
 
1. pasang css ini diatas </style>
  1. #header-wrapper{width:100%;overflow:hidden;}
    #header{width:262px;overflow:hidden;float:left;}
    #header-ads{width:728px;overflow:hidden;float:right;}
    .header .widget{padding:10px;}
2. pasang HTML berikut dibawah <div id=’wrapper’>
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Mas Yadi Blogger Template (Header)' type='Header'></b:widget>
</b:section>
<b:section class='header' id='header-ads' maxwidgets='1'/>
<div class='clear'/>
</header>
 

Cara membuat Sidebar dan Post

Langkah selanjutnya adalah membuat tempat untuk artikel dan sidebar diblog. Letak sidebar terdapat di sebelah kiri Float:left dan tempat post disebelah kanan Float:right. Caranya yaitu :
1. pasang css berikut di </style>
#artikel-wrapper{float:right;width:724px;overflow:hidden}
#sidebar-wrapper{float:left;width:300px;overflow:hidden}
#sidebar{padding:5px}
.sidebar h2,.sidebar h3{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}
2. pasang html sidebar berikut di atas  <b:section class=’main’ id=’main’>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
 
3. pasang html artikel berikut diatas <b:section class=’main’ id=’main’>
<aside id='artikel-wrapper'>
 
4. tutup html dengan cara pasang di </b:section> yang paling terakhir
 
</aside>
 

Membuat footer 3 kolom

Langkah yang terakhir adalah membuat footer blog, dengan cara yaitu :
1. pasang css berikut diatas </style>
#footer-wrapper{width:100%;clear:both}
.footer h3,.footer 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}
.footer{width:32%;padding:5px}
#footer-1{float:left}
#footer-2{float:left}
#footer-3{float:right}
2. Pasang html footer di atas </div> yang terakhir
<div class='clear'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer-1' showaddelement='yes'/>
<b:section class='footer' id='footer-2' showaddelement='yes'/>
<b:section class='footer' id='footer-3' showaddelement='yes'/>
</footer> 
 
Nah selesai langkah berikut coba sobat simpan template buatan sobat. Selamat sekarang sobat telah membuat template sendiri.