Blogger adalah platform blogging gratis yang disediakan oleh Google. Di blogger terdapat yang namanya sebuah template atau bisa juga disebut tema. Template tersebut dijadikan sebagai tampilan blog kamu nantinya, template tersebut juga bisa mengatur tata letak supaya terlihat lebih rapi. Kamu bisa membuat template blogger atau menggunakan yang sudah jadi dan banyak bertebaran di internet.
Persiapan
- HTML
- CSS (Dasar)
- Javascript (Opsional)
Cara Membuat
Saya anggap kamu sudah mengetahui dasar HTML dan CSS. Untuk membuat template blogger dari nol kamu akan mengikuti beberapa tahap, sedangkan untuk yang saya bahas kali ini masih hanya dasar.
Pengetahuan Dasar Tag Blogger
Sebelum mengedit template kamu perlu mengetahui tag dasar terlebih dahulu, berikut yang akan kita pelajari.
Bagian Style
<style> /* CSS */ </style>
tetapi dengan
<b:skin> /* CSS */ </b:skin>
.
Bagian Section.
Bagian Section ini adalah bagian yang nantinya akan ditempatkan bagian Widget. Berikut adalah contohnya.
<b:section id='main'></b:section>
<b:section id='main'></b:section>
<b:section id='main'></b:section>
Contoh yang benar adalah seperti berikut.
<b:section id='head'></b:section>
<b:section id='main'></b:section>
Dalam bagian section kamu bisa menerapkan beberapa atribut dengan berbagai fungsi sebagai berikut.
Attribut | Jenis | Fungsi |
id |
string | ID dari section, harus unik (wajib) |
max-widgets |
boolean | Jumlah maksimal widget yang akan tampil |
class |
string | Class yang digunakan |
cond |
string | Untuk menerapkan tag kondisional blogger |
locked |
boolean | Mengatur apakah section bisa menambahkan widget atau tidak |
tag |
string | Mengatur nama tag yang nantinya muncul saat render html |
name |
string | Nama section yang akan muncul saat di tata letak |
Contoh penerapan kode
<b:section id='id-main' class='main' name='Main Section' tag='main></b:section>
Akan menghasilkan sebagai berikut.
<main id="id-main" class="main" name="Main Section"></main>
Bagian Widget
Bagian ini nantinya akan merender bagian penting, tipe yang tersedia sama dengan yang bisa kamu temukan di tata letak > tambah widget. Tipe yang tersedia adalah Blog, AdSense, Attribution, BlogArchive, BloggerButton, BlogList, BlogSearch, ContactForm, FeaturedPost, Feed, FollowByEmail, Followers, Header, HTML, Image, Label, LinkList, Navbar, PageList, PopularPosts dll. Bisa membaca dokumentasi lengkap di Blogger Code Gadget Introduction
Selain itu terdapat atribut juga seperti pada bagian Section.
Attribut | Jenis | Fungsi |
id |
string | Sebagai identitas , harus unik(wajib) |
type |
string | Tipe yang akan ditampilkan (wajib) |
locked |
boolean | Mengatur apakah widget dikunci atau tidak |
title |
string | Judul widget |
visible |
boolean | Mengatur apakah widget ditampilkan atau disembunyikan |
Untuk menuliskanya sedikit berbeda dengan section pada atribut id, jika di bagian section kita bisa bebas menentukan id namun di bagian widget terbatas dengan tipe widget, contoh penerapan.
<b:widget id='Header1' type='Header'>...</b:widget>
<b:widget id='Header2' type='Header'>...</b:widget>
Dan bagian widget harus bersarang di dalam bagian section. Contoh
<b:section id='head'>
<b:widget id='Header1' type='Header'>...</b:widget>
</b:section>
Mengedit Template
Sekarang kamu masuk Blogger dan pindah menuju bagian tema lalu klk tanda panah ke bawah dan pilih edit html.
Tambahkan Kode
Setelah masuk ke bagian edit html, sekarang kamu bisa menambahkan tag html mu sendiri. Sekarang tambahkan deklarasi html 5 beserta tag nya.
<!DOCTYPE html>
<html lang='id' b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection'>
<head>
<meta charset="utf-8"/>
<title><data:view.title.escaped/></title>
</head>
<body>
</body>
</html>
</body>
</html>
Pada bagian tag <data:view.title.escaped/>
adalah bagian
dari kode blogger yang berfungsi menampilkan judul secara otomatis, jika kamu
mengatur judul blog kamu dengan "Template Blogger" maka halaman rumah atau
homepage kamu juga berjudul Template Blogger. Ketika berada di halaman
postingan maka judul akan berubah sesuai dengan judul postingan.
Disini saya mengatur template widget dan layout ke versi terbaru revisi 1.3.0, jadi beberapa tutorial di internet mungkin akan ada yang tidak berfungsi.
Kamu belum bisa menyimpan template karena template belum menerapkan skin, section dan widget apapun.
Sekarang tambahkan skin pada bagian head
<b:skin version='1.3.0'><![CDATA[/* CSS */</b:skin>
Sehingga hasil akhir seperti berikut.
Sekarang tambahkan bagian header, main dan aside.
<header>
<b:section class='container' id='head'>
</b:section>
</header>
<div class='container'>
<main>
<b:section id='main-section'>
</b:section>
</main>
<aside>
<b:section id='aside'>
</b:section>
</aside>
</div>
Tambahkan widget didalam section seperti berikut.
<b:widget id='Header1' type='Header'/>
Tambahkan juga widget Blog pada bagian main.
<b:widget id='Blog1' type='Blog'/>
Kamu juga bisa menambahkan widget pada bagian aside, dan jika kamu mengakhiri tag widget dengan />
maka kode akan otomatis dilengkapi ketika kita menyimpan template. Kode akhir dari template sebagai berikut.
<!DOCTYPE html>
<html lang='id' b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection'>
<head>
<meta charset="utf-8"/>
<title><data:view.title.escaped/></title>
<b:skin><![CDATA[/*CSS*/]]></b:skin>
</head>
<body>
<header>
<b:section class='container' id='head'>
<b:widget id='Header1' type='Header'/>
</b:section>
</header>
<div class='container'>
<main>
<b:section id='main-section'>
<b:widget id='Blog1' type='Blog'/>
</b:section>
</main>
<aside>
<b:section id='aside'>
</b:section>
</aside>
</div>
</body>
</html>
Silahkan simpan template dan reload halaman untuk melihat kode yang sudah lengkap. Sekarang kamu bisa mengubahnya sesuka hati.
Akhir Kata
Sekarang kamu siap untuk membuat template mu sendiri, silahkan lakukan percobaan yang banyak karena biasanya cukup pusing ketika memahami tag blogger. Sebagai referensi kamu bisa mengunjungi Blogger Code. Mohon maaf bila terdapat kesalahan, karena saya juga masih belajar.
Hmm, dari dulu saya selalu penasaran cara buat template blogger itu kyk apa. Tapi kadang kalau lihat prosesnya lumayan ribet juga dan saya kayaknya gak punya banyak waktu buat bikin dari nol. Akhirnya selama ini belajar redesign template orang lain aja sembari belajar. Sayang ujung-ujungnya cuma otak-atik tampilan pakai CSS aja, huhuhu.
ReplyDeletekalau saya sih lebih enak bikin langsung dari nol, kalau sekiranya ada yang mentok ya comot dari template orang haha. Redesign lebih susah, soalnya harus memahami tata letak template orang.
DeleteWahhh saya juga lagi coba coba bikin mas, pake bs.4.. Lumayan melelahkan juga.. Tapi masih belum berhasil untuk buat sidebar blog dan infinite scroll untuk post homepage blog.. Saya liat tutorial pake jquery2 itu tp gak berhasil juga.. masih bingung euy..
ReplyDeleteUntuk pertama kali lebih baik menggunakan bootstrap aja, biar mudah. Sekarang bootstrap 5 juga udah ada.
Deletesudah mas sudah jadi di blog saya ndisaen com, coba bikin tutorial cara membuat sidebar di bootstrap mas :v, blas saya gak bisa menambahkan widget :(
DeleteWah baru tahu nih Mas kalau <b:section id='id-main' class='main' name='Main Section' tag='main'></b:section> bisa jadi tag HTML main dengan atribut tag bernilai main. Biasanya tag b:section jadi tag HTML div. Tapi belum kucoba sih. Kalau bisa keren, lah.
ReplyDeleteAside juga bisa mas, mau footer juga bisa.
ReplyDeleteSetelah kucoba, header, main, aside, footer, semua bisa. Kecuali tag='section'. Ia tetap menjadi div.
ReplyDeleteSayangnya, b:widget tidak bisa diberi atribut tag ya.
Ya, kalau widget sudah mutlak mungkin.
ReplyDeleteUntung aja ada orang yang mau ngasih tau dasarnya
ReplyDeleteArtikelnya Bermanfaat 😊
ReplyDeletekalau buat home jadi kek halaman berbeda dengan halamab blognya itu giaman ya?, di home itu misalnya header dan lain lain bakal beda sama halaman di list postnya. apakah blogger mendukung hal ini?
ReplyDeleteBisa aja si mas, untuk list postingan bisa menggunakan javascript di halaman. Sedangkan untuk homepagenya biarin kosong atau diisi dengan sesuai kebutuhan.
ReplyDeleteMas Taufik, saya punya blog di blogspot.com, saya mau tambahkan kolom / template khusus untuk memposting vidio Youtube, dimana setiap posting vidio ini ada category/Labelnya, sehingga setiap posting vidio youtube dgn pilih Category/Label nya maka vidio akan ada terposting di bagian label tersebut. Bagaimana caranya mas ? Cara buat kolom/template tempat posting dan terkoneksi dengan category/label ?
ReplyDeletemohon bantuan, saya sudah capek search google belum ketemu... Trims
Mantap
ReplyDelete