Membuat template tidak segampang dan secepat yang anda kira, dan tidak terlalu sulit bagi anda yang sudah memiliki keahlian dalam membuatnya. Artikel ini bukanlah artikel yang pertama dan yang terakhir untuk membahas cara membuat sebuah template. Namun, artikel ini merupakan sebuah pendahuluan untuk membuat sebuah template. Mungkin saya akan membuat beberapa artikel lagi untuk menyempurnakan template percobaan yang akan dibuat nanti.
Dalam membuat template anda perlu membuat design seperti apa pada template anda. Pada tutorial saat ini, saya akan membuat design template yang Simple tentu saja saya tujukan untuk pemula. Ada beberapa bagian penting yang akan dibuat yaitu
- 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 Template
DESIGNER : Orka Library
URL : http://.orkalibrary.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>
Nah, tempatkan kode diatas ditemplate editor. Ganti semuanya dengan kode tersebut. Kemudian simpan template anda. Kemudian silahkan anda lihat template dasar tersebut. Pasti tidak berbentuk bukan? Ha ha. ( :
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>
Oke, nanti Orka lanjut ke tutorial berikutnya ya. Oh ya untuk aplikasinya kita gunakan NotePad_Java aplikasi yang mudah dan ringan di gunakan untuk Komputer yang spesifikasinya kecil. Silahkan download aplikasinya dibawah, jika ada kebingungan silakan komentar. jika orka bisa pasti di bantu.
Size : 7.1 Mb
Download : NotePad_Java
0 komentar:
Posting Komentar