Memanfaatkan Jquery Untuk Mengizinkan Elemen Terlarang Masuk Ke Dalam Kometar Blogger

Saya terinspirasi dari posting ini: Adding Images and More Text Formats to the Body of the Comments

Bukankah itu sangat luar biasa? Kita dapat menyisipkan elemen-elemen yang tidak lazim ke dalam komentar Blogger hanya dengan memanfaatkan cara kerja JavaScript .replace(). Pada intinya, kita menyisipkan kode-kode yang dapat dimasukkan ke dalam komentar menyerupai [im]. Kode tersebut bukanlah arahan yang dapat mempengaruhi file HTML dan hanya merupakan teks biasa yang dibuat-buat, namun dengan sedikit trik, Anda dapat memanfaatkan peraturan yang Anda buat sendiri untuk mengontrol fungsi .replace()

Di sini Saya akan menawarkan alternatif lain yang lebih kondusif dan tampak rapi, yaitu memakai jQuery untuk memanipulasi dua jenis tag yang diperbolehkan masuk ke dalam komentar Blogger yaitu  dan . Kita akan memakai atribut rel sebagai pengontrol. Dan ini ialah sebuah trik untuk mengubah tag-tag tersebut menjadi tag lain dengan jQuery ⇒ http://stackoverflow.com/questions/7093417/using-jquery-to-replace-one-tag-with-another

Katakanlah kita ingin memposting arahan di dalam tag <pre> untuk diterbitkan ke dalam komentar postingan, namun menyerupai yang kita tahu, Blogger tidak mengizinkan tag <pre> masuk ke dalam posting komentar. Kaprikornus kita dapat memakai arahan ini sebagai penanda:

<i rel='pre'>Kode di sini...</i>

Untuk mengubah tag  menjadi <pre> kita dapat memakai fungsi ini:

// Seleksi elemen `p` di dalam `#comments` $('#comments p').each(function() {     // Ubah semua tag `<i rel="pre">` dengan `<pre>`     $('i[rel="pre"]', this).replaceWith(function() {         return $('<pre></pre>').append($(this).contents());     }); });

Selektor $('#comments p') tidak mutlak. Terkadang ada juga kerangka komentar yang terdiri dari elemen <dd>, bahkan mungkin juga dengan ID komentar yang berbeda sehingga selektor tersebut juga dapat diubah menjadi $('#comments dd') atau $('#commentsbox dd')

Cukup pastikan bahwa tema Anda sudah dilengkapi dengan jQuery, kemudian letakkan arahan tersebut di atas </body>. Dan coba terbitkan sebuah komentar berupa teks di dalam 

Lebih Lengkap

Untuk tingkat manpulasi yang lebih lengkap, Anda dapat memakai baris arahan ini. Salin arahan ini kemudian sisipkan di atas </body>:

<script> //<![CDATA[ $('#comments p, #comments dd').each(function() {     // Singkirkan semua tag `<br>` di sebelah tag `<b rel^="h">`     // (semua elemen `<b>` dengan nilai atrubut `rel` yang diawali dengan "h")     $('b[rel^="h"]', this).nextAll().filter('br').remove();     // Menyisipkan tag `<pre>`     $('i[rel="pre"]', this).replaceWith(function() {         return $('<pre></pre>').append($(this).contents());     });     // Menyisipkan gambar     $('i[rel="image"]', this).replaceWith(function() {         return $('<img />').attr('src', $(this).text());     });     // Menyisipkan tag `<h3>`     $('b[rel="h3"]', this).replaceWith(function() {         return $('<h3></h3>').append($(this).contents());     });     // Menyisipkan kuota/catatan     $('b[rel="quote"]', this).replaceWith(function() {         return $('<blockquote></blockquote>').append($(this).contents());     });     // Menyisipkan tag `<code>`     $('i[rel="code"]', this).contents().unwrap().wrap('<code></code>'); }); //]]> </script>

Klik Simpan Tema. Setelah itu Anda tinggal menuliskan pesan untuk para komentator di atas formulir komentar menyerupai ini:

Untuk menyisipkan kode, gunakan tag KODE ANDA DI SINI... atau KODE ANDA DI SINI...Untuk menyisipkan gambar, gunakan tag URL GAMBAR ANDA DI SINI...Untuk menyisipkan judul, gunakan tag JUDUL ANDA DI SINI...Untuk menyisipkan catatan, gunakan tag CATATAN ANDA DI SINI...Untuk membuat imbas tebal gunakan tag TEKS ANDA DI SINI...Untuk membuat imbas abjad miring gunakan tag TEKS ANDA DI SINI...

Sumber https://www.dte.web.id/