Cara Membuat Template Blog Sendiri Lengkap Dan Detail

Cara Membuat Template Blog Sendiri Lengkap Dan Detail
Cara Membuat Template Blog Sendiri-Membuat template blog sendiri mungkin menjadi keinginan beberapa blogger, karena kadang kita menjadi lebih puas jika kita bisa membuat dan memakai template buatan kita sendiri. Ditambah jika kita share template kita dan hasilnya cukup bagus, kemudian banyak orang yang memakai, blog kita bisa jadi lebih banyak pengunjung dan juga mendapat backlink(jika memasang credit link).

Cara Membuat Template Blog Sendiri Lengkap Dan Detail
Backlink Reboza Sambirejo
Diatas kebanyakan backlink berasal dari template pertama buatan saya yaitu RBZ One. Itu saja baru 1 template, bayangkan jika sobat bisa membuat banyak template yang bagus.

Untuk itu disini saya akan mengajarkan cara membuat template blog sendiri secara urut melalui postingan blog ini.

Sebenarnya dalam pembuatan template ini tidak terlalu sulit, karena yang harus kita kuasai cukup html dan css saja itupun konsep dasarnya saja sudah cukup.

Langsung saja ke tutorial berikut, silahkan simak dengan sebaik-baiknya agar paham, dan jika masih belum paham bisa tanyakan di komentar.

Artikel belum diupdate mohon maaf, jika sempat akan saya update agar work

Cara Membuat Template Blog Sendiri

Pertama yang harus dipersiapkan dalam membuat template adalah kerangka. Kerangka yang akan saya pakai adalah kerangka schema org milik kompi ajaib yang sudah di share di blognya yang saya modifikasi sedikit.


Template yang akan kita buat yaitu template 2 kolom. Untuk susunan layout kurang lebih seperti berikut.

Cara Membuat Template Blog Sendiri Lengkap Dan Detail

Langsung ketutorial.

Pastikan sobat sudah mempunyai blog yang ada postinganya.

Silahkan masuk dashboard blog anda lalu pilih template>edit template

Hapus semua kode yang ada dikolom edit template dengan cara klik ctrl+a lalu delete


Kemudian pasang kode berikut pada kolom edit template.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:dir='data:blog.languageDirection'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <title>404: Page Not Found | <data:blog.title/></title>
    <b:else/>
        <title><data:blog.pageName/></title>
    </b:if>
</b:if>

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<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.url' rel='canonical'/>
<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'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silahkan baca artikel &quot; + data:blog.pageName + &quot; ini selengkapnya di &quot; + data:blog.title + &quot;&quot;' property='og:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle + &quot;Untuk membaca postingan-postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL Image here' property='og:image'/>
</b:if>
</b:if>
<meta content='kode id fb admin' property='fb:admins'/>
<meta content='kode id profil admin' property='fb:profile_id'/>

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[

*/]]></b:skin>
<style type='text/css'>

</style>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>

</style>
</b:if></b:if>

</head>
<body>

<b:section class='main' id='main'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>

&lt;!--</body>--&gt;&lt;/body&gt;
</HTML>


Penjelasan
cooming soon: penjelasan bagian-bagian kerangka blog


Setelah itu pasang kode css berikut sebelum ]]><b:skin/>
/*
Bagi anda yang mengerti dan blogger profesional pastinya tidak akan menghapus link ini. Membuat template ini tidak cukup 1 jam bro!
Blogger Template Style
Name       : Nama Template Anda
Date       : Tanggal Pembuatan Template Ini
Updated by : Rosyad/Namamu
*/

#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;}

Kode css diatas untuk yang ada didalam /*  sampai */ hanya berisi informasi, silahkan ganti sesuai dengan kata-kata dan data diri sobat.

Untuk penjelasan kode lainya yaitu seperti berikut.
.quickedit{display:none}  > menghilangkan tang dan obeng pada blog

body:
background: #eaea;   > warna background bisa anda ganti sesusai selera.
font-family: calibri;  > jenis font (untuk mengganti font akan dibahas dalam tutorial lanjutan)
color:#2c3e50;          > yaitu warna font secara keseluruhan

Untuk kode lain bisa anda pelajari sendiri atau searching di google.(namanya kode css)

Membuat Wrapper

Langkah selanjutnya yaitu membuat wrapper yaitu elemen pembungkus paling luar.

Pertama pasang kode css berikut diatas ]]><b:skin/>
#outer-wrapper{
background:#FFF;
width:1024px;
overflow:hidden;
margin:0 auto;
}

Kemudian kode berikut yaitu kode pemanggil kode css diatas, silahkan pasang dibwah <body>
<div id='outer-wrapper'>

Jangan lupa menutup elemen nya dengan memasang kode berikut sebelum/diatas &lt;!--</body>--&gt;&lt;/body&gt;
</div> 

Dalam kode html, setiap pembuka pasti ada penutupnya. Seperti jika kita memulai dengan awalan <div> maka akan ditutup dengan </div> ,  <head> dengan </head> dan sebagainya.

 

Membuat Header 


Setelah pembungkus paling luar(outer wrapper) selanjutnya kita akan memasang header atau kepalanya. Dalam template, header digunakan untuk menempatkan beberapa elemen seperti paling umum dan paling sering yaitu judul blog/logo blog, kotak pencarian, menu dan kotak iklan.

Pada tutorial kali ini kita akan membuat header yang isinya yaitu judul blog(h1) dan juga widget kotak iklan. Untuk judul blog kita juga bisa mengubahnya dengan gambar pada tataletak.

Cara pemasangan, silahkan tempatkan kode css berikut ini sebelum/diatas </style>

Setelah itu pasang kode berikut ini setelah/dibawah  <div id='outer-wrapper'>

Membuat Pembungkus Artikel (Artikel Wrapper)

Lanjut ke artikel wrapper. Tidak usah di jelaskan pasti semua juga sudah tau tentang artikel. Dan ini pembungkusnya.

Silahkan pasang kode css ini sebelum </style>

Kemudian simpan kode html ini dibawah </header>

Untuk penutupnya silahkan pasang dibawah </b:section>

 

Membuat Sidebar

Sidebar biasanya terletak di samping blog yang fungsinya untuk menempatkan beberapa widget.

Langkah:
Pertama pasang kode css berikut diatas </style>

lalu pasang kode html berikut diatas <div> paling bawah.
Kurang lebih seperti ini pemasanganya.
Cara Membuat Template Blog Sendiri Lengkap Dan Detail


 

Membuat Footer


Bagian kaki(footer) merupakan bagian paling bawah dalam sebuah kerangka blog. Bagian footer ini akan kita isi dengan credit link dan copy right.

Pasang kode css sebelum </style>.
#footer-wrapper{text-align:center;background:#fff;padding:20px 0;margin:auto;border-top:1px solid rgba(0,0,0,0.06);max-width:1024px;}
#footme{height:auto;padding:0 30px;margin:0 auto;overflow:hidden;color:#555;font-size:14px;font-weight:700;line-height:1.8}

kemudian pasang kode berikut sebelum &lt;!--</body>--&gt;&lt;/body&gt;
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter' role='contentinfo'>
<div class='credit'>
Copyright &#169; 2013. <a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> - All Rights Reserved<br/>
Template Created by <a href='#' target='_blank'>Reboza Sambirejo</a> - Proudly powered by <a href='http://www.blogger.com' target='_blank' title='Blogger'>Blogger</a>
</div>
</footer>

Untuk nama dan sebagainya silahkan sesuaikan sendiri.

Terakhir save template kemudian lihat. Maka kurang lebih tampilan akan seperti berikut.
Cara Membuat Template Blog Sendiri Lengkap Dan Detail


Sampai disini kita telah berhasil membuat kerangka template blog. Untuk tutorial selanjutnya masih dalam pengerjaan. Sambil menunggu, sobat bisa memahami kode-kode diatas agar sobat bisa benar-benar paham dan nantinya bisa membuat template buatan sobat sendiri.

Jika terdapat kode yang eror bisa di tanyakan di komentar.

Tutorial selanjutnya:

28 komentar

avatar

Nice artikel, kadang kita perlu niat untuk belajar

avatar

ternyata gini cara buatnya, bermanfaat nih

avatar

Iya gan harus ada niat jika benar" ingin membuat template agar nantinya bisa paham. thanks atas kunjunganya.

avatar

thanks, infonya mas, ternyata ada cara bikin template untuk blog sendiri.

avatar

ok. trmksh juga atas kunjunganya

avatar

ternyata buat template sendiri rumit ya -_-
apalah daya blog saya yang cuma pakek template orang lain :3 sake-xp.blogspot.com

avatar

ya bisa di bilang cukup rumit juga kalau belum dong bahasa pemrograman web nya. Saya sendiri juga template punya orang, hanya saja saya edit dikit.

avatar

kan uda jadi kerangkanya mas, tinggal bikin template sendiri dong ya?

Kunjungan balik mas kalau minat

avatar

Ya mas. Tinggal melanjutkan saja.

Ok mas sudah saya kunjungi balik artikel sobat lebih lengkap

avatar
This comment has been removed by the author.
avatar

template yang di pake blog ini apa ?

avatar

memang sebenarnya mau saya jadikan template premium. Tapi maaf sementara belum bisa dijual karena kodenya belum saya rapikan.

avatar

Mungkin beberapa minggu lagi akan saya launchingkan. Untuk saat ini masih tahap perbaikan.

avatar

Kira-kira tanggal berapa? dan harganya berapa ?

avatar

Keren mas bermanfaat bisa beljar otak atik ni =D

avatar

Ok thanks. Selamat mengotak-atik.

avatar

Belum tau soalnya akhir-akhir ini saya sibuk.

avatar

Sekarang aja min saya beli, cuma ke saya doang

avatar

Buat tutorial di youtube dong gan.. Cara buat template sendiri

avatar

Buat tutorial di youtube dong gan.. Cara buat template sendiri

avatar

Besok kalau sempat saya coba

avatar

html header & sidebar mana pak?? gak disediakan

avatar
This comment has been removed by the author.
avatar

bentar, lupa saya masukkin. Maaf

avatar

Gan perbaikin dunk bagian membuat header dan sidebar gak nongol codenya


EmoticonEmoticon