Kumpulan Kode Template Blogger Lengkap dan Fungsinya

---

Memilih template merupakan salah satu tahap penting ketika membangun blog. Template bukan sekadar menentukan warna dan bentuk halaman, tetapi juga memengaruhi bagaimana konten disusun, navigasi digunakan, widget ditempatkan, serta bagaimana pengunjung berinteraksi dengan blog.

Template bawaan Blogger maupun template pihak ketiga biasanya masih perlu disesuaikan dengan kebutuhan pemilik blog. Modifikasi dapat berupa mengganti warna, mengatur typography, menambahkan widget, mengubah struktur halaman, membuat elemen responsif hingga menentukan suatu elemen hanya tampil pada halaman tertentu.

Untuk melakukan modifikasi tersebut, setidaknya kita perlu mengenal HTML, CSS dan JavaScript. Pada Blogger terdapat satu lapisan tambahan berupa tag khusus template seperti b:if, b:loop, b:include, data:, expr: dan berbagai data view yang diproses langsung oleh sistem Blogger.

Informasi Singkat

---

Artikel ini merangkum snippet yang sering dipakai saat memodifikasi template Blogger, mulai dari CSS sederhana, conditional tag, data tag, widget tag, sampai contoh pemasangan kode. Gunakan snippet sesuai kebutuhan dan selalu simpan backup template sebelum melakukan perubahan besar.

---

Sumber : Blogger Help

BLOGGER DEVELOPMENT

Kumpulan Kode Penting untuk Modifikasi Template Blogger

Memahami HTML, CSS, JavaScript serta tag khusus Blogger akan membuat proses memodifikasi template jauh lebih mudah. Pada artikel ini kita akan membahas kumpulan kode Blogger yang paling berguna, mulai dari CSS sederhana hingga conditional tag dan data tag untuk pengembangan template maupun custom widget.

HTMLStruktur dan elemen sebuah halaman web.

CSSMengatur tampilan, layout dan responsivitas.

JavaScriptMenambahkan logika serta interaksi pada halaman.

Informasi: sebelum mengubah kode template Blogger, sebaiknya lakukan backup tema terlebih dahulu. Modifikasi yang salah pada struktur XML dapat menyebabkan template gagal disimpan atau beberapa widget tidak bekerja.

Kode Warna HTML dan CSS

Warna pada website umumnya diatur menggunakan CSS. Salah satu format warna yang paling mudah dikenali adalah hexadecimal dengan pola #RRGGBB.

#000000 Warna hitam.

#FFFFFF Warna putih.

#0083DA Contoh warna biru.

Selain hexadecimal, CSS modern juga dapat menggunakan format rgb(), rgba(), hsl() dan berbagai format warna lainnya.

.contoh{ background:#0083da; color:#ffffff; border:1px solid #056aaa; }

Untuk mencari kombinasi warna yang sesuai, Anda juga dapat menggunakan halaman Daftar Kode Warna HTML di CodeFlare.

Mengatur Quick Edit Blogger

Pada beberapa template Blogger lama terdapat elemen quickedit atau tombol pengeditan widget yang ditampilkan ketika administrator blog sedang login. Jika template Anda masih menggunakannya dan ingin menyembunyikan tombol tersebut dari tampilan, CSS berikut dapat digunakan.

.quickedit{ display:none!important; }

Kode CSS dapat ditempatkan pada bagian CSS template, misalnya sebelum ]]></b:skin> apabila struktur template masih menggunakan b:skin.

Catatan: jangan menghapus kode template hanya karena namanya terlihat tidak digunakan. Beberapa template memiliki struktur widget yang berbeda sehingga perubahan sebaiknya dilakukan setelah memahami fungsi elemen tersebut.

Halaman Error 404 Blogger

Error 404 Not Found terjadi ketika alamat yang diminta tidak memiliki resource atau halaman yang sesuai. Kondisi ini dapat terjadi karena artikel dihapus, permalink berubah atau pengguna membuka URL yang salah.

Pada template Blogger modern, halaman error dapat dikenali menggunakan data:view.isError.

<b:if cond='data:view.isError'> <div class='error-page'> <h1>404 - Halaman Tidak Ditemukan</h1> <p>Maaf, halaman yang Anda cari tidak tersedia.</p> <a expr:href='data:blog.homepageUrl'>Kembali ke Beranda</a> </div> </b:if>

Hindari langsung mengalihkan semua halaman 404 ke homepage menggunakan JavaScript. Lebih baik berikan halaman 404 yang jelas dan gunakan redirect hanya apabila memang terdapat URL lama yang mempunyai halaman pengganti yang relevan.

Apabila sebuah artikel berpindah URL, gunakan fitur redirect Blogger untuk mengarahkan alamat lama ke alamat baru yang tepat.

Menangani Link pada Komentar

Artikel lama sering menggunakan jQuery untuk mencari seluruh link pada komentar lalu menghapusnya secara otomatis. Cara tersebut cukup agresif karena link yang sebenarnya valid juga dapat ikut terhapus.

Jika hanya ingin mengubah link komentar agar tidak memberikan sinyal SEO tertentu, penanganan sebaiknya dilakukan pada output link di template. Contoh struktur HTML umum:

<a href="URL-PENGGUNA" rel="ugc nofollow"> Nama Pengguna </a>

Untuk komentar yang dikelola melalui sistem eksternal, gunakan fitur moderasi, filter spam, dan pengaturan bawaan layanan komentar tersebut daripada memanipulasi seluruh isi komentar dengan JavaScript.

Lebih aman: aktifkan moderasi komentar Blogger dan hapus komentar spam dari dashboard apabila memang diperlukan.

Heading H1 dan Logo Blogger

Heading membantu membentuk struktur dokumen. Namun menempatkan tag h1 pada gambar logo bukan aturan wajib. Pada halaman artikel, biasanya lebih penting memastikan judul utama artikel memiliki struktur heading yang jelas dan tidak menggunakan heading hanya untuk keperluan memperbesar teks.

Jika logo dibuat sebagai link menuju homepage, struktur sederhananya dapat berupa:

<a class='blog-logo' expr:href='data:blog.homepageUrl' expr:aria-label='data:blog.title'> <img expr:alt='data:blog.title' expr:src='data:sourceUrl'/> </a>

Selalu tambahkan atribut alt yang relevan pada gambar agar konteks gambar dapat dipahami dengan lebih baik.

Membatasi Jumlah Posting Halaman Label

Blogger dapat menerima parameter max-results pada halaman label. Contohnya:

/search/label/Blogger?max-results=5

Apabila URL label dibuat melalui expression pada template, parameter dapat ditambahkan sesuai struktur URL yang digunakan template.

<a expr:href='data:label.url + "?max-results=5"'> <data:label.name/> </a>

Angka 5 dapat diganti dengan jumlah artikel yang ingin ditampilkan.

Tahun Copyright Otomatis

Daripada menulis tahun secara manual setiap pergantian tahun, bagian copyright dapat dibuat dinamis menggunakan JavaScript kecil.

<div class="copyright"> Copyright &copy; <span id="copyrightYear"></span> Nama Blog. All Rights Reserved. </div> <script> //<![CDATA[ (function(){ var el=document.getElementById('copyrightYear'); if(el) el.textContent=new Date().getFullYear(); })(); //]]> </script>

Cara ini lebih rapi daripada menggunakan document.write() di tengah dokumen.

Conditional Tag Blogger Modern

Conditional tag merupakan salah satu bagian paling berguna ketika melakukan modifikasi template. Dengan conditional tag kita dapat menentukan apakah sebuah widget, script, iklan atau elemen HTML hanya dimuat pada jenis halaman tertentu.

Hanya di Homepage

<b:if cond='data:view.isHomepage'> KODE DI SINI </b:if>

Hanya di Halaman Artikel

<b:if cond='data:view.isPost'> KODE DI SINI </b:if>

Hanya di Static Page

<b:if cond='data:view.isPage'> KODE DI SINI </b:if>

Hanya di Halaman Label

<b:if cond='data:view.isLabelSearch'> KODE DI SINI </b:if>

Halaman Pencarian

<b:if cond='data:view.isSearch'> KODE DI SINI </b:if>

Halaman Error

<b:if cond='data:view.isError'> KODE DI SINI </b:if>

Post dan Static Page

<b:if cond='data:view.isSingleItem'> KODE DI SINI </b:if>

Selain Homepage

<b:if cond='!data:view.isHomepage'> KODE DI SINI </b:if>

Kondisi	Contoh
Homepage	data:view.isHomepage
Artikel	data:view.isPost
Static page	data:view.isPage
Single item	data:view.isSingleItem
Label	data:view.isLabelSearch
Search	data:view.isSearch
Error	data:view.isError

Menggabungkan Beberapa Kondisi

Kita juga dapat membuat lebih dari satu kondisi.

<b:if cond='data:view.isPost or data:view.isPage'> TAMPIL PADA ARTIKEL ATAU STATIC PAGE </b:if>

Untuk kondisi yang harus terpenuhi secara bersamaan:

<b:if cond='data:view.isPost and !data:view.isError'> KODE DI SINI </b:if>

If, Elseif dan Else

<b:if cond='data:view.isHomepage'> KODE HOMEPAGE <b:elseif cond='data:view.isPost'/> KODE HALAMAN ARTIKEL <b:else/> KODE HALAMAN LAIN </b:if>

Conditional tag sangat berguna untuk mengurangi script yang sebenarnya tidak dibutuhkan pada halaman tertentu. Misalnya script khusus artikel tidak perlu selalu dimuat pada homepage.

Conditional Tag pada Widget Blogger

Conditional tag dapat ditempatkan di dalam bagian b:includable sebuah widget agar isi widget hanya ditampilkan pada kondisi tertentu.

Contoh widget HTML hanya muncul pada halaman artikel:

<b:widget id='HTML30' locked='false' title='Widget Artikel' type='HTML'> <b:includable id='main'> <b:if cond='data:view.isPost'> <b:if cond='data:title != ""'> <h2 class='title'> <data:title/> </h2> </b:if> <div class='widget-content'> <data:content/> </div> </b:if> </b:includable> </b:widget>

Kelebihan pendekatan ini adalah gadget masih dapat dikelola dari menu Layout Blogger, sementara tampilannya pada frontend dikontrol menggunakan conditional tag.

Membungkus Satu Section

Conditional tag juga dapat diterapkan pada kelompok widget.

<b:if cond='data:view.isPost'> <div id='sidebar-article'> <b:section class='sidebar' id='sidebarArticle' maxwidgets='5' showaddelement='yes'> </b:section> </div> </b:if>

Pada template Blogger berbasis XML, pastikan tag dibuka dan ditutup dengan benar. Satu kesalahan struktur dapat membuat template gagal disimpan.

Widget Tags dan Data Tags Blogger

Selain HTML biasa, template Blogger menggunakan sejumlah tag khusus untuk mengambil data dan mengatur proses rendering template.

b:if Menjalankan conditional.

b:loop Melakukan perulangan data.

data: Mengambil data Blogger.

Beberapa Widget Tag yang Sering Digunakan

Tag	Fungsi umum
b:include	Memanggil sebuah includable.
b:includable	Mendefinisikan blok template yang dapat dipanggil.
b:loop	Melakukan perulangan pada kumpulan data.
b:if	Membuat kondisi.
b:switch	Mengelola beberapa kondisi pilihan.
b:eval	Mengevaluasi expression.
b:with	Membuat alias atau variable sementara.
expr:	Membuat atribut menggunakan expression Blogger.
data:	Mengambil data yang tersedia pada konteks template.

Contoh Data Output

<data:blog.title/>

Kode tersebut digunakan untuk menghasilkan data judul blog pada konteks yang mendukungnya.

Contoh Expression Attribute

<a expr:href='data:blog.homepageUrl'> Kembali ke Homepage </a>

Contoh b:loop

<b:loop values='data:posts' var='post'> <a expr:href='data:post.url'> <data:post.title/> </a> </b:loop>

Contoh b:with

<b:with value='data:blog.title' var='namaBlog'> <span> <data:namaBlog/> </span> </b:with>

Jika Anda ingin membuat template atau widget Blogger yang kompleks, memahami struktur data dan konteks setiap data: akan jauh lebih penting dibanding sekadar menghafal snippet.

Cara Memasang Kode pada Template Blogger

Untuk kode yang memang ditujukan bagi template, lakukan pemasangan melalui editor HTML tema.

1

Buka dashboard Blogger.

2

Pilih blog yang ingin dimodifikasi.

3

Buka menu Theme / Tema.

4

Lakukan backup template terlebih dahulu.

5

Pilih menu Edit HTML.

6

Cari bagian kode yang ingin dimodifikasi.

7

Pasang snippet sesuai petunjuk masing-masing kode.

8

Simpan template lalu periksa halaman desktop dan mobile.

Jangan langsung mencoba banyak perubahan sekaligus. Lakukan modifikasi secara bertahap sehingga apabila terjadi error Anda dapat mengetahui perubahan mana yang menjadi penyebabnya.

HTML, CSS, JavaScript atau Kode Blogger?

Kesalahan yang cukup sering terjadi pada pemula adalah menganggap seluruh kode pada template sebagai HTML. Padahal template Blogger menggabungkan beberapa teknologi sekaligus.

Jenis	Contoh	Kegunaan
HTML	<div>	Membentuk struktur halaman.
CSS	.widget{...}	Mengatur desain.
JavaScript	addEventListener()	Membuat interaksi dan logika.
Blogger Tag	<b:if>	Mengatur rendering template Blogger.
Blogger Data	<data:blog.title/>	Mengambil data Blogger.
Expression	expr:href	Menghasilkan nilai atribut secara dinamis.

Ringkasnya

Modifikasi template Blogger akan jauh lebih mudah apabila kita memahami dasar HTML, CSS dan JavaScript sekaligus struktur khusus template Blogger. Tidak semua snippet lama yang ditemukan di internet masih cocok digunakan apa adanya, sehingga fungsi kode perlu dipahami terlebih dahulu sebelum dipasang.

Mulailah dari perubahan sederhana seperti CSS, kemudian pelajari conditional tag, data tag, widget tag dan expression Blogger. Setelah memahami konsep tersebut, Anda akan lebih mudah membuat widget sendiri, mengatur layout berdasarkan jenis halaman dan melakukan optimasi template tanpa terlalu bergantung pada snippet siap pakai.

Yang paling penting, selalu simpan backup template sebelum melakukan perubahan besar. Dengan demikian Anda memiliki versi aman yang dapat dikembalikan apabila eksperimen kode menyebabkan error.

Butuh Bantuan Custom Blogger?

Ingin membuat website Blogger, memperbaiki template, mengembangkan widget khusus atau memiliki ide fitur yang belum tersedia pada template Anda? CodeFlare dapat membantu mengembangkan solusi sesuai kebutuhan.

Jasa Website Blogger Custom Widget & Template

Custom widget sederhana mulai dari Rp50.000. Harga menyesuaikan tingkat kerumitan desain, fitur dan kompleksitas script yang dibutuhkan.