Cara Membuat Kolom Komentar Mendukung Penyisipan Kode, Gambar dan Catatan

KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini saya akan berbagi mengenai "Cara Membuat Kolom Komentar Mendukung Penyisipan Kode, Gambar dan Catatan", sebagai blog yang memiliki artikel tutorial akan sangat menarik apabila kolom komentarnya mendukung penyisipan kode, gambar maupun catatan.

Berdasarkan pengalaman pribadi, masih ada beberapa pembaca di blog kita yang masih belum begitu paham mengenai tutorial yang kita bagikan di blog, meskipun sudah menggunakan penjelasan yang sangat sangat mendetail.

Gunanya menyisipkan kode, gambar dan catatan ini adalah supaya permasalahan pembaca yang tertulis pada kolom komentar bisa kita langsung berikan contoh solusi disertai gambar ataupun kode yang nampak seperti gambar dibawah ini :


Untuk memberikan fungsi penyisipan kode, gambar dan catatan tersebut, tinggal menggunakan pengaturan kode - kode dibawah ini (yang dimasukkan kedalam komentar)
  1. Menyisipkan gambar : <i rel="image">Link Gambar Anda</i>
  2. Menyisipkan kode :  <i rel="code">Kode Anda</i> atau <i rel="pre">Kode Anda</i>
  3. Menyisipkan judul :  <b rel="h3">Judul Anda</b>
  4. Menyisipkan catatan :  <b rel="quote">Catatan</b>
  5. Menyisipkan teks tebal :  <b>Teks Anda</b>
  6. Menyisipkan huruf miring :  <i>Teks Anda</i>
Sedangkan agar fitur tersebut dapat berkerja dengan baik, maka cukup menambahkan terlebih dahulu kode JavaScript dibawah ini kedalam template blog kalian
Copy kode dibawah dan paste / letakkan diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
$('#comments p, #comments dd').each(function() {
   $('b[rel^="h"]', this).nextAll().filter('br').remove();
    $('i[rel="pre"]', this).replaceWith(function() {
        return $('<pre></pre>').append($(this).contents());
    });
    $('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());
    });
    $('b[rel="quote"]', this).replaceWith(function() {
        return $('<blockquote></blockquote>').append($(this).contents());
    });
    $('i[rel="code"]', this).contents().unwrap().wrap('<code></code>');
});
//]]>
</script>
Kemudian SIMPAN TEMPLATE
Tampilan dari hasil jadinya akan otomatis mengikuti bentuk desain CSS dari blog yang kalian gunakan

Itulah informasi mengenai "Cara Membuat Kolom Komentar Mendukung Penyisipan Kode, Gambar dan Catatan", selamat mencoba dan semoga bermanfaat. Goodluck!





Lebih baru Lebih lama