Cara Mudah Membuat Template Blog dari awal sampai jadi

Template Blog


Cara Mudah Membuat Template Blog dari awal sampai Jadi - Tampilan Blog merupakan Hal yang tidak kalah penting nya dalam sebuah Blog, karena Tampilan Blog juga sangatlah berpengaruh terhadap pengunjung Blog anda, selain itu apabila Blog anda mau di daftarkan ke Google Adsense, maka Tampilan nya sebisa mungkin harus yang menarik, Ringan dan juga Responsive.


Berbicara Soal Template Blog, pada kesempatan kali ini saya akan coba menjelaskan tentang cara Membuat Template Blog dari awal sampai jadi, walaupun di luar sana banyak sekali yang menyediakan Template yang bagus dan juga responsive, kemudian juga pihak Blogger sudah menyediakan pilihan template gratis untuk anda, Namun tidak ada salahnya dong jika kita mencoba untuk membuat Template sendiri, karena menurut saya dengan menggunakan Template Hasil sendiri, walaupun kelihatan nya kurang bagus, namun sangat memuaskan sekali.

Biar tidak banyak kesana kemari Langsung saja ini dia tutorial nya.

CARA CARA
sebelum anda membuat Template dari nol, menurut saya untuk editing nya lebih baik gunakan blog iseng saja, jangan edit template menggunakan Blog inti ya, jika sudah langsung saja ke langkah langkah nya.

1. Silahkan anda masuk ke halaman utama Blog anda
2. kemudian silahkan pilih menu Template/tema pada blog anda
3. kemudian pilih menu Edit HTML
4. jika editor Template nya sudah terbuka, silahkan anda hapus semua kode yang ada di kotak editor nya
5. lalu pasang kode di bawah ini di editor Template yang sudah di kosongkan 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='Nurlita Blog' 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[
/*
Blogger Template Style
Name       : Nama Template Anda
Date       : Tanggal Pembuatan Template Ini
Updated by : nurlita blog/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>


6. di atas merupakan kode dasar (rangka) dalam sebuah Template.
7. setelah kode di atas selesai di tempel kan, langkah selanjutnya kita akan membuat bagian luar nya atau bisa di sebut dengan Wrapper
8. silahkan tempel kan kode di bawah ini tepat di atas kode </style>

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

9. Lalu Tempel kan kode <div id='wrapper'> tepat di bawah kode <body>
10. lalu pasang kode </div> di atas kode </body>

Sampai Langkah ini anda sudah berhasil membuat Template Blog, untuk percobaan silahkan Simpan template Blog anda lalu Lihat Hasil nya.
Langkah selanjutnya kita membuat bagian Header dan Header ads
1. silahkan Pasang kode di bawah ini tepat di atas 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;}

2. kemudian pasang lagi kode di bawah ini tepat di bawah kode  <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>

3.setelah selesai membuat header blog, Langkah selanjutnya kita membuat Bagian Sidebar Blog dan bagian Postiang
4. silahkan anda tempel kan kode di bawa ini tepat di atas 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}

5. lalu pasang kode di bawah ini tepat di atas kode  <b:section class='main' id='main'>

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

6. lalu pasang kode <aside id='artikel-wrapper'> tepat di atas kode  <b:section class='main' id='main'>
7. lalu pasang kode </aside> tepat di atas kode </div>

Membuat Sidebar dan bagian Pos pun selesai, Langkah selanjutnya kita akan membuat bagian Footer blog, Cara nya adalah

1.silahkan pasang kode CSS di bawah ini tepat di atas 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}

2. lalu pasang kode di bawah ini tepat di atas kode </div>

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

3. Silahkan Save Template yang telah anda buat, kemudian lihat hasil nya. Langkah membuat Template Blog pun sudah beres, 

Namun yang harus anda ingat adalah langkah langkah di atas merupakan langkah awal dalam membuat Template Blog, jadi bisa di bilang Template nya masih dalam keadaan 50% ada beberapa hal lainnya yang harus di benahi supaya Template Blog anda benar benar sempurna, diantaranya adalah :

  1. Membuat Navigasi Untuk Template Blog anda
  2. Membuat Read more untuk Blog
  3. Membuat Related Post untuk Blog
  4. Mengatur Tampilan Blog agar lebih Responsive.
Nah Sekian dulu untuk Pembahasan Kali ini, semoga Artikel saya bermanfaat bagi anda yang mau mencoba untuk membuat Template Blog sendiri.


Berlangganan update artikel terbaru via email:

0 Response to "Cara Mudah Membuat Template Blog dari awal sampai jadi"

Post a Comment

Iklan Tengah Artikel 2