Nurhamka Blog Belajar Ngeblog dari sekarang bersama Kami

Cara Membuat Template Blog dari awal sampai Jadi

 

Cara Membuat Template Blog Dari awal Sampai jadi – Template Blog merupakan sebuah Elemen penting dalam Blog, Karena Template Blog merupakan sebuah hal yang harus di perhatikan supaya Blog nya terlihat Menarik dan keren.

Walaupun di luar sana banyak yang menyediakan Template Blog baik itu Gratisan maupun Berbayar, namun tidak ada salah nya jika anda membuat Template Blog sendiri, karena menurut saya, jika Template Blog nya hasil buatan sendiri, akan lebih memuaskan di bandingkan Template hasil orang lain. Nah Jika anda berencana untuk Membuat Template Sendiri, Silahkan Baca Tutorial Lengkap nya Di bawah ini

 

CARA CARA

1.Silahkan anda Masuk ke halaman utama Blog anda

2. Kemudian Pilih Menu Template/Tema Pada Blog anda

3. setelah itu Pilih Edit Template

4. Setelah anda masuk di editor Template nya Silahkan anda Hapus semua Kode yang ada di kolom tersebut, jangan ada yang tersisa.

5. Namun sebelum anda menghapus semua kode nya, saya sarankan untuk cadangkan dulu Template sebelumnya yang anda gunakan.

6. nah setelah anda menghapus semua kode nya Silahkan Tempelkan kode di bawah ini

<?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=’NURHAMKA 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[
/*

Name : Nama Template Anda
Date : Tanggal Pembuatan Template Ini
Updated by : Nurhamka/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>

7. Nah di atas adalah Script dasar dalam pembuatan Template, Langkah selanjutnya kita akan membuat bagian wrapper nya

8. Silahkan Tempel kan  kode di bawah ini di atas kode </style>

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

9. kemudian Tempel kan kode <div id=’wrapper’> di bawah kode <body>

10. kemudian tempelkan kode </div> di atas kode </body>

11. Langkah selanjutnya kita akan membuat bagian header

12. silahkan tempel kan kode di bawah ini 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;}

13. kemudian letakan kode di bawah 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>

14. kemudian silahkan anda pasang kode di bawah 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}

15. letakan 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>

16.kemudian pasang kode <aside id=’artikel-wrapper’> di atas kode <b:section class=’main’ id=’main’>

17. terakhir pasang kode </aside> di atas kode </div> terakhir

18.  langkah terakhir kita akan membuat bagian Footer

19. silahkan pasang kode di bawah 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}

20. Tempelkan 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>

21. Kemudian Silahkan Simpan Template nya, kemudian Lihat Hasil nya.

 

Sampai disini membuat Template sederhana pun sudah Jadi. Namun ada beberapa Hal yang harus anda benahi, diantaranya adalah:

  1. Membuat Menu navigasi
  2. membuat Auto Readmore
  3. membuat artikel terkait
  4. dan membuat Template menjadi Responsive

Insya allah untuk setting template yang lainnya akan saya bahas di artikel selanjutnya ya. selamat mencoba membuat Template sendiri.


Add a Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *