Cara Membuat Kolom Komentar Mendukung Penyisipan Kode, Gambar dan Catatan - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Kolom Komentar Mendukung Penyisipan Kode, Gambar dan Catatan

Pilihan Editor :

Cara Membuat Kolom Komentar Mendukung Penyisipan Kode, Gambar dan Catatan
Penulis Bagus Surochman
3
Modus malam



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!
nanio
Cara Membuat Kolom Komentar Mendukung Penyisipan Kode, Gambar dan Catatan
Cara Membuat Kolom Komentar Mendukung Penyisipan Kode, Gambar dan Catatan Cara Membuat Kolom Komentar Mendukung Penyisipan Kode, Gambar dan Catatan Reviewed by Bagus Surochman on 8/11/2018

3 komentar:

  1. Cara menyisipkan kode, gambar dan catatan bisa melihat kode diatas tadi dan ini hanyalah contoh komentar dari tutorial diatas.,

    Ini adalah hasil GAMBAR yang disipkan kedalam komentar :
    https://3.bp.blogspot.com/-B-vYDGHlmOc/W230Q_pSJVI/AAAAAAAAMU8/L5CBdzy7vM8BFn7l6jwsxYsb-oof2L_WQCLcBGAs/s1600/Cara%2BMembuat%2BKolom%2BKomentar%2BMendukung%2BPenyisipan%2BKode%252C%2BGambar%2Bdan%2BCatatan%2B_%2BKURAZONE.png

    Ini adalah hasil CODE yang disipkan kedalam komentar :
    <a href="https://www.kurazone.net/">KURAZONE</a>

    Ini adalah hasil PRE yang disipkan kedalam komentar :
    <a href="https://www.kurazone.net/">KURAZONE</a>
    Ini adalah hasil H3 yang disipkan kedalam komentar :
    Contoh Tampilan Judul pada Kolom Komentar


    Ini adalah hasil CATATAN yang disipkan kedalam komentar :
    Catatan : Pengennya sih sama kamu, tapi hatiku untuk dia

    Ini adalah contoh teks TEBAL dan Ini adalah contoh teks Miring.

    Nah, contoh "hasil jadi" diatas kemungkinan akan berbeda dengan yg ada di blog kalian, karena "hasil jadi" nya akan mengikuti struktur CSS pada blog yang kalian gunakan, jadi., ya relatif lah .., ^^v

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.