Generator HTML Cleaner

Pendahuluan

Tool ini dirancang untuk membantu Anda membersihkan kode HTML dari landing page atau halaman web lain agar siap ditempelkan ke platform Blogspot (Blogger). Selain itu, tool ini juga dapat menghasilkan prompt AI yang berguna untuk memisahkan CSS atau menyesuaikan tampilan dengan template Blogspot Anda.

Langkah 1: Tempel HTML Asli

Pada tab "Tool Generator", Anda akan melihat area teks besar dengan placeholder "Paste HTML asli di sini...".

Tempelkan HTML Anda: Salin seluruh kode HTML dari landing page atau halaman web yang ingin Anda gunakan, lalu tempelkan ke dalam area teks ini. Pastikan Anda menyalin semua kode dari <!DOCTYPE html> hingga </html>.

Langkah 2: Pilih Opsi Pembersihan/Generasi

Di bawah area teks input, terdapat beberapa opsi yang dapat Anda centang sesuai kebutuhan:

Hapus tag <html>, <head>, <body>:
- Fungsi: Menghapus tag HTML global yang tidak diperlukan saat menempelkan konten ke dalam postingan atau widget Blogspot, karena tag-tag ini sudah ada di template Blogspot.
- Rekomendasi: Biarkan ini tercentang (default).
Sertakan CSS internal dari <style>:
- Fungsi: Jika dicentang, blok <style> yang berisi CSS internal akan tetap berada di dalam HTML hasil. Jika TIDAK dicentang, semua CSS dari blok <style> akan diekstrak dan ditampilkan di area 'Hasil CSS Terpisah', serta dihapus dari HTML hasil.
- Rekomendasi: Untuk menghindari konflik gaya dengan template Blogspot dan untuk pengelolaan yang lebih baik, sangat disarankan untuk TIDAK mencentang ini agar CSS dapat dipisahkan dan ditempelkan secara manual ke template utama Blogspot Anda.
Bungkus dalam class .generator-page (isolator):
- Fungsi: Membungkus seluruh HTML yang dibersihkan dalam <div class="generator-page">...</div>. Ini membantu mengisolasi gaya CSS Anda agar tidak bentrok dengan gaya template Blogspot.
- Rekomendasi: Biarkan ini tercentang (default) untuk menghindari konflik gaya.
Buatkan prompt AI untuk pisahkan CSS:
- Fungsi: Menghasilkan prompt teks yang dapat Anda berikan ke model AI (seperti ChatGPT, Gemini) untuk meminta mereka memisahkan semua CSS dari HTML Anda ke dalam file CSS eksternal. **Ini adalah metode terbaik untuk memastikan gaya Anda terisolasi dan tidak menabrak CSS global template Blogspot.**
- Rekomendasi: **Sangat direkomendasikan** untuk mencentang ini, terutama jika Anda ingin menghindari konflik gaya atau mengelola CSS secara terpisah di template Blogspot Anda.
Tampilkan sebagai IFRAME eksternal (disarankan):
- Fungsi: Menghasilkan prompt AI yang menyarankan untuk mengunggah HTML Anda ke layanan hosting statis (misalnya Netlify, GitHub Pages) dan menampilkannya di Blogspot menggunakan tag <iframe>. Ini adalah cara terbaik untuk memastikan tampilan tidak rusak oleh template Blogspot.
- Rekomendasi: Sangat disarankan untuk landing page kompleks.
Pindahkan script ke Template Blogspot (manual):
- Fungsi: Menghasilkan prompt AI yang menyarankan untuk memindahkan semua tag <script> ke bagian </head> atau </body> template Blogspot Anda secara manual.
- Rekomendasi: Centang ini jika HTML Anda memiliki banyak JavaScript.
Sesuaikan tampilan dengan template Blogspot (analisa otomatis oleh AI):
- Fungsi: Menghasilkan prompt AI yang meminta AI untuk menganalisis template XML Blogspot Anda (yang akan Anda berikan secara terpisah ke AI) dan menyesuaikan HTML landing page agar sesuai dengan gaya template Blogspot (font, layout, warna, dll.) tanpa konflik.
- Rekomendasi: Centang ini jika Anda ingin tampilan landing page menyatu sempurna dengan template Blogspot Anda.

Langkah 3: Proses dan Dapatkan Hasil

Tombol "✨ Bersihkan & Siapkan": Setelah Anda menempelkan HTML dan memilih opsi, klik tombol ini untuk memproses HTML Anda.
Area Teks "🔥 Hasil HTML Siap Tempel ke Blogspot: Hasil HTML yang sudah dibersihkan dan disiapkan akan muncul di sini. Ini adalah kode yang siap Anda salin.
Tombol "📋 Salin ke Clipboard": Klik tombol ini untuk menyalin seluruh konten dari area hasil ke clipboard Anda. Anda akan melihat pesan konfirmasi singkat.
Area Teks "💅 Hasil CSS Terpisah (Tempel di Template Blogspot)": Jika Anda memilih untuk memisahkan CSS, semua gaya yang diekstrak akan muncul di sini.
Tombol "📋 Salin CSS Terpisah": Klik tombol ini untuk menyalin CSS yang terpisah ke clipboard Anda.

Langkah 4: Menggunakan Prompt AI (Jika Dipilih)

Jika Anda mencentang salah satu opsi "Buatkan prompt AI...", sebuah area teks baru akan muncul dengan judul "🧠 Prompt untuk AI:".

Isi Prompt AI: Area teks ini akan berisi instruksi yang diformulasikan khusus untuk model AI, berdasarkan opsi yang Anda pilih.
Tombol "📋 Salin Prompt AI": Klik tombol ini untuk menyalin prompt AI ke clipboard Anda.
Cara Menggunakan Prompt: Tempelkan prompt ini ke antarmuka model AI pilihan Anda (misalnya, ChatGPT, Google Gemini, Copilot). AI kemudian akan membantu Anda melakukan tugas yang diminta (misalnya, memisahkan CSS, memberikan saran implementasi iframe, dll.).

Tips Tambahan

Selalu Uji: Setelah menempelkan HTML ke Blogspot, selalu pratinjau atau publikasikan sebagai draf untuk memastikan tampilannya sesuai harapan.
Penyesuaian Manual: Terkadang, penyesuaian manual kecil mungkin diperlukan setelah menempelkan HTML ke Blogspot, terutama jika ada konflik gaya yang tidak terduga.
Performa: Memisahkan CSS dan JavaScript ke template Blogspot utama dapat meningkatkan performa loading halaman Anda.

🛠️ HTML Cleaner Pintar + AI Prompt Generator

🔥 Hasil HTML Siap Tempel ke Blogspot:

💅 Hasil CSS Terpisah (Tempel di Template Blogspot):

🧠 Prompt untuk AI: