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

Artikel Terkait

Cara Membuat Template Blog Sendiri
4/ 5
Oleh

10 komentar

24 September 2014 19.53 delete

Kalau tutorialnya asli dari Mas Jamal, saya pasti lebih tertarik untuk liat yang selanjutnya.

Btw, kalau kita ngajarin buat template gitu, tapi udah langsung kasih hasil yang udah jadi apa efektif yaa?
Saya malah khawatir yang baca sulit untuk praktek dari nol. Menurut saya aja sih. ^_^

Reply
avatar
27 September 2014 16.06 delete

Wah,,,,nggak pegel tuh nulis cara membuat header, sidebar, dan masih banyak lagi...
Salut ama masterbama

Reply
avatar
27 September 2014 22.12 delete

Sepertinya praktek dari nol lebih susah gan. Mending langsung praktek biasa aja seperti tutorial ini, nanti pasti pembaca akan berusaha mengembangkan template buatannya, dan pasti mereka juga akan tau dasar-dasar dari template :D

Reply
avatar
28 September 2014 07.39 delete Komentar ini telah dihapus oleh administrator blog.
avatar
11 Maret 2016 20.11 delete

model ky gini udah responsive blom mas templatenya? Trus kalau blom gmn cr biar jd responsive. mksh.

Reply
avatar
12 September 2016 09.27 delete

Saya setuju dengan mas chaidir.

Kalau dikasih matengan (Tinggalcopy paste kode) Kendalanya jadi sulit ngerti. Ujung-ujungnya setelah copy paste ya bingung mau ngapain lagi.

Saya baru belajar membuat template meski kenal kode sudah lumayan lama, tapi sekadar kenal, baru-baru ini saja sedikit ngerti.
Syukur, template yang saya buat sudah jadi meski belum bagus juga.
Agar nggak lupa, (karena ini kode yang rupanya beraneka ragam dan fungsinya yang macam-macam, cara yang saya lakukan saya tulis ulang jadi artikel panduan membuat template) selain berbagi ilmu (nggak sekadar berbagi kode untuk copy paste) agar saya juga nggak lupa jika ingin mengulang membuat template lagi.
Mungkin sekadar berbagi, ini artikel yang saya buat.
http://www.ganteng.id/2016/08/panduan-membuat-template-blog-sendiri.html

Ohya, saya mohon maaf mas jamal karena mencantumkan link. Jika kurang berkenan, komentar ini bisa tidak dipublish atau dihapus mas.
terima kasih dan salam kenal.

Reply
avatar
23 September 2016 11.44 delete

Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
Jika ya, silahkan kunjungi website ini www.kbagi.com untuk info selengkapnya.

Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

Reply
avatar

Mohon masukkan saran / kritikan Anda. Atau tanyakan sesuatu yang tidak Anda pahami. Free promosi asal sopan.