Mungkin jika teman-teman pernah menemukan sofware untuk membuat template blogger agar mudah tanpa perlu mempelajari kode-kode yang membingungkan, namun jika teman-teman memakai software untuk membuat temaplte blogger ini adalah kekurangnya.
- Dipaksa untuk memilih contoh desain yang diberikan: menu, tata letak, dll.
- Teman-teman tidak akan belajar cara membuat kode pada template blogger di masa yang akan datang. Jadi tidak dapat menyesuaikan template sendiri di tempat yang dibutuhkan.
- Teman-teman tidak akan mempelajari struktur dasar template Blogger dll.
Tetapi tutorial membuat temaplte blogger ini akan membuat teman-teman berhasil membuat tema atau template Blogger yang responsif, dan pengunjung blog akan melihat perubahan yang teman-teman buat pada template.
Memikirkan untuk menerbitkan posting ke blog dan tampilan template blog yang dirancang dan dikembangkan sendiri adalah hal yang luar biasa, iya gak?
Sebelum memulai Membuat Template Blogger
Periksa diri. Apakah Teman-teman terampil dalam hal berikut ini? Jika teman-teman tidak memiliki keterampilan apapun maka Anda harus terampil dalam HTML ∓ CSS (minimal). Teman-teman blogger dapat mempelajari HTML & CSS dari w3schools, kabar baiknya tidak usah bayar alisa gratis. Disan juga bisa belajar pemahaman Bootstrap, JavaScript, jQuery dll. Berikut skill yang diperlukan dalam membuat temaplte blogger
- Tag dasar Blogger (disarankan, bisa mulai dari sini)
- HTML (Wajib hukumnya mulailah belajar disini)
- CSS (Wajib bisa, pahami dan praktekan pelajari disini)
- JavaScript (Opsional)
- XML (Opsional)
- Kerangka Responsif (Opsional)
Software senderhana yang akan membantu dalam mengedit template:
- Editor HTML/CSS, misalnya Notepad++ , Sublime Text, Dreamweaver, Geany dll.
- Notebook untuk menyimpan kode-kode penting, tips, dll.
Mungkin, Teman-teman pernah mencoba mengupload template website HTML yang desain sendiri atau mungkin diperoleh dari orang lain ke Blogger secara manual atau copy-paste. Pasti teman-teman gagal dan muncul notifikasi di Editor HTML Blogger. Mulai hari ini teamn-teman tidak akan gagal untuk melihat template website HTML yang sudah dirancang yang ingin diterapkan ke platform Blogger.
Sudah siap, Ayo kita mulai!
Dari Dashboard Blogger → Tema → Edit HTML dan Hapus semua kode template yang ada dengan menekan Ctrl+A dan DELETE atau Backspace. Kemudian kita mulai dengan kode HTML sederhana dibawah ini
<!DOCTYPE html> <html> <head> <title>Template Blog Buatanku Sendiri</title> </head> <body> <h1>Hallo Dunia</h1> <p>Ini Template Buatanku Sendiri.</p> </body> </html>Klik Save. Maka akan muncul peringatan!
×
There should be one and only one skin in the theme, and we found: <b>0</b>.
Pada peringatan diatas diminta menambahkan skin atau style yang nanti berisi kode CSS Kemudian coba tambahkan skin yang diminta.
Kode pembuka
<b:skin><![CDATA[ Isi
/*! CSS Template Teman-teman Disini */dan penutupnya
]]></b:skin> Letakkan didalam tag
<head> maka jadilah kode tadi seperti dibawah ini.
<!DOCTYPE html> <html> <head> <title>Template Blog Buatanku Sendiri</title> <b:skin><![CDATA[ /*! CSS Template Teman-teman Disini */ ]]></b:skin> </head> <body> <h1>Hallo Dunia</h1> <p>Ini Template Buatanku Sendiri.</p> </body> </html>Klik Save. Oooops! muncul peringatan lagi!
×
We did not find any section in your theme. A theme must have at least one b:section tag..
Kita tambahkan lagi apa yang diminta agar tidak terjadi error yaitu tag b:section, maka kita tambahakan tag b:section dibawah ini. Letakkan didalam kode tag
<body> tepatnya diatas kode <h1>Hallo Dunia</h1><b:section class='hello' id='hello'/> Maka kode template akan jadi seperti ini
<!DOCTYPE html> <html> <head> <title>Template Blog Buatanku Sendiri</title> <b:skin><![CDATA[ /*! CSS Template Teman-teman Disini */ ]]></b:skin> </head> <body> <b:section class='hello' id='hello'/> <h1>Hallo Dunia</h1> <p>Ini Template Buatanku Sendiri.</p> </body> </html>Klik Save, Yeaahhh .... update template berhasil itu template pertammu walaupun sederha sekali, lihat hasilnya ada tulisan
"Hallo Dunia"
"Ini Template Buatanku Sendiri".
Kode template sampai disini adalah seperti dibawah ini. Jangan kawatir jika muncul kode
<?xml version="1.0" encoding="UTF-8" ?> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <title>Template Blog Buatanku Sendiri</title> <b:skin><![CDATA[ /*! CSS Template Teman-teman Disini */ ]]></b:skin> </head> <body> <b:section class='hello' id='hello'/> <h1>Hallo Dunia</h1> <p>Ini Template Buatanku Sendiri.</p> </body> </html>Sekarang kita tambahkan post, header, sidebar dan footer. Kode header diatas sendiri atau diatas post, kode sidebar di bawah post dan footer dibawah sidebar. Letakkan kode tersebut secara berurutan di dalam tag
<body>.
Hapus kode:
<b:section class='hello' id='hello'/>
<h1>Hallo Dunia</h1>
<p>Ini Template Buatanku Sendiri.</p>
Masukkan kode dibawah ini secara berurutan.
Header :
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Template Blog Buatanku Sendiri' type='Header'/>
</b:section>
Post :
<b:section class='main' id='main' name='Main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog'/>
</b:section>
Sidebar :
<b:section class='sidebar' id='sidebar' name='Sidebar' showaddelement='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
Footer :
<b:section class='footer' id='footer' name='Footer' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
Maka jadilah kode template seperti ini:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title>Template Blog Buatanku Sendiri</title>
<b:skin><![CDATA[
/*! CSS Template Teman-teman Disini */
]]></b:skin>
</head>
<body>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Template Blog Buatanku Sendiri' type='Header'/>
</b:section>
<b:section class='main' id='main' name='Main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog'/>
</b:section>
<b:section class='sidebar' id='sidebar' name='Sidebar' showaddelement='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
<b:section class='footer' id='footer' name='Footer' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</body>
</html>
Klik Save, Muncul widget header, Post, Sidebar dan Footer.
Kita masukkan versi layout template yang akan kita desain, untuk tutorial ini saya memakai layout versi 3 namun widgetnya versi 2 perbedaannya ada di tag
<html...., Untuk menambahkannya kita masukkan kode b:layoutsVersion='3' b:defaultwidgetversion='2' class='v2' pada tag html.
Sebelumnya pada tag html:
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>/
Maka pada tag html akan menjadi:
<html b:layoutsVersion='3' b:defaultwidgetversion='2' class='v2' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Sebelum di Save kita tambahkan sekalian arah bahasa ltr (left to right, contoh bahasa Indonesia, Inggris dll.) atau rtl (right to left, contoh bahsa Arab atau Ibrani) dan lokalisasi bahasa blog dengan menambahkan kode
expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' . Menjadi seperti ini:
<html b:layoutsVersion='3' b:defaultwidgetversion='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Klik Save.
Kode template akan menjadi :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:defaultwidgetversion='2' b:layoutsVersion='3' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title>Template Blog Buatanku Sendiri</title>
<b:skin><![CDATA[
/*! CSS Template Teman-teman Disini */
]]></b:skin>
</head>
<body>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Template Blog Buatanku Sendiri' type='Header'/>
</b:section>
<b:section class='main' id='main' name='Main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog'/>
</b:section>
<b:section class='sidebar' id='sidebar' name='Sidebar' showaddelement='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
<b:section class='footer' id='footer' name='Footer' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</body>
</html>
Setelah itu kita kembalikan dulu tag bawaan blogger pada tag tittle dan meta tag nya dengan menghapus kode:
<title>Template Blog Buatanku Sendiri</title>
Gantikan dengan
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
Klik Save.
Sekarang kita rampikan tampilannya dengan CSS dan menambahan tag HTML
Kode template sekarang :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:defaultwidgetversion='2' b:layoutsVersion='3' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/*! CSS Template Teman-teman Disini */
]]></b:skin>
</head>
<body>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Template Blog Buatanku Sendiri' type='Header'/>
</b:section>
<b:section class='main' id='main' name='Main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog'/>
</b:section>
<b:section class='sidebar' id='sidebar' name='Sidebar' showaddelement='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
<b:section class='footer' id='footer' name='Footer' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</body>
</html>
Sekarang kita buat CSS dulu, untuk mempelajari CSS sialhkan baca dari awal, diawal sudah ada link untuk belajar CSS, Nah sekarang saya akan menambahkan style sebagai berikut:
/* Selects all elements - peritah yang berlaku untuk semuanya */
* {
box-sizing: border-box; /* Menyamakan ukuran box */
}
/* Blogger Reset - Menghilangkan style bawaan blogger dengan mengganti deklarasinya disini saya reset class section */
.section {
margin: 0; /* Jarak luar nol */
padding: 0; /* Jarak dalam nol */
}
/* CSS Container - Disini saya ingin membungkus Header, Main, Sidebar dan footer agak panjangnya maksimal 1140px; */
.container {
max-width: 1140px; /* Maksimal panjangnya */
margin: 0 auto; /* Jarak luar kanan dan kiri otomatis, atas dan bawah nol */
}
/* CSS Header */
.header {
background-color: #7F7F7F; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 100%; /* Panjang */
}
/* CSS Main */
.main {
background-color: #FFC90D; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 70%; /* Panjang */
min-height: 300px; /* Minimal lebarnya */
}
/* CSS Sidebar */
.sidebar {
background-color: #7092BF; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 30%; /* Panjang */
min-height: 300px; /* Minimal lebarnya */
}
/* CSS Footer */
.footer {
background-color: #C7BFE6; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 100%; /* Panjang */
}
/* Penambah media query berfungsi untuk tampilan responsive disini panjang main dan sidebar akan berganti pada break point lebar layar 767px: */
@media screen and (max-width: 767px) {
.main, .sidebar {
width: 100%; /* Panjang berubah manjadi 100% jika ukuran layar lebih kecil dari 767px */
}
}
Sekarang kita masukkan dalam template menggantikan kode /*! CSS Template Teman-teman Disini */ yang berada dalam tag <b:skin><![CDATA[. Jangan lupa bungkus dengan class container, maka jadilah kode templatenya seperti ini :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:defaultwidgetversion='2' b:layoutsVersion='3' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Selects all elements - peritah yang berlaku untuk semuanya */
* {
box-sizing: border-box; /* Menyamakan ukuran box */
}
/* Blogger Reset - Menghilangkan style bawaan blogger dengan mengganti deklarasinya disini saya reset class section */
.section {
margin: 0; /* Jarak luar nol */
padding: 0; /* Jarak dalam nol */
}
/* CSS Container - Disini saya ingin membungkus Header, Main, Sidebar dan footer agak panjangnya maksimal 1140px; */
.container {
max-width: 1140px; /* Maksimal panjangnya */
margin: 0 auto; /* Jarak luar kanan dan kiri otomatis, atas dan bawah nol */
}
/* CSS Header */
.header {
background-color: #7F7F7F; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 100%; /* Panjang */
}
/* CSS Main */
.main {
background-color: #FFC90D; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 70%; /* Panjang */
min-height: 300px; /* Minimal lebarnya */
}
/* CSS Sidebar */
.sidebar {
background-color: #7092BF; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 30%; /* Panjang */
min-height: 300px; /* Minimal lebarnya */
}
/* CSS Footer */
.footer {
background-color: #C7BFE6; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 100%; /* Panjang */
}
/* Penambah media query berfungsi untuk tampilan responsive disini panjang main dan sidebar akan berganti pada break point lebar layar 767px: */
@media screen and (max-width: 767px) {
.main, .sidebar {
width: 100%; /* Panjang berubah manjadi 100% jika ukuran layar lebih kecil dari 767px */
}
}
]]></b:skin>
</head>
<body>
<div class='container'>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Template Blog Buatanku Sendiri' type='Header'/>
</b:section>
<b:section class='main' id='main' name='Main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog'/>
</b:section>
<b:section class='sidebar' id='sidebar' name='Sidebar' showaddelement='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
<b:section class='footer' id='footer' name='Footer' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</div>
</body>
</html>
Setelah itu jangan lupa tambahkan kendali viewport ini mengambil kendali atas viewport maka kita tidak usah mainkan template mobile bawaan blogger, melalui tag <meta>. Kodenya seperti berikut:
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
Ini memberikan petunjuk kepada browser tentang cara mengontrol dimensi dan penskalaan halaman.
Bagian width=device-width mengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).
Bagian initial-scale=1.0 ini mengatur tingkat zoom awal saat halaman pertama kali dimuat oleh browser.
Letakkan kode viewport dibawah tag
<head>, jadi kode temaplte lengkap seperti ini
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:defaultwidgetversion='2' b:layoutsVersion='3' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Selects all elements - peritah yang berlaku untuk semuanya */
* {
box-sizing: border-box; /* Menyamakan ukuran box */
}
/* Blogger Reset - Menghilangkan style bawaan blogger dengan mengganti deklarasinya disini saya reset class section */
.section {
margin: 0; /* Jarak luar nol */
padding: 0; /* Jarak dalam nol */
}
/* CSS Container - Disini saya ingin membungkus Header, Main, Sidebar dan footer agak panjangnya maksimal 1140px; */
.container {
max-width: 1140px; /* Maksimal panjangnya */
margin: 0 auto; /* Jarak luar kanan dan kiri otomatis, atas dan bawah nol */
}
/* CSS Header */
.header {
background-color: #7F7F7F; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 100%; /* Panjang */
}
/* CSS Main */
.main {
background-color: #FFC90D; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 70%; /* Panjang */
min-height: 300px; /* Minimal lebarnya */
}
/* CSS Sidebar */
.sidebar {
background-color: #7092BF; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 30%; /* Panjang */
min-height: 300px; /* Minimal lebarnya */
}
/* CSS Footer */
.footer {
background-color: #C7BFE6; /* Warna Latar belakang */
padding: 20px; /* Jarak kedalam */
float: left; /* Rata Kiri */
width: 100%; /* Panjang */
}
/* Penambah media query berfungsi untuk tampilan responsive disini panjang main dan sidebar akan berganti pada break point lebar layar 767px: */
@media screen and (max-width: 767px) {
.main, .sidebar {
width: 100%; /* Panjang berubah manjadi 100% jika ukuran layar lebih kecil dari 767px */
}
}
]]></b:skin>
</head>
<body>
<div class='container'>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Template Blog Buatanku Sendiri' type='Header'/>
</b:section>
<b:section class='main' id='main' name='Main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog'/>
</b:section>
<b:section class='sidebar' id='sidebar' name='Sidebar' showaddelement='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
<b:section class='footer' id='footer' name='Footer' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</div>
</body>
</html>
Klik Save.
Tutorial ini akan di update secara berkala, jika Teman-teman ingin mendapatkan update terbarunya jangan lupa follow, bookmarks dan tinggalkan komentar apa yang belum dipahami dan mana yang ingin dipahami lebih dalam dalam membuat temaplte blogger, semoga bermanfaat.
No comments:
Post a Comment