Cara Membuat Template Blogger Sendiri Dalam 5 Langkah Mudah
Template Blogger adalah salah satu elemen penting yang harus Anda perhatikan ketika memulai blog di platform Blogger, yang merupakan layanan blogging gratis dari Google. Template ini berfungsi sebagai wajah blog Anda, menentukan tampilan dan nuansa keseluruhan situs Anda. Dengan template yang tepat, blog Anda dapat terlihat lebih menarik dan profesional, sekaligus mengatur tata letak agar lebih rapi dan mudah dinavigasi.
Anda memiliki beberapa pilihan terkait template Blogger. Anda bisa memilih untuk membuat template sendiri jika Anda memiliki keterampilan desain dan coding, atau Anda bisa menggunakan template yang sudah tersedia di internet. Banyak template yang siap pakai ini dapat diunduh secara gratis maupun berbayar, masing-masing menawarkan fitur dan desain yang berbeda sesuai kebutuhan.
Pemilihan template yang sesuai akan sangat membantu dalam meningkatkan daya tarik visual blog Anda serta memberikan pengalaman yang lebih baik bagi pengunjung. Dengan begitu, blog Anda akan lebih mudah untuk menarik perhatian dan mempertahankan pengunjung.
Persiapan
Sebelum membuat template Blogger, ada beberapa pengetahuan dasar yang perlu Anda kuasai.
- HTML
- CSS (Dasar)
- Javascript (Opsional)
HTML adalah fondasi utama dalam pembuatan template Blogger, jadi penting untuk memahami cara kerjanya. Sedangkan untuk CSS, Anda bisa memanfaatkan framework seperti Bootstrap untuk memudahkan proses styling dan tata letak. Ini sangat membantu untuk membuat tampilan blog Anda lebih rapi dan menarik.
Javascript bersifat opsional, tetapi jika Anda ingin menambahkan elemen interaktif pada blog Anda, mempelajari Javascript akan sangat berguna. Dengan Javascript, Anda bisa menambahkan berbagai fitur dinamis yang dapat meningkatkan pengalaman pengunjung saat menjelajahi blog Anda.
Pengetahuan Dasar Tag Blogger
Sebelum Anda mulai mengedit template Blogger, penting untuk memahami tag dasar yang akan digunakan. Berikut adalah beberapa tag dasar yang perlu Anda ketahui untuk memulai.
Bagian Style adalah elemen CSS yang akan Anda gunakan untuk mengubah tampilan halaman blog Anda. Berbeda dari CSS biasa yang ditulis dengan <style> /* CSS */ </style>, di Blogger, Anda akan menulis CSS dalam tag <b:skin> /* CSS */ </b:skin>. Ini adalah cara khusus yang digunakan Blogger untuk mengelola styling pada template.
Selanjutnya, kita akan membahas bagian section. Bagian section ini merupakan tempat di mana widget akan ditempatkan. Misalnya, tag berikut digunakan untuk mendefinisikan sebuah section:
<b:section id='main'></b:section>Setiap section hanya boleh memiliki satu ID yang unik. Ini berarti Anda tidak dapat menggunakan ID yang sama untuk lebih dari satu section. Misalnya, contoh berikut ini salah karena memiliki dua section dengan ID yang sama:
<b:section id='main'></b:section>
<b:section id='main'></b:section>Sebaliknya, contoh berikut ini benar karena menggunakan ID yang berbeda untuk setiap section:
<b:section id='head'></b:section>
<b:section id='main'></b:section>Di dalam bagian section, Anda dapat menerapkan beberapa atribut dengan berbagai fungsi. Berikut adalah atribut yang umum digunakan:
| Attribut | Jenis | Fungsi |
|---|---|---|
| id | string | Ini adalah ID dari section yang harus unik. Atribut ini bersifat wajib. |
| max-widgets | boolean | Atribut ini menentukan jumlah maksimal widget yang dapat ditampilkan dalam section. Nilai boolean digunakan untuk mengatur fitur ini. |
| class | string | Atribut ini digunakan untuk menetapkan class pada section sesuai dengan kebutuhan styling atau script tambahan. |
| cond | string | Atribut ini memungkinkan Anda untuk menerapkan tag kondisional Blogger, yang berguna untuk menampilkan atau menyembunyikan section berdasarkan kondisi tertentu. |
| locked | boolean | Atribut ini mengatur apakah section dapat menambahkan widget atau tidak. Nilai boolean menentukan fitur ini. |
| tag | string | Atribut ini mengatur nama tag yang akan muncul saat HTML dirender. Ini membantu dalam penataan dan identifikasi elemen pada blog. |
| name | string | Atribut ini menentukan nama section yang akan muncul saat di tata letak. Nama ini membantu dalam pengorganisasian dan manajemen widget. |
Dengan memahami penggunaan tag dan atribut ini, Anda akan lebih siap dalam mengedit dan menyesuaikan template Blogger sesuai dengan kebutuhan blog Anda. Ini adalah langkah awal yang penting dalam memastikan bahwa blog Anda tidak hanya tampil menarik tetapi juga berfungsi dengan baik.
Contoh Penerapan Kode
Saat Anda menggunakan tag <b:section>, berikut adalah contoh penerapan kodenya:
<b:section id='id-main' class='main' name='Main Section' tag='main'></b:section>Tag ini akan dihasilkan sebagai berikut:
<main id="id-main" class="main" name="Main Section"></main>Bagian Widget
Bagian widget sangat penting karena ini yang akan merender elemen-elemen yang dapat ditambahkan ke blog Anda. Jenis widget yang tersedia mirip dengan yang bisa Anda temukan di menu Tata Letak > Tambah Widget. Beberapa tipe widget yang dapat Anda gunakan termasuk Blog, AdSense, Attribution, BlogArchive, BloggerButton, BlogList, BlogSearch, ContactForm, FeaturedPost, Feed, FollowByEmail, Followers, Header, HTML, Image, Label, LinkList, Navbar, PageList, PopularPosts dan lainnya. Untuk informasi lebih lanjut, Anda bisa membaca dokumentasi lengkap di Blogger Code Gadget Introduction.
Selain itu, widget juga memiliki atribut yang serupa dengan yang ada di bagian section. Berikut adalah atribut yang umumnya digunakan:
| Attribut | Jenis | Fungsi |
|---|---|---|
| id | string | Ini berfungsi sebagai identitas widget dan harus unik. Atribut ini bersifat wajib. |
| type | string | Menentukan tipe widget yang akan ditampilkan. Atribut ini juga wajib diisi. |
| locked | boolean | Mengatur apakah widget dikunci atau tidak, sehingga tidak bisa diubah atau dihapus. |
| title | string | Menentukan judul widget yang akan tampil. |
| visible | boolean | Mengatur apakah widget ditampilkan atau disembunyikan di blog Anda. |
Perlu dicatat bahwa untuk atribut `id` di widget, Anda tidak bisa sembarangan memilih ID. ID harus sesuai dengan tipe widget yang digunakan. Berikut adalah contoh penerapannya:
<b:widget id='Header1' type='Header'>...</b:widget>
<b:widget id='Header2' type='Header'>...</b:widget>Selain itu, widget harus ditempatkan di dalam section. Berikut adalah contohnya:
<b:section id='head'>
<b:widget id='Header1' type='Header'>...</b:widget>
</b:section>Dengan memahami cara penggunaan tag dan atribut ini, Anda dapat mengatur dan menyesuaikan template Blogger Anda dengan lebih efektif. Ini memastikan blog Anda tidak hanya terlihat menarik tetapi juga berfungsi dengan baik sesuai kebutuhan Anda.
Mengedit Template
Untuk memulai proses pengeditan template di Blogger, pertama-tama Anda perlu masuk ke akun Blogger Anda. Setelah itu, navigasikan ke bagian tema dan klik tanda panah ke bawah untuk memilih opsi “Edit HTML“.
Begitu Anda berada di halaman edit HTML, Anda bisa mulai menambahkan tag HTML sendiri. Langkah pertama adalah menambahkan deklarasi HTML5 beserta tag-tag dasarnya seperti 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>
</head>
<body>
</body>
</html>
Pada bagian <data:view.title.escaped/> adalah kode Blogger yang berfungsi untuk menampilkan judul halaman secara otomatis. Jika Anda mengatur judul blog dengan “Template Blogger“, maka halaman utama atau homepage Anda akan menggunakan judul yang sama. Di halaman postingan, judul akan otomatis berubah mengikuti judul postingan yang Anda buat.
Di sini, saya mengatur template widget dan layout ke versi terbaru, yaitu Versi 1.3.0. Oleh karena itu, beberapa tutorial yang ada di internet mungkin tidak berfungsi dengan versi ini.
Saat ini, Anda belum bisa menyimpan template karena template Anda belum menerapkan skin, section, atau widget apapun.
Selanjutnya, tambahkan skin pada bagian <head> dengan kode berikut:
<b:skin version='1.3.0'><![CDATA[/* CSS */]]></b:skin>Dengan menambahkan kode ini, template Anda akan memiliki skin yang sesuai. Hasil akhirnya akan terlihat seperti ini:
Kemudian, tambahkan bagian header, main, dan aside pada template Anda seperti berikut:
<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>
Untuk menambahkan widget ke dalam section, gunakan kode berikut:
<b:widget id='Header1' type='Header'/>Anda juga bisa menambahkan widget Blog pada bagian main dengan kode berikut:
<b:widget id='Blog1' type='Blog'/>Jika Anda ingin menambahkan widget pada bagian aside, Anda dapat melakukannya dengan cara yang sama. Perhatikan bahwa jika Anda mengakhiri tag widget dengan />, maka kode tersebut akan otomatis dilengkapi ketika Anda menyimpan template. Kode akhir dari template Anda akan terlihat seperti ini:
<!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>Setelah selesai, simpan template Anda dan muat ulang halaman untuk melihat perubahan. Sekarang Anda dapat mengubah template sesuai dengan kebutuhan dan preferensi Anda.
Sekarang Anda sudah siap untuk mulai membuat template Anda sendiri. Proses ini bisa menjadi tantangan karena memahami tag Blogger mungkin memerlukan waktu dan percobaan. Oleh karena itu, saya sarankan untuk melakukan berbagai percobaan guna menguasai tag dan fitur yang tersedia.
Sebagai referensi tambahan, Anda dapat mengunjungi Blogger Code untuk mendapatkan panduan lebih lanjut dan contoh-contoh kode yang dapat membantu Anda. Jika Anda menemui kesulitan atau menemukan kesalahan, mohon dimaklumi. Saya juga masih dalam proses belajar dan terus berusaha untuk memberikan informasi yang akurat.
Penulis
