Hai semua, kali ini saya akan berbagi Tutorial Cara Membuat Template Blogger Sendiri. Meski saya balum pro dalam bidang ini alias masih newbie saya akan mencoba bebagi pengetahuan saya tentang template.
Sebelum itu ada sedikit penjelasan tentang Tema atau Template Blogger, baiklah simak penjelasan berikut.
Apa sih sebenarnya Tema atau Template Blog itu? Tema atau Template Blog itu adalah desain-desain halaman blog ataupun halaman website beserta seluruh komponennya baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web.
Template bisa juga anda artikan sebagai tema blog atau tampilan blog. Seperti yang anda lihat saat ini di blog denylistianto.com, bahwa terlihat tatanan gambar atau tampilan serta tulisan di layar monitor anda, itulah yang dinamakan template.
Lalu, apa funsinya? Fungsinya adalah memperindah tampilan blog dan juga membuat blog kita terlihat profesional.
Cukup sedikit penjelasan dari saya, mari kita mulai cara membuatnya.
Siapkan alat dan bahan, Seperti : Laptop, Blog, Text Editor (gunakan text editor yang free aja ya, biar templatnya berkah), dan jangan lupa sedia kopi dan makanan ringan biar gak cepat bosen.
Jika alat dan bahan di atas sudah ada, mari kita mulai.
Pertama, Buka text editor yang sudah terinstall atau bisa juga langsung di blogger.
Kedua, Buat komponen utama dari template, kalau belum tahu silahkan gunakan kode dibawah ini.
Ketiga, pasang Meta tag didalam template.
1. Cari kode <head>, lebih mudah mencari dengan CTRL + F.
2. Buat meta tag sendiri atau lebih mudah gunakan meta tag dibawah ini dan pastekan tepat di bawah <head>.
Keempat, moifikasi sedikit pada tampilan template atau gunakan kode berikut dan pastekan sebelum kode ]]><b:skin> atau </style>.
Kelima, Membuat Wrapper Pada Template.
1. Buat CSS Buat wrapper atau gunakan kode berikut ini dan pastekan sebelum kode ]]></b:skin> atau </style>.
2. Gunakan kode HTML berikut untuk memangil Kode CSS diatas.
Letakan HTML berikut tepat dibawah <body>.
Letakan HTML berikut tepat diatas </body>.
Nah, sekarang coba anda simpan template dan lihat hasilnya.
Sampai disini anda sudah bisa membuat template paling sederhana, baca juga part selanjutnya : Cara Membuat Template Blogger Sendiri Part 2. Sampai Jumpa.
Sebelum itu ada sedikit penjelasan tentang Tema atau Template Blogger, baiklah simak penjelasan berikut.
Apa sih sebenarnya Tema atau Template Blog itu? Tema atau Template Blog itu adalah desain-desain halaman blog ataupun halaman website beserta seluruh komponennya baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web.
Template bisa juga anda artikan sebagai tema blog atau tampilan blog. Seperti yang anda lihat saat ini di blog denylistianto.com, bahwa terlihat tatanan gambar atau tampilan serta tulisan di layar monitor anda, itulah yang dinamakan template.
Lalu, apa funsinya? Fungsinya adalah memperindah tampilan blog dan juga membuat blog kita terlihat profesional.
Cukup sedikit penjelasan dari saya, mari kita mulai cara membuatnya.
Cara Membuat Template Blogger Sendiri Part 1
Siapkan alat dan bahan, Seperti : Laptop, Blog, Text Editor (gunakan text editor yang free aja ya, biar templatnya berkah), dan jangan lupa sedia kopi dan makanan ringan biar gak cepat bosen.
Jika alat dan bahan di atas sudah ada, mari kita mulai.
Pertama, Buka text editor yang sudah terinstall atau bisa juga langsung di blogger.
Kedua, Buat komponen utama dari template, kalau belum tahu silahkan gunakan kode dibawah ini.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<b:skin>
<![CDATA[/*
Theme Name : Nama Template Anda
Theme Designer : Nama Anda
Thanks to : All supported
Special Thanks : Deny Listanto / www.denylistianto.com
*/
]]></b:skin>
<style type='text/css'>
</style>
</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>
Ketiga, pasang Meta tag didalam template.
1. Cari kode <head>, lebih mudah mencari dengan CTRL + F.
2. Buat meta tag sendiri atau lebih mudah gunakan meta tag dibawah ini dan pastekan tepat di bawah <head>.
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.page( DENYLISTIANTO.COM )quot;error_page"'>
<title>Page Not Found - <data:blog.title/></title>
<meta content='3;/' http-equiv='refresh'/>
</b:if>
<!-- [ Social Media meta tag ] -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<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 expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='en_US' property='og:locale'/>
<!-- Meta tags here -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.homepageUrl == data:blog.url'><meta expr:content='data:blog.title' name='keywords'/></b:if>
<b:if cond='data:blog.pageType == "item"'><meta expr:content='data:blog.pageName' name='keywords'/></b:if>
<meta content='xxxxxxx' name='Author'/>
<link href='https://plus.google.com/xxxxxxx' rel='author'/>
</b:if>
<meta content='xxxxxx' name='google-site-verification'/>
<meta content='xxxxxx' name='msvalidate.01'/>
<meta content='xxxxxx' name='alexaVerifyID'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
Keempat, moifikasi sedikit pada tampilan template atau gunakan kode berikut dan pastekan sebelum kode ]]><b:skin> atau </style>.
/* CSS Reset */
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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* Layout */
body {
background:#f6f9fc;
font-family:'Roboto',sans-serif;
font-size:16px;font-weight:400;
text-align:left;
color:#000;
}
a,a:link,a:visited {
color:#f44336;
text-decoration:none
}
a:hover,a:hover:visited {
color:#fd6458
}
.quickedit {
display:none;
}Kelima, Membuat Wrapper Pada Template.
1. Buat CSS Buat wrapper atau gunakan kode berikut ini dan pastekan sebelum kode ]]></b:skin> atau </style>.
/* Template Wrapper */
#wrapper{position:relative;background:#fff;max-width:970px;margin:auto;padding:20px;overflow:hidden}
2. Gunakan kode HTML berikut untuk memangil Kode CSS diatas.
Letakan HTML berikut tepat dibawah <body>.
<div id='wrapper'>
Letakan HTML berikut tepat diatas </body>.
</div>
Nah, sekarang coba anda simpan template dan lihat hasilnya.
Sampai disini anda sudah bisa membuat template paling sederhana, baca juga part selanjutnya : Cara Membuat Template Blogger Sendiri Part 2. Sampai Jumpa.
