Kapan hari ada yang meminta dibikinin tutorial bikin template Ganteng id.
Gila, kayak sudah pinter saja ada yang minta bikinin tutorial bikin template segala?
[Padahal yang minta bikinin cuman 1 orang]
Tapi toh ya tetap harus dibikinin.
Seperti tujuan awal blog ini,
Belajar Ganteng Ngeblog Bareng
Intinya, ya meski saya yang bikin tutorialnya. Kita masih sama-sama belajar ya sob!
Siapa tahu kita bisa diskusi di kolom komentar?
Siapa tahu lagi ada master template yang nyasar kayak Mas Sugeng atau Mas Kolis atau Mbak Arlina buat ngasih ilmu tambahan di kolom komentar?
Siapa tahu?
Ngomong-ngomong, kalau mau lihat template yang saya desain sobat bisa baca Template Personal Track.
Sebenarnya tutorial membuat template blog sendiri sudah banyak bertebaran di pasar.
Sayangnya, kebanyakan hanya mengajari kita hal instan. sekadar copy-paste tanpa memberikan penjelasan-penjelasannya.
Padahal kan butuh.
Orang yang nggak tahu ilmunya kan bingung mau jalan kemana, iya nggak sob?
Maka dari itu, saya berniat bukan hanya sekadar memberikan kode untuk dicopy paste saja.
Setidaknya kita harus sama-sama belajar, biar sama-sama ngerti.
Kapan mulainya nih?
Oke oke.... kita mulai saja sekarang.
Kalau bisa sobat nyari cemilan dulu sama kopi atau teh atau susu gitu... Karena ini pasti lama.
Seriusan! Saya bikin template blog pertama saja butuh hampir dua minggu kalau tidak salah (itu juga masih jelek)
Tapi kalau sudah ngerti memang jadi sedikit lebih cepat waktunya (Meski masih saja jelek)
Kalau bisa, sobat sedikit belajar dulu soal CSS HTML sampai Javascript. Biar lebih cepat nangkap penjelasannya! Maklum, saya bukan master yang jago menjelaskan.
Pertama, saya akan berikan dulu daftar isinya!
Daftar Isi
- Struktur Awal Template
- Menu Navigasi
- Tampilan Header Populer
- Tampilan Posting
- Tampilan Komentar
- Pengaturan Font
- Penambahan Widget [Ad Gadget] Di bawah Posting dan Footer
- Widget Populer
- Optimasi SEO
- Template Responsive
Pada tutorial kali ini kita akan menyelesaikan tahap pertama lebih dulu.
Struktur Awal Template
Sebenarnya, saya sedikit bingung harus menyebutnya apa.
Jadi, kita sepakati saja kalau tampilan di bawah ini merupakan struktur awal template.
Gimana? Setuju? Jangan ada yang protes! Nurut saja!
Awalnya, kita akan buat struktur template standar seperti di atas.
Ada outer-wrapper, header, posting/content, sidebar, lalu footer.
Untuk memulainya, sobat bisa masuk Blogger
Sobat bikin blog baru yang diberi nama terserah sobat, alamat website terserah sobat, dan template blog terserah sobat juga.
Intinya, saya mau sobat sudah sampai di tahap edit template seperti screenshot di bawah.
Kemudian masuk Edit HTML dan sobat akan disajikan dengan kode template bawaan blogger seperti tampilan di bawah.
Hapus semua kodenya, dengan menekan [Ctrl+A] Lalu tekan Backspace.
Lalu copy kode berikut untuk menggantikannya.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML lang='id'>
<head>
<b:include data='blog' name='all-head-content'/>
<meta charset='UTF-8'/>
<meta content='240' http-equiv='refresh'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='no-store' http-equiv='Cache-Control'/>
<title><data:blog.title/> </title>
<style type="text/css"><!-- /*<b:skin><![CDATA[
]]></b:skin>
<style type='text/css'>
/*
Name : Nama Blog
Release Date : Tanggal Terbit
Design by : Nama sobat
Credit : www.ganteng.id (Kalau bisa jangan dihapus untuk menghormati repotnya membuat tutorial kali ini)
*/
/* 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, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after {content: ”;content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
body {background-color: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db; line-height: 1.5 em;text-decoration:none}
a:hover {font-family: 'PT Serif Caption', serif; font-size: 15px; color: #4d4544; line-height: 1.5 em;}
a {font-family: 'PT Serif Caption', serif; font-size: 15px; color: #3094db; line-height: 1.5 em;}
</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>
<!DOCTYPE html>
<HTML lang='id'>
<head>
<b:include data='blog' name='all-head-content'/>
<meta charset='UTF-8'/>
<meta content='240' http-equiv='refresh'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='no-store' http-equiv='Cache-Control'/>
<title><data:blog.title/> </title>
<style type="text/css"><!-- /*<b:skin><![CDATA[
]]></b:skin>
<style type='text/css'>
/*
Name : Nama Blog
Release Date : Tanggal Terbit
Design by : Nama sobat
Credit : www.ganteng.id (Kalau bisa jangan dihapus untuk menghormati repotnya membuat tutorial kali ini)
*/
/* 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, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after {content: ”;content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
body {background-color: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db; line-height: 1.5 em;text-decoration:none}
a:hover {font-family: 'PT Serif Caption', serif; font-size: 15px; color: #4d4544; line-height: 1.5 em;}
a {font-family: 'PT Serif Caption', serif; font-size: 15px; color: #3094db; line-height: 1.5 em;}
</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>
Coba simpan dan lihat tampilannya melalui preview template atau langsung pada view blog.
Tampilannya akan seperti berikut. Karena belum kita buat strukturnya.
Sebelum lanjut pada pembuatan struktur, akan saya jelaskan beberapa poin kode di atas.
Kita mulai dari kode yang berwarna merah.
Ini untuk sekadar tau saja, jangan dibuat pusing-pusing.
Pasti sobat pernah melihat penulisan kode di atas yang mirip depannya, tapi berbeda dan lebih panjang ya?
Apa bedanya?
Yang pasti, perbedaannya kode di atas mengurangi error blog sobat.
Coba saja dicheck,
Beikut ini tampilan error blog dengan kode merah di atas.
Sementara ini dengan kode yang berbeda dan lebih panjang (ex. Kode bawaan blogger)
Kalau dijabarkan akan panjang, singkatnya.
XML itu merupakan bahasa markup yang mampu menyimpan data-data. Selain XML masih banyak macam lainnya. Sobat bisa belajar sendiri.
Untuk Doctype, itu merupakan deklarasi untuk mengidentifikasi dokumen HTML
Lalu, untuk lang='id', itu seperti sebuah penjelasan kalau blog sobat berisi konten bahasa Indonesia.
Sobat juga melihat kode <meta charset='UTF-8'/>
Meski nampak menyebabkan error, meski juga bersifat optional (boleh ditambahkan atau tidak) dan saya belum berhasil mengetahui solusi untuk mengatasinya. Meta tag satu ini saya anjurkan tetap sobat gunakan.
Mengapa?
Meta satu ini berfungsi untuk menerjemahkan bit-bit dalam HTML menjadi karakter.
Jika tidak digunakan, web browser akan berusaha menebak-nebak karakternya. Umumnya, web-browser modern menggunakan karakter utf-8 sebagai karakter default.
Namanya juga nebak-nebak, kalau nebaknya salah kan bisa berantakan.
Lalu <meta content='no-store' http-equiv='Cache-Control'/> ini juga saya gunakan meski masih belum bisa mengatasi error htmlnya.
Mengapa harus dipakai?
Sobat tahu, kalau browser sering secara otomatis menyimpan cache blog/website sobat. Sayangnya, penyimpanan tersebut bisa tidak update.
Jika website atau blog sobat dibuka lagi hanya akan tampil halaman yang lama. Padahal sobat sudah mengapdet artikel. Kan sayang?
Nah, meta satu ini fungsinya untuk mencegah kejadian seperti itu.
Selanjutnya adalah <meta content='240' http-equiv='refresh'/> yang berfungsi untuk merefresh blog sobat ketika sedang dibuka.
Mengapa harus demikian, karena sewaktu-waktu sobat bisa mengupdate blog dan konten sobat. Jadi si pembaca bisa langsung update.
Sobat lihat angka 240. Itu pengaturan yang saya terapkan dalam hitungan detik.
Kebanyakan memakai 5 detik. Tapi, menurut saya itu mengganggu pembaca karena setiap 5 detik harus refresh. Karena pembaca sering membuka tab browser lebih dari satu. Ketika membuka yang lain dan ingin kembali ke blog sobat harus menunggu loading blog sobat lagi. Iya kalau loadingnya cepat.
Memang pageview sobat akan bertambah. Tapi kan kasihan kuota data pembaca.
Nggak semua pembaca sobat itu banjir kuota, bukan?
Sedangkan untuk meta berikut, <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Bisa digunakan untuk membantu menjadikan tampilan website sobat responsive.
Untuk tag titlenya masih saya berikan kode yang sederhana dan belum dioptimasi secara SEO friendly.
<title><data:blog.title/> </title>
Karena kita tidak sedang membahas topik optimasi SEO. Jadi jangan dicampur aduk dulu.
Sobat yang sering melakukan edit template pasti heran saat melihat tampilan berikut.
<style type="text/css"><!-- /*<b:skin><![CDATA[
]]></b:skin>
]]></b:skin>
Saya tambahkan embel-embel tersebut untuk menghilangkan css.bundle (Sebuah kode bawaan blogger yang sering mengganggu kecepatan loading blog)
Kebanyakan penulisannya seperti ini.
<b:skin><![CDATA[
{Kode CSS}
]]></b:skin>
{Kode CSS}
]]></b:skin>
Pada template yang saya buat, kode CSS saya letakkan di atas </head> dengan diapit kode berikut.
<style type='text/css'>
{Kode CSS}
</style>
{Kode CSS}
</style>
Selain faktor kecepatan, saya pernah mencoba meletakkan diantara kode <b:skin> dan <Style>.
Saya merasa, pemanggilan kode CSS nya lebih terjamin muncul atau tampil jika diapit menggunakan <Style>
Selanjutnya, saya akan menjelaskan tentang penggunaan CSS Reset.
Sobat pasti melihat kode CSS setelah tulisan /*Reset*/
CSS Reset digunakan untuk menyamakan tampilan jika dibuka menggunakan browser berbeda.
Sebagai contoh, bisa saja ketika membuka di internet ekxplorer tampilan blog sobat tidak seperti yang diharapkan. Atau berbeda dengan tampilan aslinya.
Disitulah peran CSS reset dapat membuat tampilannya menjadi terlihat sama di semua browser.
Sementara untuk penggunaan kode
<!--</body>-->
Itu digunakan untuk meringankan loading blog yang disebabkan oleh widget bawaan blogger. Seperti adanya Javascript pada Google profile yang muncul meski tidak memasangnya.
Resikonya, tampilan blog bisa berantakan, jadinya butuh kenjelimetan untuk menyesuaikannya.
Beruntung, tampilan template blog saya aman-aman saja.
Sekarang kita mulai buat struktur blognya.
Saya akan menggunakan elemen dasar seperti
- Outer-wrapper / Wrapper (Saya memakai wrapper, sobat terserah. Ini hanya untuk wadah)
- Header-wrapper
- Content-wrapper
- Sidebar-wrapper
- Footer-wrapper
<div id='wrapper'>
<header id='header-wrapper'></header>
<aside id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</aside>
<aside id='sidebar-wrapper'>
</aside>
<footer id='footer-wrapper'>
</footer>
</div>
<header id='header-wrapper'></header>
<aside id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</aside>
<aside id='sidebar-wrapper'>
</aside>
<footer id='footer-wrapper'>
</footer>
</div>
Kode html tersebut diletakkan di antara <body> dengan <!--</body>-->
Tapi, pemanggilan dengan kode html tersebut belum banyak memberikan dampak.
Masih harus diberikan tambahan CSS dan kode pemanggilan widget.
Untuk widget header, tambahkan kode berikut antara <header id='header-wrapper'> dengan </header>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Ganteng id (Header)' type='Header'></b:widget>
</b:section>
<b:widget id='Header1' locked='true' title='Ganteng id (Header)' type='Header'></b:widget>
</b:section>
Untuk sidebar-wrapper, letakkan kode berikut
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
antara kode <aside id='sidebar-wrapper'> dengan </aside>
Sementara untuk footer-wrapper, letakkan kode berikut
<b:section class='footer' id='footer' showaddelement='yes'></b:section>
antara kode <footer id='footer-wrapper'> dengan </footer>
Maka, jadinya kode keseluruhan akan jadi seperti ini.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML lang='id'>
<head>
<b:include data='blog' name='all-head-content'/>
<meta charset='UTF-8'/>
<meta content='240' http-equiv='refresh'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='no-store' http-equiv='Cache-Control'/>
<title><data:blog.title/> </title>
<style type="text/css"><!-- /*<b:skin><![CDATA[
]]></b:skin>
<style type='text/css'>
/*
Name : Nama Blog
Release Date : Tanggal Terbit
Design by : Nama sobat
Credit : www.ganteng.id (Kalau bisa jangan dihapus untuk menghormati repotnya membuat tutorial kali ini)
*/
/* 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, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after {content: ”;content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
body {background-color: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db; line-height: 1.5 em;text-decoration:none}
a:hover {font-family: 'PT Serif Caption', serif; font-size: 15px; color: #4d4544; line-height: 1.5 em;}
a {font-family: 'PT Serif Caption', serif; font-size: 15px; color: #3094db; line-height: 1.5 em;}
</style>
</head>
<body>
<div id='wrapper'>
<header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Ganteng id (Header)' type='Header'></b:widget>
</b:section>
</header>
<div class='clearfix'/>
<aside id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</aside>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
<div class='clearfix'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'></b:section>
</footer>
</div>
<!--</body>-->
</HTML>
<!DOCTYPE html>
<HTML lang='id'>
<head>
<b:include data='blog' name='all-head-content'/>
<meta charset='UTF-8'/>
<meta content='240' http-equiv='refresh'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='no-store' http-equiv='Cache-Control'/>
<title><data:blog.title/> </title>
<style type="text/css"><!-- /*<b:skin><![CDATA[
]]></b:skin>
<style type='text/css'>
/*
Name : Nama Blog
Release Date : Tanggal Terbit
Design by : Nama sobat
Credit : www.ganteng.id (Kalau bisa jangan dihapus untuk menghormati repotnya membuat tutorial kali ini)
*/
/* 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, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after {content: ”;content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
body {background-color: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db; line-height: 1.5 em;text-decoration:none}
a:hover {font-family: 'PT Serif Caption', serif; font-size: 15px; color: #4d4544; line-height: 1.5 em;}
a {font-family: 'PT Serif Caption', serif; font-size: 15px; color: #3094db; line-height: 1.5 em;}
</style>
</head>
<body>
<div id='wrapper'>
<header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Ganteng id (Header)' type='Header'></b:widget>
</b:section>
</header>
<div class='clearfix'/>
<aside id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</aside>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
<div class='clearfix'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'></b:section>
</footer>
</div>
<!--</body>-->
</HTML>
Lalu, apakah sudah selesai?
Belum, itu hanya kode pemanggilan saja yang membuat tampilannya seperti ini.
Dan tampilan tata letaknya menjadi seperti ini.
Setelah dipanggil, kita tinggal menghiasi tampilannya saja menggunakan kode CSS.
Perlu sobat ketahui, ada dua tipe cara penulisan CSS didasarkan kode pemanggilannya.
Pasti sobat pernah membaca kode id dan class pada html serta # dan tanda titik di awal kode CSS, iya kan?
Apa itu?
Kode CSS # dipanggil dengan kode html id
Sementara kode (.) dipanggil dengan kode html class
Apa bedanya id dan class?
id merupakan kode unik yang hanya ada satu di dalam struktur kode template.
Seperti contoh <header id='header-wrapper'> Jadi, tidak diperbolehkan ada lagi kode id='header-wrapper' sekali lagi yang muncul.
Sementara untuk kode class, dapat dimunculkan berkali-kali namun hanya dengan satu css saja sudah cukup mewakili.
<img class='ganteng' src='http://ganteng.id/personal.png'/>
<img class='ganteng' src='http://ganteng.id/foto.png'/>
<img class='ganteng' src='http://ganteng.id/foto.png'/>
Meski berbeda file foto, pengaturan css nya hanya menggunakan satu macam saja.
Sudah faham?
Langsung saja kita berikan tambahan kode css untuk membentuk tampilan struktur tempaltenya.
CSS untuk wrapper
#wrapper { margin: 0 auto; background: #fff; width: 90%; padding: 20px;margin-top:20px;margin-bottom:20px}
Width: sobat bisa menggunakan px. Kalau saya lebih suka menggunakan %, karena lebih mudah pengaturan responsivenya nanti (menurut saya lhoh ini)
Margin:0 auto: Berguna untuk membuat posisi wrapper berada di tengah.
CSS untuk header-wrapper
#header-wrapper{background:#fff; width: 100%; height:auto;margin: 0 auto;border:1px solid #eaeaea;margin:10px 0;}
.header{text-align:center}
.header{text-align:center}
text-align:center memiliki fungsi untuk mengatur tulisan berada di posisi tengah.
CSS untuk content-wrapper
#content-wrapper{background: transparent; width:65%; float:left;border:1px solid #eaeaea;margin:10px 0;}
float:left berfungsi untuk mengatur posisi widget berada di sebelah kiri.
CSS untuk sidebar-wrapper
#sidebar-wrapper{background: transparent; width:30%; float:right;border:1px solid #eaeaea;margin:10px 0;}
float:right berfungsi untuk mengatur posisi widget berada di sebelah kanan.
CSS untuk footer-wrapper
#footer-wrapper{width:100%;margin:0 auto; background:transparent; border:1px solid #eaeaea;margin:10px 0;}
Ohya, saya tambahkan CSS Clearfix yang berfungsi meniadakan efek float agar tidak merusak tampilan untuk elemen selanjutnya.
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
Letakkan semua kode css tersebut di atas kode </style>
Maka akan jadi seperti ini.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML lang='id'>
<head>
<b:include data='blog' name='all-head-content'/>
<meta charset='UTF-8'/>
<meta content='240' http-equiv='refresh'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='no-store' http-equiv='Cache-Control'/>
<title><data:blog.title/> </title>
<style type="text/css"><!-- /*<b:skin><![CDATA[
]]></b:skin>
<style type='text/css'>
/*
Name : Nama Blog
Release Date : Tanggal Terbit
Design by : Nama sobat
Credit : www.ganteng.id (Kalau bisa jangan dihapus untuk menghormati repotnya membuat tutorial kali ini)
*/
/* 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, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after {content: ”;content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
body {background-color: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db; line-height: 1.5 em;text-decoration:none}
a:hover {font-family: 'PT Serif Caption', serif; font-size: 15px; color: #4d4544; line-height: 1.5 em;}
a {font-family: 'PT Serif Caption', serif; font-size: 15px; color: #3094db; line-height: 1.5 em;}
#wrapper { margin: 0 auto; background: #fff; width: 90%; padding: 20px;margin-top:20px;margin-bottom:20px}
#header-wrapper{background:#fff; width: 100%; height:auto;margin: 0 auto;border:1px solid #eaeaea;margin:10px 0;}
.header{text-align:center}
#content-wrapper{background: transparent; width:65%; float:left;border:1px solid #eaeaea;margin:10px 0;}
#sidebar-wrapper{background: transparent; width:30%; float:right;border:1px solid #eaeaea;margin:10px 0;}
#footer-wrapper{width:100%;margin:0 auto; background:transparent; border:1px solid #eaeaea;margin:10px 0;}
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
</style>
</head>
<body>
<div id='wrapper'>
<header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Ganteng id (Header)' type='Header'></b:widget>
</b:section>
</header>
<div class='clearfix'/>
<aside id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</aside>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
<div class='clearfix'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'></b:section>
</footer>
</div>
<!--</body>-->
</HTML>
<!DOCTYPE html>
<HTML lang='id'>
<head>
<b:include data='blog' name='all-head-content'/>
<meta charset='UTF-8'/>
<meta content='240' http-equiv='refresh'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='no-store' http-equiv='Cache-Control'/>
<title><data:blog.title/> </title>
<style type="text/css"><!-- /*<b:skin><![CDATA[
]]></b:skin>
<style type='text/css'>
/*
Name : Nama Blog
Release Date : Tanggal Terbit
Design by : Nama sobat
Credit : www.ganteng.id (Kalau bisa jangan dihapus untuk menghormati repotnya membuat tutorial kali ini)
*/
/* 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, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after {content: ”;content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
body {background-color: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db; line-height: 1.5 em;text-decoration:none}
a:hover {font-family: 'PT Serif Caption', serif; font-size: 15px; color: #4d4544; line-height: 1.5 em;}
a {font-family: 'PT Serif Caption', serif; font-size: 15px; color: #3094db; line-height: 1.5 em;}
#wrapper { margin: 0 auto; background: #fff; width: 90%; padding: 20px;margin-top:20px;margin-bottom:20px}
#header-wrapper{background:#fff; width: 100%; height:auto;margin: 0 auto;border:1px solid #eaeaea;margin:10px 0;}
.header{text-align:center}
#content-wrapper{background: transparent; width:65%; float:left;border:1px solid #eaeaea;margin:10px 0;}
#sidebar-wrapper{background: transparent; width:30%; float:right;border:1px solid #eaeaea;margin:10px 0;}
#footer-wrapper{width:100%;margin:0 auto; background:transparent; border:1px solid #eaeaea;margin:10px 0;}
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
</style>
</head>
<body>
<div id='wrapper'>
<header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Ganteng id (Header)' type='Header'></b:widget>
</b:section>
</header>
<div class='clearfix'/>
<aside id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</aside>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
<div class='clearfix'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'></b:section>
</footer>
</div>
<!--</body>-->
</HTML>
Jika tidak ada kesalahan, maka sobat sudah berhasil membuat struktur dasar template.
Coba di preview atau view blog, tampilannya akan seperti ini.
Untuk memastikannya, sobat bisa membuat satu postingan dan menambahkan widget di sidebar dan footer.
Akan jadi seperti berikut ini.
Gimana? Jelek sekali ya tampilannya?
Ya wajar, kita baru membuat strukturnya.
Belum sampai tahap membaguskan tampilannya.
Tapi, setidaknya sobat sudah berhasil membuat bakal calon template sendiri kan?
Dengan begini, sobat sudah menyelesaikan 10% dari keseluruhan tutorial membuat template sendiri.
10%
Untuk yang mau template gratisan, bisa download template berikut.
Kalau ada penjelasan saya yang salah, silahkan beri kritik dan masukan di kolom komentar ya!
Kalau ada kode yang nggak bekerja, coba ikutin lagi dengan teliti! Masalahnya saya juga ikut nyoba dan kode-kodenya sudah pasti work.
