ROLE:
Anda adalah Senior Blogger Theme Developer, UI/UX Designer,
Technical SEO Engineer, CSS Architect, Frontend Performance Engineer,
dan Reverse UI Analyst.
============================================================
PROJECT CONTEXT
============================================================
Saya sudah memiliki THEME BLOGGER / BLOGSPOT EXISTING yang
sudah berjalan dan memiliki struktur, fitur, serta desain dasar.
Saya ingin melakukan UPGRADE VISUAL BESAR pada theme tersebut
dengan mengadopsi karakter desain, struktur visual, dan
pengalaman pengguna yang terinspirasi dari:
https://www.igniel.com/
REFERENSI DESAIN UTAMA:
Igniel.com
PENTING:
Saya tidak ingin membuat theme baru dari nol.
Saya ingin theme existing saya ditingkatkan sehingga memiliki
kualitas visual dan pengalaman pengguna yang sekelas dengan
blog profesional seperti referensi tersebut.
Jangan sekadar mengganti warna.
Analisis pola desain referensi dan terapkan prinsipnya
secara tepat ke theme existing saya.
============================================================
FASE 1 — ANALISIS REFERENSI DESAIN
============================================================
Pelajari website referensi:
https://www.igniel.com/
Jika browser atau environment memungkinkan,
periksa:
- homepage
- halaman artikel
- navigasi
- header
- sidebar
- footer
- struktur card
- label
- typography
- spacing
- warna
- border
- button
- widget
- responsive behavior
- mobile navigation
- visual hierarchy
- interaksi hover
- struktur konten
Buat analisis desain:
1. Apa karakter visual utama website tersebut?
2. Bagaimana struktur layout-nya?
3. Bagaimana hubungan antara konten utama dan sidebar?
4. Bagaimana desain postingan?
5. Bagaimana widget ditampilkan?
6. Bagaimana navigasi dibuat?
7. Bagaimana spacing diterapkan?
8. Bagaimana typography digunakan?
9. Apa yang membuat tampilannya terlihat profesional?
10. Elemen mana yang cocok diterapkan pada theme saya?
Jangan mengarang hasil observasi.
Jika website tidak dapat diakses langsung,
jelaskan keterbatasan tersebut dan gunakan screenshot
atau referensi tambahan yang saya berikan.
============================================================
FASE 2 — ANALISIS THEME EXISTING
============================================================
Baca source code theme saya secara menyeluruh.
Jangan langsung coding.
Identifikasi:
- struktur XML Blogger
- header
- navigation
- homepage
- blog posts
- sidebar
- footer
- widget
- CSS
- JavaScript
- responsive layout
- dark/light mode
- SEO metadata
- schema markup
Bandingkan:
THEME EXISTING vs REFERENSI IGNIEL
Buat tabel:
| Komponen | Kondisi Existing | Karakter Referensi | Upgrade |
|----------|------------------|--------------------|---------|
Fokus pada perbedaan visual dan UX,
bukan menyalin source code.
============================================================
FASE 3 — TARGET DESIGN DIRECTION
============================================================
Terapkan design direction berikut:
INSPIRED BY IGNIEL.COM
+
MODERN BLOGGER MAGAZINE
+
CLEAN EDITORIAL LAYOUT
+
INTERACTIVE COLORFUL ACCENTS
+
PREMIUM CARD DESIGN
+
EXCELLENT READABILITY
Theme harus terlihat:
- modern
- rapi
- profesional
- menarik
- tidak membosankan
- memiliki karakter
- nyaman dibaca
- tidak terasa seperti template Blogger bawaan
- memiliki spacing yang lega
- memiliki visual hierarchy yang kuat
Jangan membuat desain yang terlalu ramai.
Gunakan warna-warni dan animasi sebagai aksen
yang memperkuat desain, bukan mengganggu konten.
============================================================
FASE 4 — LAYOUT & SPACING
============================================================
Perbaiki masalah utama theme existing:
JARAK ANTAR WIDGET TERLALU DEKAT.
Buat spacing system yang konsisten.
Perbaiki:
- jarak antar widget sidebar
- jarak antar postingan
- jarak header dengan konten
- jarak section homepage
- jarak widget title dengan isi
- padding card
- margin antar elemen artikel
- jarak sidebar dengan main content
- jarak footer dengan konten
Gunakan CSS modern:
- gap
- margin-block
- padding
- CSS variables
- responsive spacing
Target:
Layout lega, rapi, seimbang, dan nyaman.
Jangan menggunakan margin acak yang menyebabkan
layout tidak konsisten.
============================================================
FASE 5 — HEADER & NAVIGATION
============================================================
Upgrade header agar memiliki karakter visual profesional.
Analisis referensi dan terapkan pendekatan yang sesuai
pada theme existing.
Perhatikan:
- logo
- site title
- menu navigasi
- menu aktif
- hover state
- mobile menu
- search
- sticky behavior jika relevan
- spacing header
- alignment
- responsive behavior
Navigasi harus:
- mudah dipahami
- nyaman digunakan
- tidak terlalu padat
- accessible
- tetap ringan
Jangan merusak struktur URL menu yang sudah ada.
============================================================
FASE 6 — POST CARD DESIGN
============================================================
Upgrade tampilan postingan agar lebih menarik.
Terapkan:
- card surface modern
- border menarik
- rounded corners proporsional
- padding lega
- thumbnail yang rapi
- metadata terstruktur
- judul lebih menonjol
- excerpt nyaman dibaca
- read more yang menarik
- hover effect
Saya ingin border postingan memiliki karakter
COLORFUL / RAINBOW ANIMATED BORDER.
Namun gunakan pendekatan elegan seperti:
- conic-gradient
- animated gradient
- subtle glow
- pseudo-element
- smooth transition
Jangan membuat efek pelangi terlalu mencolok
hingga mengganggu readability.
Saat hover:
- border bergerak halus
- card sedikit terangkat
- glow meningkat secara wajar
- thumbnail dapat memiliki zoom ringan
- tidak menyebabkan layout shift
Gunakan prefers-reduced-motion.
============================================================
FASE 7 — LABEL BADGES
============================================================
Saya ingin label Blogger tampil seperti badge modern
yang menarik dan berwarna-warni.
Desain:
- pill badge
- gradient
- border colorful
- warna berbeda yang harmonis
- subtle glow
- shimmer
- hover animation
- active state
- readable text
Label harus terlihat seperti komponen UI premium.
Efek yang diinginkan:
- kerlip halus
- highlight bergerak perlahan
- gradient hidup
- hover lift
- perubahan warna yang lembut
Jangan membuat animasi berkedip cepat.
Pastikan label:
- tidak overflow
- dapat wrap di mobile
- tidak menyebabkan CLS
- tetap terlihat pada dark/light mode
============================================================
FASE 8 — SIDEBAR & WIDGET
============================================================
Adopsi pendekatan layout widget yang rapi
dan profesional seperti referensi.
Upgrade:
- widget title
- widget container
- widget list
- label list
- link list
- popular content jika tersedia
- custom HTML widget
- profile widget jika tersedia
Setiap widget harus memiliki:
- spacing lega
- visual hierarchy
- border/surface yang konsisten
- heading menarik
- hover effect jika sesuai
Jangan membuat semua widget terlihat identik
secara membosankan.
Sidebar harus terasa sebagai bagian integral
dari desain website, bukan tempelan widget Blogger.
============================================================
FASE 9 — TYPOGRAPHY & READABILITY
============================================================
Upgrade:
- font stack
- ukuran judul
- line-height
- paragraph spacing
- heading hierarchy
- metadata
- link style
- blockquote
- code block
- list
- table
Artikel harus nyaman dibaca dalam waktu lama.
Jangan mengorbankan readability demi efek visual.
Pastikan:
- kontras cukup
- ukuran font mobile nyaman
- line length tidak terlalu panjang
- heading memiliki hierarchy
- link mudah dikenali
============================================================
FASE 10 — INTERACTIVE VISUAL SYSTEM
============================================================
Gunakan CSS-first interaction.
Tambahkan jika sesuai:
- animated gradient border
- colorful badges
- hover lift
- shimmer
- gradient accent
- animated underline
- subtle glow
- focus-visible
- smooth transition
Jangan menggunakan library animasi besar.
Jangan menambahkan jQuery.
Jangan membuat animasi yang:
- mengganggu pembacaan
- menyebabkan CLS
- membebani CPU secara berlebihan
- membuat mobile tidak nyaman
- mengganggu accessibility
============================================================
FASE 11 — HAPUS WIDGET BAWAAN
============================================================
Hapus widget berikut dari layout aktif theme:
1. Cari Blog Ini
2. Atribusi
3. Arsip Blog
4. Label
5. Laporkan Penyalahgunaan
6. Mengenai Saya
7. Entri yang diunggulkan
8. Postingan populer
Tujuan:
Saya tidak ingin menghapusnya satu per satu
melalui Blogger Layout.
PENTING:
- Hapus instance widget yang diminta dari konfigurasi theme
- Jangan menghapus seluruh section
- Jangan menghapus kemampuan Add a Gadget
- Jangan mengunci Layout Editor
- Jangan merusak Blog Posts utama
- Jangan menghapus sistem widget Blogger
- Jangan menghapus data blog
- Jangan mengubah URL artikel
Setelah widget dihapus,
pastikan saya masih dapat menambahkan widget baru
melalui Blogger Layout.
Jika widget tertentu tidak dapat dihilangkan
sepenuhnya melalui source XML,
jelaskan keterbatasannya.
============================================================
FASE 12 — PERTAHANKAN SEO EXISTING
============================================================
Upgrade visual tidak boleh merusak:
- title tag
- meta description
- canonical
- robots
- Open Graph
- Twitter Card
- JSON-LD
- Article schema
- BreadcrumbList
- WebSite schema
- H1 dinamis
- semantic HTML
- image alt
- internal linking
Jangan menghapus fungsi SEO yang sudah benar.
============================================================
FASE 13 — DARK / LIGHT MODE
============================================================
Jika theme memiliki Dark/Light Mode,
pastikan semua perubahan visual kompatibel.
Periksa:
- rainbow border
- badge
- widget
- header
- typography
- card
- background
- button
- focus state
Pastikan tetap readable dan elegan.
============================================================
FASE 14 — RESPONSIVE DESIGN
============================================================
Uji visual pada:
- mobile
- tablet
- desktop
- wide screen
Pastikan:
- layout tidak rusak
- sidebar menjadi stack dengan baik
- label tidak overflow
- card tidak melebar
- navigation tetap nyaman
- spacing mobile proporsional
- animasi tidak mengganggu touchscreen
- tidak ada horizontal overflow
============================================================
FASE 15 — IMPLEMENTATION RULES
============================================================
Prioritas perubahan:
1. CSS architecture
2. Spacing system
3. Widget styling
4. Post card
5. Label badge
6. Header/navigation
7. Typography
8. Responsive layout
9. Animation
10. XML widget cleanup
Jangan melakukan redesign total jika CSS override
dan perubahan markup terbatas sudah cukup.
Jika markup existing menghambat desain,
ubah hanya bagian yang diperlukan.
Jangan mengubah seluruh struktur theme
tanpa alasan yang jelas.
============================================================
FASE 16 — QUALITY CONTROL
============================================================
Setelah implementasi:
Lakukan audit ulang.
Periksa:
[ ] Tampilan lebih dekat dengan karakter referensi
[ ] Layout lebih profesional
[ ] Spacing antar widget lebih lega
[ ] Header lebih menarik
[ ] Navigation lebih rapi
[ ] Post card lebih modern
[ ] Rainbow border berjalan halus
[ ] Label badge berwarna-warni
[ ] Label memiliki animasi menarik
[ ] Sidebar lebih terorganisasi
[ ] Typography lebih nyaman
[ ] Dark mode aman
[ ] Light mode aman
[ ] Mobile responsive
[ ] Tidak ada horizontal overflow
[ ] Tidak ada layout shift akibat animasi
[ ] Tidak ada jQuery baru
[ ] Tidak ada dependency berat
[ ] SEO existing tetap berfungsi
[ ] Blogger XML valid
[ ] Widget yang diminta sudah dihapus
[ ] Add a Gadget tetap tersedia
[ ] Blog Posts tetap berjalan
============================================================
FASE 17 — OUTPUT AKHIR
============================================================
Berikan:
1. Analisis desain referensi
2. Perbandingan existing vs target
3. File yang diubah
4. CSS yang di-upgrade
5. Komponen visual yang diperbarui
6. Widget yang dihapus
7. Fitur yang dipertahankan
8. Hasil validasi Blogger XML
9. Hasil responsive audit
10. Hasil SEO regression audit
11. Masalah yang ditemukan
12. Masalah yang diperbaiki
13. Cara testing di Blogger
14. Screenshot preview jika environment mendukung
JANGAN membuat theme baru dari nol.
JANGAN menyalin source code atau identitas brand
website referensi secara mentah.
JANGAN menghapus fitur existing yang masih diperlukan.
FOKUS:
Mengubah theme Blogger existing menjadi lebih modern,
profesional, interaktif, menarik, dan memiliki karakter
visual yang terinspirasi dari Igniel.com.