Cara Memasang dan Menggunakan HTML Parser di Blog

Pernahkah kalian mencoba membagikan kode AdSense atau HTML di dalam artikel blog kalian, tetapi hasilnya malah berantakan, tidak muncul, atau parahnya lagi merusak tata letak halaman kalian? 😱

Itu adalah masalah umum! Browser salah mengartikan kode HTML yang kalian ketik sebagai bagian dari struktur artikel, bukan sebagai teks biasa yang ingin kalian tampilkan.

Di sinilah HTML Parser (atau sering juga disebut HTML Converter) menjadi penyelamat. Secara sederhana, tool ini berfungsi mengubah karakter khusus dalam kode HTML kalian. Misalnya, karakter kurung siku kiri < diubah menjadi < dan kurung siku kanan > menjadi >. Perubahan ini memastikan kode kalian aman untuk ditempel di postingan dan akan tampil sebagai teks biasa di mata pembaca, bukan sebagai elemen yang dieksekusi oleh browser.

Cara Memasang HTML Parser di Blog

Cara Memasang dan Menggunakan HTML Parser di Blog

Persiapan Kode HTML Parser (The Code)

Sekarang, saatnya menyiapkan semua kode yang kalian perlukan. Ada tiga komponen utama: Struktur (HTML), Fungsi (JavaScript), dan Tampilan (CSS).

A. Kode Struktur HTML Dasar

Kode ini adalah bagian yang akan tampil di halaman, berisi kolom teks (textarea) tempat kode dimasukkan, dan tombol untuk menjalankan fungsi parse serta salin.

Kalian juga bisa memasukan text ini diatasnya " Fitur ini digunakan untuk mengubah atau mem-parsing kode HTML. Biasanya, fungsi ini dipakai untuk mengonversi kode iklan seperti AdSense, atau saat menulis tutorial yang menyertakan potongan kode HTML di dalam artikel. Jika kode HTML tidak diubah terlebih dahulu, tampilan artikel bisa menjadi berantakan. Karena itu, sebaiknya gunakan fitur Parse HTML agar struktur kode tetap rapi dan tampil dengan benar. "

<!-- Bagian yang perlu Anda tempel ke Mode HTML di Postingan atau Halaman Statis -->

<div class="html-parser-wrapper">
    <!-- Area Input/Output Kode -->
    <textarea id="somewhere" class="html-parser-textarea" placeholder="Tempel kode HTML, AdSense, atau kode berantakan lainnya di sini..."></textarea>

    <!-- Tombol Aksi -->
    <div style="text-align: center; margin-top: 15px;">
        <!-- Tombol Parse -->
        <input onclick="convert();" type="button" value="Parse Script" class="parser-button primary-button" />
        
        <!-- Tombol Salin -->
        <input onclick="copyCode();" type="button" value="Copy Code" class="parser-button secondary-button" />
    </div>
</div>

Kode HTML di atas menggunakan div sebagai wadah (html-parser-wrapper) dan sebuah textarea dengan ID penting (somewhere) yang akan diproses oleh JavaScript. Dua tombol di bawahnya memiliki fungsi yang terhubung ke kode JavaScript yang akan kita siapkan selanjutnya. kalian harus menempatkan kode ini di Mode HTML di mana pun kalian ingin tool tersebut muncul (Halaman Statis, Postingan, atau Widget).

B. Javascript

Kode Fungsi JavaScript (JS) Kode ini adalah otak dari tool. Ini bertanggung jawab untuk mengubah karakter khusus dan menyalin hasil parsing ke clipboard pengguna.

 <script type="text/javascript">
// Fungsi untuk parsing HTML
function convert(){
    var ele1 = document.getElementById("somewhere");
    var replaced;
    replaced = ele1.value;
    replaced = replaced.replace(/&/ig, "&amp;");
    replaced = replaced.replace(/</ig, "&lt;");
    replaced = replaced.replace(/>/ig, "&gt;");
    replaced = replaced.replace(/"/ig, "&quot;");
    replaced = replaced.replace(/&#177;/ig, "&plusmn;");
    replaced = replaced.replace(/&#169;/ig, "&copy;");
    replaced = replaced.replace(/&#174;/ig, "&reg;");
    replaced = replaced.replace(/ya'll/ig, "ya'll");
    ele1.value = replaced;
}

// FUNGSI BARU: Untuk menyalin teks dari textarea
function copyCode() {
    var copyText = document.getElementById("somewhere");
    
    // Pilih teks di textarea
    copyText.select();
    copyText.setSelectionRange(0, 99999); // Untuk perangkat mobile
    
    // Salin teks
    document.execCommand("copy");
    
    // Opsional: Berikan notifikasi
    alert("Kode berhasil disalin!");
}

// DARK MODE UNTUK HTML PARSER
function applyParserDarkMode() {
    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches || document.body.classList.contains('dark-mode');
    
    if (isDarkMode) {
        const parserWrapper = document.querySelector('.html-parser-wrapper');
        const textarea = document.getElementById('somewhere');
        const buttons = parserWrapper.querySelectorAll('input[type="button"]');
        
        if (parserWrapper) {
            // Style untuk wrapper
            parserWrapper.style.cssText = `
                margin-top: 20px !important;
                text-align: center !important;
            `;
        }
        
        if (textarea) {
            // Style untuk textarea dark mode
            textarea.style.cssText = `
                background: #2d3748 !important;
                color: #e2e8f0 !important;
                border: 1px solid #4a5568 !important;
                border-radius: 6px !important;
                padding: 12px !important;
                width: 100% !important;
                min-height: 150px !important;
                font-family: monospace !important;
                font-size: 14px !important;
                resize: vertical !important;
            `;
        }
        
        // Style untuk tombol dark mode
        buttons.forEach(button => {
            button.style.cssText = `
                background: #3182ce !important;
                border-radius: 6px !important;
                border: none !important;
                color: white !important;
                cursor: pointer !important;
                margin: 0px 5px !important;
                padding: 10px 20px !important;
                font-weight: 600 !important;
                transition: all 0.3s ease !important;
            `;
            
            // Hover effect untuk tombol
            button.onmouseover = function() {
                this.style.background = '#2c5aa0 !important';
                this.style.transform = 'translateY(-2px) !important';
            };
            
            button.onmouseout = function() {
                this.style.background = '#3182ce !important';
                this.style.transform = 'translateY(0) !important';
            };
        });
    }
}

// Jalankan dark mode untuk parser
document.addEventListener('DOMContentLoaded', applyParserDarkMode);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyParserDarkMode);
setTimeout(applyParserDarkMode, 100);
</script>

C. Kode CSS (Tampilan dan Responsif)

Kode ini memastikan tampilan tool terlihat rapi, modern, dan yang paling penting, tidak overflow (meluber) pada tampilan mobile.

 @media (prefers-color-scheme: dark) {
    .html-parser-textarea {
        background: #2d3748 !important;
        color: #e2e8f0 !important;
        border: 1px solid #4a5568 !important;
    }
    
    .html-parser-wrapper input[type="button"] {
        background: #3182ce !important;
        color: white !important;
    }
}

.dark-mode .html-parser-textarea {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
    border: 1px solid #4a5568 !important;
}

.dark-mode .html-parser-wrapper input[type="button"] {
    background: #3182ce !important;
    color: white !important;
}
</style>

<div class="html-parser-wrapper" style="margin-top: 20px; text-align: center;">
    
    <textarea class="html-parser-textarea" id="somewhere"></textarea>

    <input onclick="convert();" style="background: rgb(26, 26, 26); border-radius: 4px; border: none; color: white; cursor: pointer; margin: 0px 5px; padding: 8px 15px;" type="button" value="Parse Script" />
    
    <input onclick="copyCode();" style="background: rgb(26, 26, 26); border-radius: 4px; border: none; color: white; cursor: pointer; margin: 0px 5px; padding: 8px 15px;" type="button" value="Copy Code" />
    
</div>

Langkah Pemasangan

Setelah kalian mendapatkan tiga kode di atas, langkah selanjutnya adalah memasangnya di blog kalian. Kami akan fokus pada metode yang paling direkomendasikan: membuat Halaman Statis khusus untuk tool ini.

Keputusan Lokasi Pemasangan:

Pilihan terbaik adalah Membuat Halaman Statis Khusus (misalnya, namablog.com/p/html-parser) agar tool ini terpisah dari konten artikel harian kalian dan mudah diakses.

2. Langkah Pemasangan di Blogger:

Buka Editor Halaman Baru:
Masuk ke Dashboard Blogger , lalu pilih menu Laman (Pages) dan klik Laman Baru (New Page).
Alihkan Mode ke HTML:
Ini adalah langkah krusial. Sebelum menempel kode apa pun, pastikan kalian beralih dari mode Compose (Tampilan Tulis) ke HTML View (Tampilan HTML).
Gabungkan dan Tempel Kode: Gabungkan semua kode yang telah kalian dapatkan di atas (HTML Structure, JavaScript, dan CSS) menjadi satu, dan tempelkan semuanya ke dalam editor HTML laman tersebut.
Publikasikan: Beri judul laman (misalnya: "HTML Parser Tool"), lalu klik Publikasikan.

Untuk penempatannya terserah kalian. bisa buat menu abru diatas navbar ataupun di sidebar mana bagusnya menurut kalian sava.

Sekarang HTML Pharse sudah bisa digunakan. tampilannya bisa kalian lihat Diblog ini