Rabu, 24 September 2014

Cara Membuat Template Blog Sendiri

Cara Membuat Template Blogger - Hi sobat blogger, kali ini saya akan membagikan sebuah artikel yaitu Cara Membuat Template Blog. Sebenarnya cara ini bukan saya yang membuatnya, tetapi saya hanya re-share Tutorial yang diberikan oleh Mas Noval Bintang, tepatnya pada artikel Cara Mandiri Membuat Template Blog Sendiri.

Seperti yang kita ketahui, template merupakan dasar dari blog. Tanpa template, blog tidak akan bisa ditampilkan. Itulah pentingnya sebuah template bagi blog.

Cara Membuat Template Blog Sendiri

Membuat template sebenarnya sangat susah dan membutuhkan waktu yang lama. Namun, jika sudah terbiasa maka akan lebih mudah dan cepat untuk membuatnya. Jadi jangan salah jika beberapa orang tidak membagikan templatenya secara gratis namun dijual sebagai template premium.

Dalam membuat template anda juga perlu mendesign seperti apa template yang akan anda buat. Pada tutorial ini anda akan belajar membuat template dari design template yang sudah ada yaitu "Fast Simple 2014" Pada template ini anda akan membuat dasar-dasar dari template seperti:
  • Header
  • Artikel
  • Sidebar
  • Footer
Keempat itu menurut saya adalah dasar dari template. Pada artikel ini kita akan membuat patokan dari templatenya dulu, untuk Header, Sidebar, dan Footer akan dibahas pada artikel selanjutnya.

Cara Membuat Template Blogger

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 + &quot; - Atom&quot;' 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 + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' 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 != &quot;&quot;'>
<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 == &quot;item&quot;'>
<meta content='mas.bintangblog' property='fb:admins'/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<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 == &quot;archive&quot;'>
<title>Archive for <data:blog.pageName/></title>
<meta content='noindex,nofollow,noarchive' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found</title>
<meta content='5;/' http-equiv='refresh'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <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.

Template ini masih sangat sederhana dan belum memiliki Header, Footer, ataupun Sidebar. Untuk tutorial selanjutnya akan segera saya post. Dibawah ini adalah lanjutan dari Tutorial ini :
Cara Membuat Header
- Cara Membuat Sidebar
- Cara Membuat Dropdown Menu
- Cara Membuat Footer


Source : http://www.noval.web.id/2014/01/cara-mandiri-membuat-template-blog.html
Cara Membuat Template Blog Sendiri
4/ 5
Oleh