Panduan Pengaturan Template Wuzz
Daftar Isi
Sebelum mengikuti panduan ini disarankan sudah memahami fitur-fitur dasar yang ada di platform blogger, mulai dari cara posting artikel, membuat halaman statis, memasang widget, dll.
Di panduan ini hanya menjelaskan cara pengaturan template, bukan panduan cara menggunakan platform blogger dari awal.
Mohon panduan di bawah ini dibaca dengan teliti supaya tidak ada kesalahan dalam penggunaan template.
Pengaturan Fitur Template Wuzz
Fitur-fitur pada template blogger wuzz dapat diatur dengan mudah menggunakan kode pengaturan.
Cara penerapannya sebagai berikut:
- Buat kode pengaturan menggunakan tool yang sudah disediakan di sini.
- Setelah kodenya dibuat, masuk ke menu Tata Letak > edit widget “Kode Pengaturan Template“
- Letakkan kode pengaturannya di bagian Konten widget tersebut.
Kode pengaturan template sifatnya opsional, boleh dipasang boleh juga tidak.
Jika tidak dipasang maka akan menggunakan pengaturan default template.
Membuat Landing Page di Halaman Statis / Homepage
Salah satur fitur baru di template blogger Wuzz adalah fitur Landing Page yang bisa dipasang di Homepage dan juga di Halaman statis.
Landing page di template blogger Wuzz terdiri dari beberapa bagian atau section, diantaranya adalah:
- Hero Section
- Statistics Section
- Value Proposition Section
- Features Section
- Social Proof Section
- Pricing Section
- Call To Action Section
- dan FAQ Section
Selain bagian-bagian tesebut sebenarnya masih banyak bagian-bagian lain yang biasanya ada pada landing page.
Tapi pada template Wuzz saya hanya menggunakan 8 saja yang menurut saya paling penting.
Tidak menutup kemungkinan nanti di versi-versi berikutnya bisa saya tambahkan bagian-bagian yang lain.
Persiapan Membuat Landing Page
Untuk membuat Landing page di Template Wuzz ada beberapa hal yang perlu disiapkan, diantaranya adalah:
- Gambar produk utama untuk dipasang di bagian Hero Section. Aspek rasio 1:1 dengan resolusi minimal 450x450pixel.
- Gambar-gambar untuk dipasang di bagian Value Proposition. Aspek rasio 1:1 dengan resolusi minimal 320x320pixel.
- Gambar-gambar atau Icon SVG untuk dipasang di bagian Features. Aspek rasio 1:1 dengan resolusi minimal 80x80pixel.
- Gambar Avatar untuk dipasang di bagian Social Proof. Aspek rasio 1:1 dengan resolusi minimal 50x50pixel.
- Tentunya konten-konten tulisan untuk dipasang di setiap bagian juga harus disiapkan.
Gambar-gambar yang sudah disiapkan harus diupload dulu ke blog, karena yang dibutuhkan adalah URL gambarnya.
Untuk cara upload gambar ke blog dan mendapatkan URL gambarnya bisa menggunakan cara ini.
Membuat Kode HTML Landing Page
Jika semuanya sudah siap, selanjutnya sobat bisa membuat kode HTML landing page menggunakan tool generator yang sudah disediakan di sini.
Memasang Landing Page di Homepage
Untuk memasang landing page di Homepage, caranya sebagai berikut:
- Masuk ke menu Tata Letak > edit widget “Kode HTML Landing Page“
- Letakkan kode HTML landing page-nya di bagian Konten widget tersebut.
- Klik “Simpan“
Memasang Landing Page di Halaman Statis
Untuk landing page di Halaman Statis, caranya sebagai berikut:
- Buat halaman statis baru di menu Halaman.
- Jangan lupa isi Judul dan Deskripsi halaman.
- Letakkan kode HTML landing page-nya di bagian Konten halaman.
- Klik “Publikasikan“
Di template blogger wuzz terdapat dua buah menu navigasi, yang pertama adalah menu navigasi yang berada di header (sebelah kanan judul blog), dan yang kedua adalah menu yang berada di bawah header.
Memasang Menu Navigasi di Header
Untuk menu navigasi yang berada di header untuk mengisi menunya harus menggunakan kode HTML.
Berikut langkah-langkahnya:
- Buat kode menu navigasi menggunakan tool yang sudah disediakan di sini.
- Setelah kodenya dibuat, masuk ke menu Tata Letak > edit widget “Kode Menu Navigasi“
- Letakkan kodenya di bagian Konten widget tersebut.
Memasang Menu di Bawah Header
Menu navigasi di bawah header untuk mengeditnya cukup melalui menu tata letak saja, tidak perlu menggunakan kode HTML.
Menu navigasi di bawah header pada dasarnya adalah widget label yang dibuat seperti menu navigasi, jadi untuk menu navigasi tersebut hanya bisa menampilkan link label postingan.
Jika ingin menampilkan label “Populer”, “Trending”, atau “Hot” seperti di blog demo, cukup edit postingan dan isi label postingannya dengan label tersebut (Populer, Trending, Hot).
Memasang Icon Media Sosial
Berikut langkah-langkahnya:
- Buat kode icon media sosial menggunakan tool yang sudah disediakan di sini.
- Setelah kodenya dibuat, masuk ke menu Tata Letak > edit widget “Icon Media Sosial” >
- Letakkan kodenya di bagian Konten widget tersebut.
Mengganti Judul Blog dengan Logo
Berikut langkah-langkahnya:
- Siapkan gambar logo yang akan digunakan
- Masuk ke menu “Tata Letak” > edit widget “Header” > Upload gambar dari komputer
- Pada bagian “Penempatan” pilih “Selain judul dan keterangan” > Simpan.
Note:
- Usahakan logonya dibuat memanjang, bukan kotak (1:1). Untuk resolusi logo bebas.
- Kalau logonya kotak sudah pasti akan terlihat kecil.
- Teks pada logo dibuat 1 baris, jangan 2 baris apalagi 3 baris.
- Jangan gunakan banner sebagai logo. Banner dan logo adalah dua hal yang berbeda.
- Sebagai referensi, di blog demo menggunakan logo dengan resolusi 200×90 pixel.
Berikut langkah-langkahnya:
- Masuk ke “Tata Letak” > edit widget “Teks Footer“
- di bagian konten widget masukkan tulisan apa saja yang ingin dimunculkan di footer > Simpan.
Mengganti Favicon
Berikut langkah-langkahnya:
- Masuk ke menu “Setelan” > “Dasar” > “Favicon“
- Upload favicon milik sobat.
Note:
- Pastikan gambar favicon persegi dan ukurannya tidak lebih dari 100KB.
- Jika Favicon tidak berubah di browser, clear cache browser dulu setelah itu cek lagi
- Jika Favicon tidak berubah di Google, harap bersabar, butuh waktu tidak bisa otomatis berubah.
Memunculkan Daftar Isi di Postingan
Di template Wuzz terdapat fitur Daftar Isi Otomatis. Daftar Isi postingan akan otomatis muncul jika di dalam postingan terdapat 2 atau lebih Heading (H2).
Default Heading (H2) bisa diganti melaui Kode Pengaturan Template.