💥 BREAKING NEWS
Memuat 50 berita terbaru...

Tutorial Membuat Tab Komentar Blogspot lengkap Dengan Kode Parse

byEigerBoN •
0

Salam blogger teman teman semua, kali ini saya akan mencoba menerapkan pengaplikasian kode HTML untuk mempercantik dan memperganteng tampilan Komentar Blogspot. Ini terinpirasi dari blognya Mba Igniel. bagaimana cara membuatnya? langsung saya tanyakan ke Mode Ai, mode pintar milik google ini mulai menganalisa dan memberikan kode yang berulang ulang salah. (gak gampang ternyata pngaplikasiannya teman teman), hanpir satu jam lebih otak dan atik kode agar suport dengan tema baru blog saya ini, Template Starter.

Langsung saja, teman teman gak usah pusing pusing lagi apabila mau menerapkan di blogger masing masing semoga suport juga di Template atau Tema teman teman semua. Cekidot Wae,,,

PENERAPAN KODE 

Langkah 1: Langkah pertama yang harus di lakukan adalah Mengisi Teks Aturan Baku untuk dibaca di Mode Edit HTML Template nantinya dengan cara:

  • Klik menu Setelan (Settings).
  • Gulir (scroll) layar ke bawah perlahan sampai Anda menemukan kelompok menu Komentar (Comments).
  • Cari menu yang bernama Pesan formulir komentar (Comment form message). Klik pada menu tersebut.
  • Sebuah kotak kosong akan muncul. Silakan tempel (paste) kata singkat di bawah ini ke dalamnya: 

    •  [buka_aplikasi_komentar]

    Seperti gambar dibawah ini:

  • Simpan setelan dashboard

    • Langkah 2: Suntikkan Kode Aplikasi & CSS (Wajib di Edit HTML)
    Kini kita akan memerintahkan tema blog untuk mendeteksi tulisan [buka_aplikasi_komentar] di atas, lalu mengubahnya secara otomatis menjadi aplikasi tab komentar interaktif ala Igniel yang fungsional.
    1. Masuk ke Dasbor Blogger > Tema (Theme) > klik Edit HTML.
    2. Klik di dalam area kode, lalu tekan Ctrl + F untuk memunculkan kolom pencarian.
    3. Cari tag penutup kode skrip ini: </body>.
    4. Tempel (paste) seluruh rangkaian skrip aplikasi, CSS, dan logika interaktif di bawah ini tepat di atas tag </body> tersebut: 
    <!-- INTEGRASI APLIKASI KOMENTAR INTERAKTIF ALA IGNIEL BY AI -->
<style>
.igniel-comment-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 25px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.01) !important;
    text-align: left !important;
}
.igniel-tabs-header {
    display: flex !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.igniel-tab-btn {
    padding: 14px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.igniel-tab-btn.active {
    color: #059669 !important; /* Hijau aktif */
    background: #ffffff !important;
    border-bottom: 3px solid #059669 !important;
}
.igniel-panel-content {
    padding: 24px !important;
}
.igniel-panel-content ul {
    list-style-type: disc !important;
    padding-left: 20px !important;
    margin: 0 !important;
}
.igniel-panel-content li {
    font-size: 13.5px !important;
    color: #4b5563 !important;
    line-height: 1.8 !important;
    margin-bottom: 8px !important;
}
.igniel-panel-content code {
    color: #ef4444 !important;
    background: #fef2f2 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 12.5px !important;
}
.igniel-parse-area {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.igniel-textarea {
    width: 100% !important;
    height: 110px !important;
    padding: 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-family: monospace !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    resize: none !important;
}
.igniel-parse-btn {
    background: #059669 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    align-self: flex-start !important;
}
.igniel-parse-btn:hover { background: #047857 !important; }
</style>

<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
  var targetNodes = document.querySelectorAll(".comments-message.excerpt, .comment-form p, #comment-holder p");
  targetNodes.forEach(function(node) {
    if (node.textContent.includes("[buka_aplikasi_komentar]")) {
      var appHTML = `
        <div class="igniel-comment-box">
          <div class="igniel-tabs-header">
            <button class="igniel-tab-btn active" id="btn_aturan">Beri Komentar</button>
            <button class="igniel-tab-btn" id="btn_parse">Parse Kode</button>
          </div>
          <div class="igniel-panel-content">
            <div id="content_aturan" style="display:block;">
              <ul>
                <li>Menulis <b>kode</b> gunakan &lt;i&gt;<code>kode</code>&lt;/i&gt;</li>
                <li>Menulis dalam <b>syntax highlighter</b> gunakan &lt;em&gt;<code>kode panjang</code>&lt;/em&gt;</li>
                <li>Menyisipkan <b>gambar</b> gunakan &lt;strong&gt;<code>URL GAMBAR</code>&lt;/strong&gt;</li>
              </ul>
              <p style="margin:20px 0 0 0; font-size:13.5px; color:#4b5563;">Klik tombol di bawah untuk login dengan Google.</p>
            </div>
            <div id="content_parse" style="display:none;">
              <div class="igniel-parse-area">
                <textarea id="igniel_area_editor" class="igniel-textarea" placeholder="Paste kode HTML/XML di sini..."></textarea>
                <button class="igniel-parse-btn" id="btn_eksekusi_parse">Parse! Bersihkan</button>
              </div>
            </div>
          </div>
        </div>`;
      node.innerHTML = appHTML;
      
      // Logika Sistem Klik Tab
      var bAturan = node.querySelector("#btn_aturan");
      var bParse = node.querySelector("#btn_parse");
      var cAturan = node.querySelector("#content_aturan");
      var cParse = node.querySelector("#content_parse");
      
      bAturan.addEventListener("click", function(e) {
        e.preventDefault();
        cParse.style.display = "none";
        cAturan.style.display = "block";
        bParse.classList.remove("active");
        bAturan.classList.add("active");
      });
      
      bParse.addEventListener("click", function(e) {
        e.preventDefault();
        cAturan.style.display = "none";
        cParse.style.display = "block";
        bAturan.classList.remove("active");
        bParse.classList.add("active");
      });
      
      // Logika Eksekusi Pengubah Kode (Parsing)
      node.querySelector("#btn_eksekusi_parse").addEventListener("click", function(e) {
        e.preventDefault();
        var tArea = node.querySelector("#igniel_area_editor");
        var code = tArea.value;
        code = code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
        tArea.value = code;
        tArea.select();
      });
    }
  });
});
//]]>
</script>
    Gunakan kode dengan hati-hati.
    1. Klik ikon Simpan (gambar disket di pojok kanan atas dasbor HTML Anda).
    Hasil Akhir yang Akan Anda Dapatkan:
    Sistem Blogger akan menerima perubahan ini dengan sukses besar karena tidak ada bentrokan di menu Setelan. Saat teman teman membuka artikel di komentar blog saat ini, fungsi tombolnya akan aktif bekerja secara interaktif: ketika tab "Parse Kode" diklik, kolom teks kosong akan terbuka dan tombol "Parse! Bersihkan" akan mengubah kode secara riil layaknya fitur canggih pada blog profesional milik Igniel!
    Jangan di Save dulu teman teman Edit HTML templatenya, biasanya ada jarak antara kotak bagian yang kita tambahkan dengan kotak asli bawaan blogger, untuk merapikannya biar kelihatan menyatu, silahkan tambahkan kode dibawah ini di dalam kode CSS.
    Untuk memaksanya menyatu rapat tanpa jarak kosong, kita harus menarik posisi kotak login Google ke atas menggunakan nilai koordinat margin negatif agar menumpuk dan menyatu sempurna dengan kotak aplikasi.
    Silakan ganti kode CSS yang berada di dalam tag <style> di atas </body> (pada menu Edit HTML) dengan kode perbaikan total di bawah ini:
    Kode CSS Final Penyatuan Kotak

    Kode bagian CSS FULL

    </> Bagian CSS 
    
  

      

    Klik Simpan Edit HTML Template. Nahh bagaimana apakah sistem tab interaktif komentar dan Parse sudah terpasang rapi dan berfungsi di blogger teman teman semua? Selamat apabial telah terpasang dengan sempurna.Apabila ada pertanyaan silahkan berkomentar di bawah ya..Salam Ngerapik Blog!
          

    


    

    



    

    

    

    

    


    

    

    

    

    

    
•
Memuat waktu...

    

    

    
Rekomendasi Artikel
    Ngerapik Blog Pangkalpinang
      
    



Selengkapnya
      

    

    

    


    

    Memuat rekomendasi artikel...
    

    


    

    

    



    

    

    

    

    

    

    


    

    

    


    

    

    Posting Komentar
    

    [buka_aplikasi_komentar]
    

    






    

    

    

    

Lebih baru


Lebih lama