Tips Blogger cara menulis kode HTML script untuk di input dan dibagikan ke dalam artikel Blogger tanpa Parse terlebih dahulu

Selamat malam teman blogger, kali ini saya ingin memberikan tutorial bagaimanakah menempatkan kode HTML tanpa di parse kebanyakan agar bisa ditulis di artikel Blogger secara rapi dan indah tanpa ada kode yang keluar dan berserakan kemnana mana dari templete atau tema blog teman teman. Ini terinspirasi dari Blog nya Mba Igniel. Langsung deh tanya Mode Ai bagaimana cara membuat dan menerapkan pada blog saya agar teman teman juga bisa mencoba kode untuk mempercantik dan memperganteng blog sobat semua. Awalnya Ai malah mengkopi karena prompt yang saya kirimkan belum dimengerti dan akhirnya terselesaikan permasalahnnya. Langsung saja cara penempatannnya, Cekidot Wae!
1. Pertama-tama Ini yang paling penting Kopi dan paste Kode dibawah ini tepat di atas </body> Edit HTML blog teman-teman:

Kode tepat diatas </body>:

</> Bagian Edit HTML Tema Blogger

<!-- Script Anti-Parse Kotak Kode --> <script> document.querySelectorAll('.kotak-kode-body').forEach(el => { // Mengambil teks mentah dari atribut data agar tidak dirusak Blogger if(el.getAttribute('data-raw')) { el.textContent = decodeURIComponent(el.getAttribute('data-raw')); } }); function copyCode(button) { var codeBody = button.closest('.kotak-kode-wrapper').querySelector('.kotak-kode-body'); var text = codeBody.textContent; navigator.clipboard.writeText(text).then(function() { button.innerText = 'Tersalin!'; setTimeout(function() { button.innerText = 'Salin'; }, 2000); }); } </script>

2. Setelah menempel kode tersebut lalu SAVE (simpan) tema/template dengan mengklik gambar disket sebelah kanan atas blog anda.
3. Setelah itu, untuk menulis dan menempatakan Kode HTML di tulisan artikel blogger teman, silahkan masukan kode ini (ingat mode tulisan bukan Tampilan Menulis, Namun Mode Tampilan HTML (<>)):

Kode untuk ditempatkan di Bagian paling atas artikel Biar respoonsive dilihat di Laptop dan Handphone:

</> Kode Paling Atas

<style> @media screen and (max-width: 768px) { .kotak-kode-body { white-space: pre-wrap !important; word-wrap: break-word !important; word-break: break-word !important; font-size: 13px !important; padding: 12px !important; } .kotak-kode-header { padding: 6px 12px !important; } .icon-code { font-size: 13px !important; } .btn-salin { padding: 3px 10px !important; font-size: 12px !important; } } </style>

4. Lalu Sebelum menempatkan kode HTML yang ingin dibagikan, masukan Kode Dibawah ini:

Kode bagian terpenting sebagai Kode UTAMA di artikel Blogger Sobat:

</> Kode Bagian Posting Artikel

<!-- ==================== CODE PENAMPIL DI ARTIKEL ==================== --> <p>Kode bagian Pertama:</p> <!-- ==================== KOTAK KODE 1 ==================== --> <div class="kotak-kode-wrapper" style="background-color: #f1f3f9; border-radius: 8px; overflow: hidden; margin: 20px 0; font-family: Consolas, Monaco, monospace;"> <div class="kotak-kode-header" style="background-color: #d1d5db; padding: 8px 15px; display: flex; justify-content: space-between; align-items: center;"> <span class="icon-code" style="font-weight: bold; color: #4b5563;"></> Bagian 1</span> <button class="btn-salin" onclick="copyCodeX(this)" style="background: #ffffff; border: 1px solid #9ca3af; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 13px;">Salin</button> </div> <pre class="kotak-kode-body" style="padding: 15px; margin: 0; overflow-x: auto; white-space: pre; word-wrap: normal; font-size: 14px; color: #1f2937; line-height: 1.5; max-height: 300px;"></pre> <textarea class="kode-mentah" style="display:none;"> <b>KODE DISINI UNTUK MELETAKKAN KODE HTML SOBAT</b>

Tempatkan code HTML sobat dan teman-teman semua pada teks "KODE DISINI UNTUK MELETAKKAN KODE HTML SOBAT". Dan selanjutnya.. 5. Ini Kode terakhir, fungsinya untuk Tombol SALIN nantinya saat sudah tampil diartikel Blogger saat di PUBLISH (Ditayangkan). Temapatkan code ini di akhir artikel Blog Sobat. Agar tidak tumpang tindih jadinya..ckckckk. Berikut Kode nya:

Kode terakhir Kode SALIN :

</> Bagian terakhir tempatkan di paling bawah artikel

<!-- SCRIPT PENGAKTIF TOMBOL SALIN (Cukup taral 1x di paling bawah artikel) --> <script> document.querySelectorAll('.kotak-kode-wrapper').forEach(function(wrapper) { var rawData = wrapper.querySelector('.kode-mentah').value; var displayArea = wrapper.querySelector('.kotak-kode-body'); displayArea.textContent = rawData; }); function copyCodeX(button) { var wrapper = button.closest('.kotak-kode-wrapper'); var textToCopy = wrapper.querySelector('.kode-mentah').value; navigator.clipboard.writeText(textToCopy).then(function() { button.innerText = 'Tersalin!'; setTimeout(function() { button.innerText = 'Salin'; }, 2000); }).catch(function() { var tempArea = document.createElement("textarea"); tempArea.value = textToCopy; document.body.appendChild(tempArea); tempArea.select(); document.execCommand("copy"); document.body.removeChild(tempArea); button.innerText = 'Tersalin!'; setTimeout(function() { button.innerText = 'Salin'; }, 2000); }); } </script>

Nahh.. Tampak keren kan. Kode ini sangat bermanffat bagi para blogger seperti saya yang apabila ingin memberikan code script ke artikel blog agar dapat di lihat oleh pengunjung blog Ngerapik ini. Semoga juga bermanfaat untuk teman teman semua. Jagan lupa apabila ada pertanyaan silahkan berikan komentar di Disqus cpmment blog ini. Salam Ngerapik Blog..!! 

NB: - Untuk menambah kode apabila di potong atau panjang atau code lainnya silahkan tempelkan kembali PENJELASAN No. 4