Desain template Blog
Hai kembali lagi bersama saya, kalau bosan dengan saya silahkan click close di tab anda ya hehe. Tapi semoga anda menyayangkan jika anda benar-benar mengklik tombol close tersebut. Karena di kesempatan kali ini saya ingin membuat tutorial bagaimana cara untuk membuat template blogspot secara mandiri walaupun akan saya bimbing untuk saat ini.
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 seperti template yang baru saja saya berikan gratis, “Fast Simple 2014”. Di template tersebut 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 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>
#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 kita lanjut ke tutorial berikutnya ya.
Selanjutnya :
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 seperti template yang baru saja saya berikan gratis, “Fast Simple 2014”. Di template tersebut 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 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>
#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 kita lanjut ke tutorial berikutnya ya.
Selanjutnya :
Category: Artikel Umum
0 komentar