Membuat template sendiri adalah suatu keinginan yang dimiliki oleh seorang blogger. Dengan mencari sumber artikel kesana-kesini, namun yang dibagikan oleh (kebanyakan) mereka hanyalah "hasil jadi" alias tanpa penjelasan yang detil.
Oke, disini saya akan bagikan secara detil tentang cara membuat template Blogger sendiri. Cekidot.
#LANGKAH 1 - MEMBUAT STRUKTUR / MARKUP HTML
1. Siapkan Text Editor (Contoh: Notepad) Hal yang wajib untuk membuat template adalah deklarasi tipe document, dalam kasus ini adalah HTML, maka tulislah pada line (baris) pertama<!DOCTYPE html>.Contoh
<!DOCTYPE html>
Selanjutnya, buatlah tag root html yakni
<html>, dan tag lainnya.Contoh Root HTML
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
Markup diatas tidak akan diterima oleh Blogger, karena Blogger hanya mengizinkan setidaknya terdapat 1 (satu) buah skin (
b:skin atau b:templateskin) dan 1 buah widget, yakni widget utama (Widget Blog post).Agar dapat diterima ubah tag
<style> menjadi <b:skin>, tambahkan <![CDATA[ setelahnya. Serta ubah tag penutup </style> menjadi </b:skin> serta tambahkan penutup cdata ]]> sebelumnya. Lihat contoh!Untuk menambahkan widget, akan dibahas pada langkah selanjutnya.
Contoh penempatan b:skin
<!DOCTYPE html>
<html>
<head>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
</body>
</html>
<html>
<head>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
</body>
</html>
#LANGKAH 2 - MENAMBAHKAN TITLE, ERROR PAGE TITLE DAN META
Sebuah template harus mendeklarasikan bahasa kode / encoding, gunakan encoding UTF-8. Tulis<meta charset='UTF-8'/> dan tambahkan <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> tepat dibawah tag <head>.Untuk Title dan Error Page Title, gunakan atribut kondisional
cond='' pada tag <b:if>.Contoh kondisional
<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 charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<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 charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Title dan Error Page Title ini digunakan untuk penamaan pada index, contoh jika blog kamu dikunjungi pada halaman awal, maka index (akan tampil pada tab browser) yang muncul adalah nama blog kamu. Jika blog dikunjungi pada halaman error / halaman tidak ditemukan maka akan muncul pesan 404: Page Not Found + nama blog. Dan jika blog dikunjungi pada halaman statis atau item maka yang muncul adalah nama halaman atau judul item.
#LANGKAH 3 - SETTING LAYOUT PART 1
Langkah ini adalah untuk menentukan selektor layout yang dimana nanti akan diberi 'polesan' CSS untuk layout finalnya yang akan dibahas pada Setting Layout Part 2.Disini saya beri contoh layout dengan 4 blok, yaitu blok Header, Main, Sidebar dan Footer.
Untuk Header gunakan tag
<header>, sidebar gunakan <aside> dan footer gunakan <footer>. Untuk main gunakan tag alternatif <div> karena <article> berada didalam widget Blog.Contoh selektor
<!DOCTYPE html>
<html>
<head>
<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 charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<div class='outer'>
<header class='header'>
</header>
<div class='content'>
<div class='main-content'>
</div>
<aside class='sidebar'>
</aside>
</div> <!-- Akhir dari content -->
<footer class='footer'>
</footer>
</div>
<!-- Akhir dari outer -->
</body>
</html>
<html>
<head>
<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 charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<div class='outer'>
<header class='header'>
</header>
<div class='content'>
<div class='main-content'>
</div>
<aside class='sidebar'>
</aside>
</div> <!-- Akhir dari content -->
<footer class='footer'>
</footer>
</div>
<!-- Akhir dari outer -->
</body>
</html>
#LANGKAH 4 - MENAMBAHKAN SECTION WIDGET DAN WIDGET BLOG
Markup diatas hampir selesai, sekarang kita buat section untuk widget dan membuat widget utama, yaitu Blog.Untuk membuat section gunakan tag
<b:section>, sedangkan untuk widget adalah <b:widget>. Lihat contoh!Contoh Section
<b:section id='nama-id' class='nama-class (jika diperlukan)' showaddelement='yes/no' maxwidget='1' preferred='yes/no'>
</b:section>
</b:section>
Contoh Widget
<b:widget id='nama-id' locked='true/false' title='nama-title' visible='true/false' type='tipe-widget'>
</b:widget>
</b:widget>
Harap perhatikan, sebuah widget harus berada didalam section. Dan setiap tag harus diakhiri dengan penutupnya. Gunakan slash atau
/ diawal tag untuk menutup. Misalnya, tag pembuka div adalah <div> dan penutupnya adalah </div>. Jika ingin menambahkan atribut class dan/atau id, tempatkan pada tag pembuka. Misalnya, <div class='nama-class' id='nama-id'> isi konten </div>. Untuk nama class sebaiknya gunakan huruf kecil semua. Jika ingin menambahkan 2 (dua) class atau lebih, pisahkan dengan spasi.Berikut adalah contoh markup full.
Contoh Full
<!DOCTYPE html>
<html>
<head>
<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 charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<div class='outer'>
<header class='header'>
<b:section id='header' maxwidget='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Header' type='Header' visible='true'>
</b:widget>
</b:section>
</header>
<div class='content'>
<div class='main-content'>
<b:section id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog' type='Blog'>
</b:widget>
</b:section>
</div>
<aside class='sidebar'>
<b:section id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='HTML Widget' type='HTML' visible='true'>
</b:widget>
</b:section>
</aside>
</div> <!-- Akhir dari content -->
<footer class='footer'>
</footer>
</div>
<!-- Akhir dari outer -->
</body>
</html>
<html>
<head>
<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 charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<div class='outer'>
<header class='header'>
<b:section id='header' maxwidget='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Header' type='Header' visible='true'>
</b:widget>
</b:section>
</header>
<div class='content'>
<div class='main-content'>
<b:section id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog' type='Blog'>
</b:widget>
</b:section>
</div>
<aside class='sidebar'>
<b:section id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='HTML Widget' type='HTML' visible='true'>
</b:widget>
</b:section>
</aside>
</div> <!-- Akhir dari content -->
<footer class='footer'>
</footer>
</div>
<!-- Akhir dari outer -->
</body>
</html>
Tambahkan
<div style='clear:both'/> atau <div class='clear'/> tepat dibawah </aside> agar posting blog dan sidebar sejajar rapi dan memiliki tinggi atau height yang sama.Sampai disini markup tersebut (yang terakhir) sudah bisa dipakai dan dipasang di Blogger, namun tanpa 'polesan' CSS, dan tampilannya lumayan berantakan.
Langkah-langkah selanjutnya mengenai penambahan CSS, JavaScript, Navigation, dll. akan dibahas pada artikel selanjutnya, pelajari terlebih dahulu markup diatas, nanti jangan lupa balik lagi ya kesini untuk langkah selanjutnya. Bye...
_________________________
featured image source: emresupcin.com
featured image source: emresupcin.com
No comments:
Post a Comment