Beranda Blogger Converter Tools

Membuat Tools Halaman Parser/Converter HTML Pre Code Blogger

Diperbarui: • 0 • menit membaca
Daftar Isi
Membuat Tools Halaman Parser/Converter HTML Pre Code Blogger

Untuk memasang iklan AdSense di Blogger, cara termudah adalah melalui menu Tata Letak dengan menambahkan Gadget HTML/Javascript dan memasukkan kode iklan di dalamnya. Namun, kode iklan tersebut tidak dapat langsung ditempatkan di dalam HTML Template Blogger.

Agar kode iklan dapat digunakan dalam template, diperlukan alat untuk mem-parse atau mengonversi kode tersebut terlebih dahulu. Meskipun banyak alat serupa tersedia di Google, memiliki tools sendiri di blog akan lebih praktis dan efisien untuk kebutuhan jangka panjang.

Membuat Halaman Parse Di Blogger

Cara membuatnya tergolong sangat mudah sekali, script ini saya temukan ketika saya ingin membuat juga waktu itu, saya mengambilnya langsung dari blog kang ismet dan saya sesuaikan beberapa. Dari segi tampilan halaman parse ini sudah saya modifikasi beberapa, agar lebih cocok digunakan pada Wuzz Blogger Template.

Lihat toolsnya Parser Blogger

  1. Login akun blogger kamu
  2. Buatlah satu Halaman Static atau basa kita sebut Laman dengan cara klik Halaman Baru.
  3. Berikutnya pilih Tampilan HTML bukan mode Compose
  4. Copy file css berikut :

    <style>:root{--primary:#4f46e5;--primary-hover:#4338ca;--danger:#ef4444;--danger-hover:#dc2626;--info:#3b82f6;--info-hover:#2563eb;--success:#22c55e}
#parser2{max-width:800px;margin:0 auto;position:relative}
textarea#somewhere{width:100%;min-height:300px;padding:16px;border-radius:12px;border:1px solid #e5e7eb;background:white;font-family:ui-monospace,Consolas,Monaco,monospace;font-size:14px;line-height:1.5;color:#1f2937;box-shadow:0 1px 2px rgba(0,0,0,0.05);transition:all 0.2s;margin-bottom:16px}
textarea#somewhere:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,0.1)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;font-size:14px;font-weight:500;border-radius:8px;border:none;cursor:pointer;transition:all 0.2s}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--primary);color:white}
.btn-primary:hover{background:var(--primary-hover)}
.btn-danger{background:var(--danger);color:white}
.btn-danger:hover{background:var(--danger-hover)}
.btn-info{background:var(--info);color:white}
.btn-info:hover{background:var(--info-hover)}
.btn-xs{padding:6px 12px;font-size:12px;border-radius:6px}
.alert{position:fixed;bottom:24px;/* Ubah dari top ke bottom */
  left:24px;/* Ubah dari right ke left */
  padding:16px;border-radius:8px;background:white;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);display:none;margin:16px;/* Tambahkan margin untuk jarak dari tepi layar */}
.alert-success{border-left:4px solid var(--success)}
.alert h4{margin:0;color:#1f2937;font-size:14px;display:flex;align-items:center;gap:8px;padding-top:0}
.btn-reset{position:absolute;right:12px;top:12px;background:none;border:none;color:#9ca3af;cursor:pointer;padding:4px;border-radius:4px;display:none}
.btn-reset:hover{background:#f3f4f6;color:#4b5563}
.button-group{display:flex;gap:8px;align-items:center}
body.darkmode{background:#111827;color:white}
body.darkmode textarea#somewhere{background:#1f2937;border-color:#374151;color:white}
body.darkmode .alert{background:#1f2937}
body.darkmode .alert h4{color:white}
body.darkmode .btn-reset:hover{background:#374151;color:white} </style>
  5. Copy dan Paste seluruh kode dibawah ini pada mode HTML pada Halaman Static tersebut tepat dibawah kode css tadi.

    <p>Alat di bawah ini membantu Anda menulis tag code atau pre dalam artikel. Simpan kode, lalu klik Konversi, dan salin hasilnya ke editor pos Anda dalam mode HTML (bukan Compose).</p>

<div id="parser2">
  <textarea id="somewhere" placeholder="Tulis/paste kode di sini lalu klik tombol Parse Codes" onfocusin="focusFunction()"></textarea>
  
  <button class="btn-reset" id="btn-reset" onclick="cdClear2();">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <line x1="18" y1="6" x2="6" y2="18"></line>
      <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>
  </button>

  <div class="alert alert-success" id="btnInfo">
    <h4>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
        <polyline points="22 4 12 14.01 9 11.01"></polyline>
      </svg>
      Codes copied to clipboard!
    </h4>
  </div>

  <div class="button-group">
    <button onclick="convert();textareaReplaceLineBreaks('#somewhere');" class="btn btn-primary btn-parse" type="button">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="16 18 22 12 16 6"></polyline>
        <polyline points="8 6 2 12 8 18"></polyline>
      </svg>
      Parse Codes
    </button>
    
    <button class="btn btn-xs btn-info button-link" id="button-link" data-clipboard-action="copy" data-clipboard-target="#somewhere" type="submit" style="display: none;">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
        <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
      </svg>
      Copy codes to clipboard!
    </button>
    
    <button class="btn btn-xs btn-danger" id="btn_clear" onclick="cdClear();" style="display: none;">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="3 6 5 6 21 6"></polyline>
        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
      </svg>
      Bersihkan
    </button>
  </div>
</div>
  6. Selanjutnya tepat dibawah kode HTML tadi, lanjut Copy kode javascript berikut: 

    <script>
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(/&#177;/ig, "&plusmn;");
    replaced = replaced.replace(/&#169;/ig, "&copy;");
    replaced = replaced.replace(/&#174;/ig, "&reg;");
    replaced = replaced.replace(/ya'll/ig, "ya'll");
    replaced = replaced.replace(/^/, "<pre><code>");
    replaced = replaced.replace(/$/, "</code></pre>");
    ele1.value = replaced;
    document.getElementById("button-link").style.display = "inline-flex";
    document.getElementById("btn_clear").style.display = "inline-flex";
    document.getElementById("btn-reset").style.display = "none";
}

function cdClear() {
    var wtarea = document.getElementById('somewhere');
    wtarea.value = '';
    document.getElementById("btnInfo").style.display = "none";
    document.getElementById("button-link").style.display = "none";
    document.getElementById("btn_clear").style.display = "none";
}

function cdClear2() {
    var wtarea = document.getElementById('somewhere');
    wtarea.value = '';
    document.getElementById("btn-reset").style.display = "none";
}

function focusFunction() {
    document.getElementById("btn-reset").style.display = "flex";
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script>
var clipboard = new ClipboardJS('.button-link');
clipboard.on('success', function(e) {
    console.log(e);
    document.getElementById("btnInfo").style.display = "block";
    document.getElementById("button-link").style.display = "none";
    document.getElementById("btn-reset").style.display = "none";
    document.getElementById("somewhere").value = "";
});
clipboard.on('error', function(e) {
    console.log(e);
});
</script>
  7. Simpan dan Publish laman tersebut dan lihat hasilnya.

Parser tools ini sudah dilengkapi dengan pre code, agar memudahkan kamu kalau membuat artikel di blog juga. Jika kamu perlu pre code yang support untuk Wuzz Template nanti saya coba buatkan ya.

Posting Komentar

Silahkan berkomentar jika dirasa artikelnya bermanfaat atau ada yang ingin ditanyakan. Terima kasih.