nb:maaf yak ane kaga ada gambarnya :/
sebelum memulai perlu membuat design seperti apa pada tempale anda.ya bisa dikira" sendiri kan :D masalahnya ts lagi laper nih pengen cepet" pulang :v
- Header
- Iklan Header
- Artikel
- Sidebar
- 3 Kolum Footer
Sebagaimana telah diketahui, bahwa sebuah template memiliki struktur HTML seperti biasa. Berikut HTML dasar untuk membuat sebuah halaman dasar pula.
<HTML>
<head>
</head>
<body>
</body>
</HTML>
Yang memiliki tanda <> merupakan tag. Pembentukan namanya yaitu “tag + nama didalam tanda <>”, jika ada kode seperti ini <p> dinamakan “tag p”.
Hampir sama dengan HTML biasa, untuk membuat sebuah template blog minimal anda harus mengerti HTML dasar, CSS dan kode-kode yang sudah ada dalam blogger. Nah, template dasar dari sebuah blog yaitu seperti berikut. Template dasar ini saya rancang 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 : Simple Fast 2014
DESIGNER : NOVAL BINTANG
DESIGNER : MAS BINTANG
URL : www.noval.web.id
*/
#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>
Nah, tempatkan kode diatas ditemplate editor yaa. Ganti semuanya dengan kode tersebut. Kemudian simpan template anda. Kemudian silahkan anda lihat template dasar tersebut. Pasti tidak berbentuk bukan? Hehe.
Dan untuk membuat template tersebut berukuran tertentu, kita misalkan 1000px. Maka anda harus membuat sebuah element untuk membungkus template tersebut. Anggap saja namanya #wrapper. Maka anda harus menambahkan CSS berikut tepat di atas ]]</b:skin>
Dan menambahkan kode berikut di bawah <body>
Dan untuk membuat template tersebut berukuran tertentu, kita misalkan 1000px. Maka anda harus membuat sebuah element untuk membungkus template tersebut. Anggap saja namanya #wrapper. Maka anda harus menambahkan CSS berikut tepat di atas ]]</b:skin>
#wrapper{width:1000px;margin:0 auto;overflow:hidden;background: #fff;}
Dan menambahkan kode berikut di bawah <body>
<div id='wrapper'>Dan menambahkan kode penutupnya di atas </body>
</div>
selebihnya silahkan dikembangkan sendiri :) makasi udah mau mampir ke blog saya :D
0 komentar:
Posting Komentar