Cara membuat template blogger
1. Siapkan blog baru untuk memulai pembuatan template.
1. Siapkan blog baru untuk memulai pembuatan template.
2. Seperti biasa, masuk ke Template > Edit HTML
3. Kode dibawah ini adalah HTML dasar dalam pembuatan template.<HTML>
<head>
</head>
<body>
</body>
</HTML>
Itu adalah sebuah HTML dasar. Namun, untuk sebuah template, anda tidak
bisa hanya menggunakan HTML diatas, karena template diatas belum
mengandung CSS dan Kode-kode yang seharusnya sudah ada dalam
template. Template dasar dari sebuah blog yaitu seperti yang ada dibawah
ini. Template dasar ini sudah dirancang dengan CSS, meta tag yang
paling dasar dan hanya memiliki widget artikel saja.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='YOUR DESCRIPTION HERE' name='description'/>
<meta content='YOUR KEYWORD1, YOUR KEYWORD2, YOUR KEYWORD3' name='keywords'/>
</b:if>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link expr:title='data:blog.title + " - Atom"' href='/feeds/posts/default' rel='alternate' type='application/atom+xml'/>
<link href='https://plus.google.com/YOUR-GPLUS-ID' rel='author'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<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'/>
<!-- SEO Meta Tag -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' name='keywords'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='mas.bintangblog' property='fb:admins'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
<b:else/>
<meta content='index,follow' name='robots'/>
</b:if>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<!-- SEO Title Tag -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.isMobile'>
<title><data:blog.pageTitle/> Mobile Version</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<title>Archive for <data:blog.pageName/></title>
<meta content='noindex,nofollow,noarchive' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found</title>
<meta content='5;/' http-equiv='refresh'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.isMobile'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
</b:if>
</b:if>
</b:if>
<style type="text/css"><!-- /* <b:skin><![CDATA[
/*
NAME : Template Percobaan
DESIGNER : Masterbama
URL : www.masterbama.blogspot.com
*/
#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>
</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>
4. Sekarang coba Simpan dan lihat hasilnya.
5. Pasti hasilnya masih jelek, untuk membuatnya lebih rapi maka perlu
dibuat pembungkus pada artikel, sebut saja #Wrapper. Untuk membuatnya
anda harus memberikan CSS berikut tepat diatas ]]</b:skin>
#wrapper{width:1000px;margin:0 auto;overflow:hidden;background: #fff;}Dan memberikan kode dibawah ini tepat di bawah <body>
<div id='wrapper'>Jangan lupa untuk menambahkan penutupnya tepat diatas </body>
</div>6. Simpan template, dan sekarang lihat hasilnya.
selamat mencoba...
EmoticonEmoticon