Cara Membuat Template Blogger Dari Dasar

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAii_M6P_6M4AzEJk9uhUUqb8aiQUQZV3zolHUzqqSNI_DSofPmsicfwo1WYPoyv1NyqRTtitND1r8CXg1DzbTqYoRRpihC_N3syQ-VnUvkd8WCnDhZNNFa8SEoLLivYEjTxa-lonuYgQ/s1600/new-blogger-dashboard-video-tutorial.png

Situs Tampan - Kita para blogger pasti tahu apa itu template, bagi yang belum tahu template adalah suatu bentuk/rupa yang akan membaluti blog kita. Kita pasti sering dong

gonta ganti template punya

orang lain dan tanpa kita sadari mengganti credit si pembuatnya. Nah, disini anda akan merasakan capeknya membuat template yang berkualitas. Oke langsung saja kita mulai.

Pertama, kita buat rancangannya terlebih dahulu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBec60nqp_ee2SjSx5sJ2-TA5ulS6KaFrD69LMoUOzqPs8JPtUUha80MMpmCG_5c_FvpgIO4k7fN9Ovmt-q2eX-rXwY6-r3P_0IhwFTNFad4cDk7fk7zO5Da01r7x1ZqTdihkrYAt9KeBI/s1600/cara-membuat-template-blog-sendiri.JPG

Nanti templatenya akan berbentuk seperti itu.

Kedua, kita buka aplikasi notepad bawaan atau Notepad ++ (Download Di Disini)

Ketiga, copas seluruh kode dasar template dibawah

<?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 : 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,

str

ong,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:0p

x;}

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>

</body>

</HTML>

Keempat, mulai kita tambahkan css dan html untuk wrapper (Wrapper adalah sebuah kotak yang membungkus artikel sidebar dan apapun yang berada ditengah, biasanya berwarna putih), Ket : Kode CSS diletakkan di atas

CSS

#wrapper{

background:#FFF;

width:1024px;

overflow:hidden;

margin:0 auto;

}

HTML

1. Pasang ini dibagian paling atas (setelah <body>)

2. Pasang ini dibagian paing akhir (sebelum </body>)

</div>

Kelima, kita buat header, mulai dengan CSS lalu htmlnya. Ingat seperti pada no 4 bahwa kode css akan diletakkan di atas kode dan kode html diletakkan setelah pembungkus /

CSS

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

HTML

<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' type='Header'></b:widget>
</b:section>
<b:section class='header' id='header-ads' maxwidgets='1'/>
<div class='clear'/>
</header>

Keenam, kita mulai pada Sidebar & Artikel (yang berwarna merah adalah kode css gradient original, bisa anda ubah ubah sesuai keinginan)

CSS

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

HTML

<aside id='artikel-wrapper'>

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

<b:section class='main' id='main'>  <b:widget id='Blog1' locked='true'

title='Posti

ng Blog' type='Blog'></b:widget></b:section>

</aside>

Terkahir, kita mulai pada footer. Ingat, sesuai rancangan, kita buat yang 3 kolom (yang berwarna merah adalah kode css gradient original, bisa anda ubah ubah sesuai keinginan)

CSS

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

HTML

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

Setelah itu silakan di save as dengan ekstensi xml. Selamat anda sudah berhasil, saran saya silakan buat blog untuk demo agar blog utama anda tidak acak-acakan. Itulah dia sebuah template sederhana, jika anda menguasai css dan html dengan baik akan menghasilkan template yang ciamik walaupun tanpa javascript. Silakan berkomentar gan !

Ket :

showaddelement adalah kode untuk memunculkan tulisan tambah gadget atau add gadget, ubah mnenjadi no untuk menghilangkan

Bonus :