Cara Membuat Template Blog Sendiri- Membuat template blog sendiri tentu menjadi keinginan beberapa blogger pemula seperti saya ini, karena kita menjadi lebih puas jika kita bisa membuat dan memakai template buatan kita sendiri.
Terlebih lagi 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).
Para blogger yang canggih dan sudah terkenal mereka mudah mendapatkan backlink kebanyakan backlink berasal dari template buatannya.Bayangkan saja, jika kita juga bisa membuat template seperti mereka dan template kita banyak digunakan oleh orang lain, tentu blog kita akan selalu dibanjiri dengan ratusan bahkan ribuan backlink.
Baca Juga : Cara Membuat Related Post Keren Dibawah Artikel
Sebenarnya dalam pembuatan template lumayan sulit, karena kita harus dituntup menguasai Code html dan css, itupun baru konsep dasarnya saja.
Langsung saja ke tutorial berikut, silahkan simak dengan sebaik-baiknya agar paham, dan jika masih belum paham bisa tanyakan di komentar.
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.
Tentunya sobat sudah mempunyai blog yang ada postinganya. Silahkan masuk ke 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 == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<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 + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<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'/>
<b:if cond='data:blog.pageType == "item"'>
<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 == "item"'>
<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='"Silahkan baca artikel " + data:blog.pageName + " ini selengkapnya di " + data:blog.title + ""' 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='"Silahkan kunjungi " + data:blog.pageTitle + "Untuk membaca postingan-postingan menarik."' 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'/>
<div type="text/css">
<!-- /*<b:skin><![CDATA[
*/]]></b:skin>
<div type='text/css'>
</div>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div type='text/css'>
</div>
</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>
<!--</body>--></body>
</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} > Untu menyembunyikan 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)
Cara Membuat Wrapper
Langkah selanjutnya yaitu membuat wrapper yaitu elemen pembungkus template 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 atau diatas <!--</body>--></body>
</div>
Catatan Penting :
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.
Cara 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 </div> 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 </div> Kemudian simpan kode html ini dibawah </header> Untuk penutupnya silahkan pasang dibawah </b:section>
Cara Membuat Sidebar
Sidebar biasanya terletak di samping blog yang fungsinya untuk menempatkan beberapa widget. Langkah yang harus dilakukan adalah:
Pertama pasang kode css berikut diatas </div> kemudian pasang kode html berikut diatas <div> paling bawah. Kurang lebih seperti ini pemasanganya.
Cara 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 dibawah ini sebelum code </div>.
#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 code <!--</body>--></body>
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter' role='contentinfo'>
<div class='credit'>
Copyright © 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'>Kang Ihsan</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.