Cara Membuat Kotak Komentar dapat Menyisipkan Gambar, Catatan, Video, dan Kode dengan Mudah

Assalamu’alaikum..

            Pada blog yang menyediakan tutorial, pastinya gambar akan sangat membantu memahami seorang reader ketika sedang mengikuti tutorial yang diberikan oleh admin blog. Tidak akan menarik ketika blog yang menyediakan tutorial hanya tulisan saja, tidak ada gambarnya.

            Ketika admin blog sudah memberikan gambar pada tutorial diblog-nya, apakah para reader akan bisa langsung mengerti/memahami ? menurut saya masih akan sedikit kesulitan.

            Nah saat itu mungkin saja terjadi sedikit problem meskipun para reader sudah mengikuti tutorial yang sudah admin blog berikan. Lalu bagaimana reader blog tersebut bertanya problem yang terjadi saat mengikuti tutorialnya ?

            Apakah melalui Contact yang tersedia, menghubungi admin melalui email, atau bertanya langsung di kotak komentar ?

            Untuk memudahkan para reader bertanya dan memberikan screenshoot problem yang terjadi, alangkah mudahnya ketika admin blog memberikan fitur pada kotak komentar diblognya agar dapat berkomentar dengan menyisipkan gambar. Lalu bagaimana caranya ?

            Oke pada pembahasan kali ini saya akan membahas Cara Membuat Kotak Komentar dapat Menyisipkan Gambar, Catatan, dan Kode dengan Mudah. Silahkan disimak yaa :

1. Silahkan LogIn ke blog sobat terlebih dahulu. Disini.

2. Setelah itu akan masuk ke Dashboard/Home blog. Silahkan klik Arah panah kebawah, pada blog yang dipilih – klik Template – Kllik “Edit HTML”, seperti gambar dibawah.

3. Letakkan script di bawah, diatas Kode </body> . Gunakan CTRL+F untuk mencari kodenya.

<script type='text/javascript'>

//<![CDATA[

eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('$("#10 18, #10 20").17(3(){$(2).19($(2).19().32(/\\[5\\](.*?)\\[\\/5\\]/31,"<5 34=\'35\' 37=\'36\' 9=\'$1\' 30=\'0\'></5>")),$(\'5.23:22([9*="24.25/28"])\').27("9").26("39","#46 49(48.51) 52-54 50% 50%")}),$("#10 18, #10 20").17(3(){$(\'13[4^="43"]\',2).45().44("55").40(),$(\'16[4="15"]\',2).7(3(){6 $("<15></15>").14($(2).8())}),$(\'16[4="38"]\',2).7(3(){6 $("<53 />").42("9",$(2).41())}),$(\'13[4="12"]\',2).7(3(){6 $("<12></12>").14($(2).8())}),$(\'13[4="47"]\',2).7(3(){6 $("<21></21>").14($(2).8())}),$(\'16[4="11"]\',2).8().29().33("<11></11>")});',10,56,'||this|function|rel|iframe|return|replaceWith|contents|src|comments|code|h3|b|append|pre|i|each|p|html|dd|blockquote|not|video|youtube|com|css|removeAttr|embed|unwrap|frameborder|gi|replace|wrap|width|420|315|height|image|background|remove|text|attr|h|filter|nextAll|900|quote|error|url||png|no|img|repeat|br'.split('|'),0,{}))

//]]>

</script>

<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>

4. Klik “Save Template”. Seperti gambar dibawah.

5. Silahkan coba dengan menyisipkan kode <i rel="image">Link Gambar Anda</i> di kotak komentar – lalu klik Publish/Publikasikan, atau sobat bisa menyisipkan kode lain :

Menyisipkan kode :  <i rel="code">Kode Anda</i> atau <i rel="pre">Kode Anda</i>

Menyisipkan judul :  <b rel="h3">Judul Anda.</b>

Menyisipkan catatan :  <b rel="quote">Catatan.</b>

Membuat teks tebal :  <b>Teks Anda.</b>

Membuat huruf miring :  <i>Teks Anda</i>

Menyisipkan Video : [iframe]Masukan Url Embed Video Anda Disini[/iframe]

Sedikit tambahan untuk video tersebut Responsive.

<style type='text/css'>

/*KOMEN VIDEO*/

.comment_body iframe {

  width: 100%!important;

  height: 400px;

}

@media screen and (max-width:960px) {

  .comment_body iframe {

    max-height: 90%

  }

}

@media screen and (max-width:768px) {

  .comment_body iframe {

    max-height: 75%

  }

}

@media screen and (max-width:600px) {

  .comment_body iframe {

    max-height: 60%

  }

}

@media screen and (max-width:480px) {

  .comment_body iframe {

    height: auto!important;

    max-height: auto!important

  }

}

</style>

            Bingung mengambil kode HTML gambar ? klik Disini.

Hasilnya akan menjadi seperti gambar dibawah.

            Mudah bukan ? silahkan sobat coba sendiri yaa.. Oke mungkin segitu saja Cara Membuat Kotak Komentar dapat Menyisipkan Gambar, Catatan, dan Kode dengan Mudah. Mohon maaf apabila ada kata yang salah dan kurang berkenan. Terima kasih.

Wassalamu’alaikum..

Tweet

Jika Menyukai Artikel di blog ini, Silahkan masukkan email sobat. Akan dapat Update artikel dari blog ini, "GRATISS!!"