Cara Instalasi dan Kustomisasi Template Blog

Panduan Lengkap Instalasi dan Kustomisasi Template Plus UI, dan lain nya di Blogger

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.

Langkah pertama untuk memulai:

1. Download dan Persiapan Tema

Unduh file Template .ZIP versi terbaru tema Plus UI Atau template blog lain nya yang kamu suka, dan ekstrak di komputer Anda.

Outline! Jika kamu belum memiliki template custom blogger Lihat Disini

Sebelum memulai instalasi, pahami pengaturan dasar Blogger, terutama 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 atau menu Tata Letak → Perancang Tema.
Pada halaman Theme Designer, terdapat menu Latar Belakang, Lanjutan, dan Gadget di kiri, dengan pratinjau blog di kanan.
Untuk mengubah bagian tertentu, buka tab Lanjutan dan pilih komponen dari dropdown.

Info! Jika saat upload template Blogger muncul Error / tidak dapat memulihkan template, biasanya karena ukuran file template terlalu besar. Solusinya, lakukan proses instalasi menggunakan komputer/PC agar lebih stabil.

3. Mengedit HTML (Edit XML Tema)

Fitur Edit HTML memberi kendali penuh untuk memodifikasi tema. Kode XML tema berisi pengaturan, konten, tag Blogger, CSS, dan JavaScript.

Dashboard Blogger → menu Tema.
Klik ikon panah kecil di sebelah tombol Sesuaikan.
Pilih Edit HTML untuk membuka editor tema.

4. Jump ke Widget

Cara langsung menuju widget dengan ID tertentu

Untuk mempercepat pengeditan, klik ikon panah kecil di editor HTML. ID widget akan muncul. Pilih widget yang ingin diedit agar langsung bisa memodifikasi tanpa mencari satu per satu.

5. Pengaturan Tampilan Mobile

Tampilan mobile otomatis ditandai dengan ?m=1. Template contoh nya Plus UI sudah responsive, sehingga pengaturan mobile biasanya tidak perlu diubah. Disarankan tetap menampilkan tema desktop untuk konsistensi.

Dashboard Blogger → menu Tema.
Klik ikon panah kecil di sebelah Sesuaikan.
Pilih Pengaturan Mobile, lalu pilih Desktop untuk opsi "Tampilkan tema Desktop atau Mobile di perangkat mobile?".
Klik Simpan.

6. Instalasi Tema

Metode 1: Unggah XML

Dashboard Blogger → menu Tema → klik ikon panah → pilih Pulihkan.
Pilih file .XML tema baru → klik Unggah.
Periksa tampilan blog melalui Lihat Blog atau muat ulang halaman.

Metode ini mempertahankan widget lama, namun tampilan akhir mungkin berbeda dari demo tema.

Metode 2 (Disarankan): Override XML

Metode ini menimpa kode XML lama sehingga tema baru terpasang bersih. Semua pengaturan dan widget lama akan dihapus.

Peringatan! Backup tema lama sebelum menggunakan metode ini.

Menghapus Tema Sebelumnya

Pasang tema kosong terlebih dahulu untuk memastikan tidak ada pengaturan lama yang tercampur. Kode tema kosong:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='clean-install.xml' b:templateVersion='0.0.1' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><b:section id='_' maxwidgets='1' showaddelement='false'/></html>

Caranya:

Salin kode tema kosong.
Buka Editor HTML Blogger.
Hapus semua kode lama → Ctrl + A.
Tempelkan kode tema kosong → Ctrl + V.
Simpan tema.
Gunakan opsi Pulihkan atau tempel kode XML tema baru untuk memasang tema sepeti Median ui dan Plus UI.

Langkah Selanjutnya Setelah Instalasi

Setelah tema terpasang, lakukan penyesuaian agar blog sesuai kebutuhan:

Pengaturan Dasar
- Menambahkan favicon manual.
- Menyesuaikan meta tag default (Open Graph dan Twitter Card).
- Memastikan rasio dan ukuran gambar sesuai rekomendasi.
- Optimasi blog dan postingan agar tampil maksimal.
Baca Panduan Pengaturan Dasar untuk detail lengkap.
Google AdSense: Tema otomatis memuat skrip jika akun AdSense terhubung.
Baca Panduan Google AdSense untuk detail lengkap.
Google Analytics: Tema otomatis memuat skrip jika Measurement ID sudah ditambahkan.
Baca Panduan Google Analytics untuk detail 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.

Baca Juga :

Dengan mengikuti panduan ini, template akan terpasang dengan benar dan blog Anda siap digunakan, dioptimalkan untuk tampilan desktop dan mobile, serta siap untuk Google AdSense dan Google Analytics.

Faq Post:

Apakah tutorial ini bisa diterapkan pada template lain?

Ya, tutorial ini fleksibel dan bisa diterapkan pada template Blogger lain, termasuk yang berukuran besar atau kompleks. Langkah-langkah seperti Edit HTML, Theme Designer, dan pengaturan mobile tetap relevan.

Apakah override XML akan menghapus semua widget?

Ya, menggunakan metode override XML akan menimpa kode tema lama, sehingga semua pengaturan dan widget lama akan dihapus. Disarankan untuk backup tema lama sebelum melakukan override.

Apakah tema otomatis memuat Google AdSense dan Analytics?

Ya, tema akan otomatis memuat skrip Google AdSense jika akun sudah terhubung, dan Google Analytics jika Measurement ID sudah ditambahkan melalui pengaturan blog.

Apakah saya perlu mengatur pengaturan mobile secara khusus?

Tidak wajib, karena tema Plus UI sudah responsive. Namun, disarankan menampilkan versi desktop pada mobile agar tampilan konsisten dan menghindari masalah layout.

TipsTechPraktis