Cara Membuat Template Blogger Sendiri Dalam 5 Langkah Mudah

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.

  1. HTML
  2. CSS (Dasar)
  3. 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:

AttributJenisFungsi
idstringIni adalah ID dari section yang harus unik. Atribut ini bersifat wajib.
max-widgetsbooleanAtribut ini menentukan jumlah maksimal widget yang dapat ditampilkan dalam section. Nilai boolean digunakan untuk mengatur fitur ini.
classstringAtribut ini digunakan untuk menetapkan class pada section sesuai dengan kebutuhan styling atau script tambahan.
condstringAtribut ini memungkinkan Anda untuk menerapkan tag kondisional Blogger, yang berguna untuk menampilkan atau menyembunyikan section berdasarkan kondisi tertentu.
lockedbooleanAtribut ini mengatur apakah section dapat menambahkan widget atau tidak. Nilai boolean menentukan fitur ini.
tagstringAtribut ini mengatur nama tag yang akan muncul saat HTML dirender. Ini membantu dalam penataan dan identifikasi elemen pada blog.
namestringAtribut ini menentukan nama section yang akan muncul saat di tata letak. Nama ini membantu dalam pengorganisasian dan manajemen widget.
Baca Juga :  Apa itu AGC? Simak Kelebihan dan Kekurangannya Yang Wajib Diketahui

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:

AttributJenisFungsi
idstringIni berfungsi sebagai identitas widget dan harus unik. Atribut ini bersifat wajib.
typestringMenentukan tipe widget yang akan ditampilkan. Atribut ini juga wajib diisi.
lockedbooleanMengatur apakah widget dikunci atau tidak, sehingga tidak bisa diubah atau dihapus.
titlestringMenentukan judul widget yang akan tampil.
visiblebooleanMengatur 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“.

Edit Template

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>

Code 1

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.

Baca Juga :  Apa itu Bahasa Pemrograman? Pengertian dan Contohnya

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:

Code 2

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>

Code 3

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

  • Kontributor CobyDoc

    Dalam kehidupan ini, setiap individu adalah pelukis yang memancarkan warna dari keberadaannya. Kontributor, bagaikan garis halus dalam sebuah lukisan agung, sering kali tidak terlihat dengan jelas namun perannya amat krusial. Mereka adalah bayangan tak tampak yang memberi bentuk dan kedalaman pada karya yang lebih besar dari diri mereka sendiri. Seperti embun pagi yang menyegarkan dedaunan, mereka menyumbangkan sumbangan kecil namun berarti, menyadarkan kita bahwa keindahan dan kekuatan sering kali terletak pada kontribusi yang sederhana namun tulus.

    Lihat semua pos