Cara Desain Tempalte Blog Dari Awal

Pasti Teman - teman blog banyak yang bertanya - tanyakan.

Bagaimana membuat template dari nol?

Bagaimana bisa mnegetahui membuat template?
Bagaimana belajar membaut template?

Baca Juga

Cara bisa Membuat Template?

Dan banyak sekali pertanyaan dari para teman - teman yang ingin sekali membuat karya sendiri dalam membuat template.

Langsung saja, awalnya teman - teman harus mengerti dan paham apa itu CSS, HTML dan Java Script. Namun dengan menguasai dan mengerti dengan CSS dan HTML teman - teman pasti bisa membuat karya sendiri untuk desain template.

Dalam membuat karya senndiri butuh kesabaran. Untuk itu dalam membuat template Blog sendiri harus sabar mengerjakannya, karena mengerjakan desain template gampang-gampang susah. Namun jika kita punya kesabaran pasti semua bisa terselesaikan. Saya juga masih banya belajar untuk membuat tempate sendiri, tapi dengan niat pasti semua boleh dikerjakan, karena membuat template butuh waktu berjam-jam sampai nerminggu-minggu hingga berbulan - bulan.

Jadi kalau teman mau membuat template sendiri butuh kesambaran dan niat yang kuat.

Ok, kita mulai dengan Cara Membuat Template sendiri.

Cara Desain Tempalte Blog Dari Awal.

Saat kita akan membuat template blog sendiri dengan structure, header, content, sidebar dan footer.
Berikut cara layout template yang akan kita buat.

Berikut cara awal sampai akhir membuat blog.

Jika teman-teman masih baru dan belum mempunyai akun gmail buka saja disini Tutorial Blogger Lengkap dari A sampai Z untuk Pemula

1. Caranya sangat mudah sekali. Berikut adalah langkah-langkahnya:

#1. Masuk ke dashboard blog sobat

#2. Klik menu “Template”

3. Klik di edit HTML dan akan terbuka seperti gambar dibawa.

4. Lalu hapus semua kode yang ada didalam editor template tersebut dengan cara ctrl + A baru delate semuanya, kemuadian copy kode yang ada dibawa ini ke editor template.

Hapus semua kode yang ada di dalam editor template tersebut ( ctrl + a => delete ) , kemudian copy dan pastekan semua kode dibawah ini didalam kolom editor template tersebut :

<?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 : BlogsManado/nama kamu
*/
#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 mengcopy semua kode dasar template tersebut , kini saatnya kita membuat wrapper paling luarnya, misal kita akan buat ukuran 1024px ( ukuran bisa diubah ) caranya yaitu
1. Pasang Css berikut diatas kode </style>

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

Selesai membuat kode diatas bisa langsung save menjaga jangan terjadinya error, habis itu bisa kita lanjutkan lagi.

Kemudian supaya css tadi berfungsi kita panggil dengan memasang htmlnya , caranya kita cari kode <body> kemudian letakan kode dibawah ini tepat , dibawah kode <body> tersebut

```
<div id='wrapper'>
```

Kemudian kita tutup kode wrapper diatas dengan memasang kode penutup div dibawah ini diatas kode</body>

```
</div>
```

Nah sekarang coba anda simpan template dan lihat hasilnya , sampai disini anda sudah bisa membuat template sederhana , tetapi hanya ada widget postingan saja ( Baca cara selanjutnya )

Cara membuat Header dan Header Ads
Setelah anda membuat wrapper sebagai pembungkus , kini kita akan buat header dan header ads ( header untuk iklan ) caranya yaitu :

Pasang Css Header berikut diatas kode </style>

#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;}

Pasang HTML berikut dan letakan 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 Post dan sidebar di Blog
Langkah selanjutnya yaitu kita buat sidebar dan postingan , kali ini postingan dan sidebar yang kita buat , letak sidebarnya berada sebelah kiri float:left dan artikel berada disebelah kanan Float:right caranya yaitu :

Pasang Css Postingan dan Sidebar berikut diatas kode </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}

Pasang HTML Sidebar berikut dan letakan di atas <b:section class='main' id='main'>

<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>

Pasang HTML Artikel berikut dan letakan di atas <b:section class='main' id='main'>
```
<aside id='artikel-wrapper'>
```

Tutup HTML artikel tadi dengan meletakan kode penutup berikut tepat di bawah </b:section> yang terakhir (widget posting blog) atau di atas </div> terakhir

```
</aside>
```

Membuat Footer 3 Kolom di Blog
Langkah yang terakhir adalah kita membuat footer 3 kolom , yang letaknya paling bawah , langsung aja berikut cara membuat footer

Pasang Css Footer berikut diatas kode </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}

Pasang HTML Footer berikut dan Letakkan tepat di atas </div> yang terkahir

<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>

Ok, selesai sudah teman - teman membuat template karya sendiri. diingatkan kalau masih pemula sih merasa rumit dengan cara membaut template ini, tapi jika sudah kelamaan membuat template sendiri pasti akan gampang membuatnya.
Nah, kalau ada yang belum jelas, tinggalkan saja pesan atau komentar dibawah, mudah-mudahan saya bisa menjabawnya. sukses all. jangan pernah menyerah.