Cara instalasi dan kustomisasi template Blogger (Plus UI dan lainnya) dengan mudah dan lengkap. Panduan ini cocok untuk pemula hingga tingkat lanjut agar blog tampil profesional, cepat, dan SEO friendly.
Artikel ini akan membimbing Anda langkah demi langkah untuk memasang dan menyesuaikan template di Blogger. Tutorial dibuat dengan bahasa sederhana dan mudah dipahami.
Catatan: Tutorial ini tidak hanya berlaku untuk template Plus UI, tetapi juga bisa diterapkan pada template Blogger lainnya, termasuk template yang berukuran besar atau kompleks. Langkah-langkah seperti penggunaan Theme Designer, Edit HTML, pengaturan mobile, dan override XML tetap relevan dan membantu mengoptimalkan tampilan serta performa blog Anda.
Cara Instalasi Template Blogger (Langkah Awal)
1. Download dan Persiapan Tema
Unduh file template .ZIP versi terbaru tema Plus UI atau template lain yang Anda sukai, lalu ekstrak di komputer.
Sebelum memulai instalasi, pahami menu Edit HTML karena akan sering digunakan saat menyesuaikan tema.
2. Menggunakan Theme Designer
Theme Designer digunakan untuk mengubah tampilan dasar blog seperti warna, latar belakang, dan lebar halaman.
- Buka Dashboard Blogger.
- Pilih menu Tema → klik Sesuaikan.
- Gunakan menu Latar Belakang, Lanjutan, dan Gadget.
- Sesuaikan tampilan sesuai kebutuhan.
3. Mengedit HTML (Edit XML Tema)
Fitur Edit HTML memberi kendali penuh untuk memodifikasi tema seperti CSS dan JavaScript.
- Dashboard → Tema
- Klik ikon panah → Edit HTML
- Lakukan perubahan sesuai kebutuhan
4. Jump ke Widget
Cara langsung menuju widget
Klik ikon panah kecil di editor HTML untuk melihat ID widget dan langsung mengeditnya.
5. Pengaturan Tampilan Mobile
Disarankan tetap menggunakan tampilan desktop agar desain konsisten.
- Menu Tema
- Pilih Pengaturan Mobile
- Pilih Desktop
- Simpan
6. Instalasi Tema
Metode 1: Upload XML
- Menu Tema
- Klik ikon panah → Pulihkan
- Pilih file XML
- Upload
Metode ini mempertahankan widget lama.
Metode 2 (Disarankan): Override XML
Metode ini menghapus semua kode lama dan memasang template baru secara bersih.
Peringatan: Backup tema sebelum melakukan override.
Cara Menghapus Tema Sebelumnya (Clean Install)
Gunakan tema kosong agar tidak terjadi konflik dengan template lama.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b'>
<body>
<b:section id='_' maxwidgets='1' showaddelement='false'/>
</body>
</html>
Langkah:
- Salin kode di atas
- Buka Edit HTML
- Hapus semua kode lama
- Tempel kode baru
- Simpan
Langkah Selanjutnya Setelah Instalasi
Setelah template berhasil dipasang, langkah berikutnya adalah melakukan pengaturan lanjutan agar blog tampil optimal, cepat, dan siap digunakan untuk kebutuhan SEO maupun monetisasi.
-
Pengaturan Dasar
Bagian ini sangat penting untuk memastikan blog memiliki identitas yang jelas dan siap diindeks oleh mesin pencari.
- Tambahkan favicon agar blog memiliki ikon di tab browser.
- Atur meta tag seperti deskripsi blog, Open Graph, dan Twitter Card untuk optimasi SEO dan share sosial media.
- Optimasi gambar dengan format WebP, ukuran yang tepat, dan atribut alt agar loading lebih cepat.
Baca panduan pengaturan dasar Blogger untuk penjelasan lengkap. -
Google AdSense
Jika Anda ingin menghasilkan uang dari blog, hubungkan blog dengan Google AdSense. Template modern biasanya sudah mendukung penempatan iklan otomatis.
Pelajari cara daftar dan optimasi Google AdSense. -
Google Analytics
Gunakan Google Analytics untuk memantau jumlah pengunjung, sumber trafik, dan perilaku pengguna di blog Anda.
Ikuti panduan Google Analytics untuk setup lengkap. - Pengaturan Halaman: Buat halaman penting seperti:
- Kontak: Halaman agar pengunjung bisa menghubungi Anda.
- Sitemap (opsional): Menampilkan daftar postingan dan halaman secara terorganisir. Sitemap XML tetap dibuat otomatis oleh Blogger.
Tips Agar Template Blogger Lebih SEO dan Cepat
Agar blog memiliki performa maksimal di mesin pencari dan loading lebih cepat, penting untuk melakukan optimasi setelah instalasi template. Berikut beberapa tips yang bisa Anda terapkan:
-
Gunakan template ringan dan responsive
Pilih template yang memiliki struktur kode bersih, cepat dimuat, dan sudah responsive agar tampil optimal di semua perangkat. -
Kompres gambar dan gunakan format WebP
Gunakan gambar berukuran kecil dengan format WebP agar loading lebih cepat tanpa mengurangi kualitas. -
Aktifkan lazy load pada gambar
Lazy load membantu menunda pemuatan gambar hingga dibutuhkan, sehingga mempercepat waktu loading halaman pertama (LCP). -
Hindari penggunaan script berlebihan
Terlalu banyak JavaScript atau widget eksternal dapat memperlambat blog. Gunakan hanya yang benar-benar diperlukan. -
Optimasi struktur heading dan internal link
Gunakan H1, H2, H3 secara terstruktur dan tambahkan internal link agar SEO lebih kuat dan mudah dipahami Google. -
Gunakan hosting gambar dari Blogger (CDN)
Gunakan URL gambar bawaan Blogger agar mendapatkan kecepatan maksimal dari CDN Google.
Dengan mengikuti panduan ini, Anda dapat memasang template Blogger dengan benar, cepat, dan tanpa error.
Jika panduan ini membantu, jangan lupa bookmark blog ini untuk mendapatkan tutorial terbaru.
FAQ (Pertanyaan Umum)
Apakah cara ini bisa digunakan untuk semua template Blogger?
Ya, tutorial ini bisa digunakan untuk semua template Blogger, baik template gratis maupun premium seperti Plus UI, Median UI, dan lainnya.
Apa perbedaan upload XML dan override XML di Blogger?
Upload XML hanya mengganti tampilan tanpa menghapus widget lama, sedangkan override XML akan menghapus semua kode lama dan memasang template baru secara bersih (clean install).
Apakah wajib melakukan clean install sebelum mengganti template?
Tidak wajib, tetapi sangat disarankan untuk menghindari error, bug tampilan, atau konflik script antara template lama dan baru.
Kenapa upload template Blogger sering gagal?
Biasanya karena ukuran file template terlalu besar atau koneksi tidak stabil. Solusinya gunakan komputer/PC dan metode paste manual di Edit HTML.
