Ini kerangka template yang bisa anda modif sesuka hati,silahkan isi gaya teks/font sesuai selera anda dan warna nya juga silahkan isi dengan sesuai selera.
Copy semua nya dan pastekan dulu di notepad ,baru anda edit/modifikasi:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<b:if cond='data:blog.pageType in {"index"} and data:blog.homepageUrl == data:blog.url'>
<meta expr:content='data:blog.title' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType in {"item","static_page"}'>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType in {"archive"} or data:blog.searchLabel or data:blog.searchQuery'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'>&l;ttitle><data:blog.pageTitle/> - All Post</title></b:if></b:if>
<style type="text/css"><!-- /*<b:skin><![CDATA[
]]>
]]></b:skin>
<style type='text/css'>
/* RESET */
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, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after {content: ”;content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
body {background-color: #cab894;background-position: center center;}
a:link {font-family: 'isi dengan gaya font sesuai selera', serif; font-size: 15px; color:#warna;}
a:hover {color: #warna;}
a {color: #warna;}
#wrapper {background: #warna; width: 90%; padding: 20px; margin: 20px auto;}
#header-wrapper {background:#warna; width: 100%; height:auto; margin: 0 auto; border:1px solid #warna;}
.header {text-align:center}
#menu {width: 100%; background-color: #warna; height: 35px; text-transform: uppercase;}
#menu ul {list-style-type: none; padding: 0;}
#menu ul li {float: left;}
#menu ul li:nth-child(1){background-color:#warna;}
#menu ul li:nth-child(2){background-color:#warna;}
#menu ul li:nth-child(3){background-color:#warna;}
#menu ul li:nth-child(4){background-color:#warna;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px; text-decoration:none; color:#warna;}
#menu ul li a:hover {color: #warna; background: #warna;}
#content-wrapper {background: transparent; width:65%; float:left; border:1px solid #warna; margin:10px 0;}
#sidebar-wrapper {background: transparent; width:30%; float:right; border:1px solid #warna; margin:10px 0;}
#footer-wrapper {background:transparent; width:100%; border:1px solid #warna; margin:10px 0;}
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
#blog-pager-newer-link {float: left;}
#blog-pager-older-link {float: right;}
#blog-pager {text-align: center;margin: 20px 0px 0px 1px;}
.status-msg-wrap{font-size:110%;width:90%;margin:10px auto;position:relative}
.status-msg-border{border:1px solid #warna;filter:alpha(opacity=40);-moz-opacity:.4;opacity:.4;width:100%;position:relative}
.status-msg-bg{background-color:#warna;opacity:.8;filter:alpha(opacity=30);-moz-opacity:.8;width:100%;position:relative;z-index:1}
.status-msg-body{text-align:center;padding:.3em 0;width:100%;position:absolute;z-index:4}
.status-msg-hidden{visibility:hidden;padding:.3em 0}
.status-msg-wrap a{padding-left:.4em;text-decoration:underline}
</style>
<!--<head/>-->
<body>
<div id='wrapper'>
<header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='judul (Header)' type='Header'></b:widget>
</b:section>
</header>
<nav id='menu'>
<ul>
<li><a href="Isi dengan url blog/web anda">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
</ul>
</nav>
<div class='clearfix'/>
<aside id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</aside>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
<div class='clearfix'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'></b:section>
</footer>
</div>
<!--</body>-->
</HTML>
Kalau untuk warna di sini sudah saya siapkan beberapa warna:
red = #d81111
black = #000000
silver = #c0c0c0
gray = #8000000
white = #ffffff
maroon = #800000
purple #800080
fuchsia = #ff00ff
green = #008000
lime = #00ff00
olive = #808000
yellow = #ffff00
blue = #0000ff
aqua = #00ffff
navy #000080
teal = #008080
black = #000000
silver = #c0c0c0
gray = #8000000
white = #ffffff
maroon = #800000
purple #800080
fuchsia = #ff00ff
green = #008000
lime = #00ff00
olive = #808000
yellow = #ffff00
blue = #0000ff
aqua = #00ffff
navy #000080
teal = #008080
Kalau untuk ukuran width/lebar dan ukuran height/tinggi lebih baik segitu aja jangan di rubah.
Tapi kalau anda mau merubahnya silahkan ,rubah sesuai selera.
Kalau mau menambahkan widget seperti "popular post nya,ada di bawah ini :
Membuat popular post bergambar
Langkah pertama:
1.Masuk ke blogger
2.Pilih Template → Edit HTML
3.copy kode di bawah lalu pastekan di atas kode </style>
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}
.PopularPosts ul{list-style:none;font-family:'Oswald',Sans-Serif;font-size:13px;color:#919392;margin:.5em 0}
.PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0; border: 1px solid silver;padding: 2px;}
.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear; font-family: Open Sans;}
.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear; border-radius: 10%;font-size: 18px; padding: 5px;}
.PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab; border-bottom:1px solid #EFEFEF;transition:all .5s linear;}
PopularPosts ul li:last-child{border-bottom:none;}
.PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;}
.PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;}
.PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;}
.PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;}
.PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear; font-family: Open Sans;}
.PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}
Save/simpan template
Langkah kedua:
1.Pilih Tata Letak
2.Tambahkan Gadget → Entri Popular
3.Klik save/simpan
Keterangan kalau popular post nya ingin ada gambar nya ceklist di bagian tumbnail gambar dan kalau tidak ingin ada gambar nya maka jangan di ceklis di bagian tumbnail gambar nya, contoh seperti gambar di bawah ini:
Kalau sobat mau yang instan,banyak situs-situs penyedia template gratis/berbayar contoh nya seperti di:
Sora templates,Arlina,dan masih banyak lagi.