Cara Biar Kolom Komentar Blog Bisa Disisipi Gambar

Cara Agar Bisa Memasukkan Gambar Di Komentar Blog - Pada umumnya kotak komentar yang tersedia di template default tidak memiliki elemen khusus untuk bisa disisipi gambar atau image. Kotak komentar yang sering kita lihat pada blog blog orang lain paling hanya bisa disisipi oleh smiley atau sejenis emoticon sebagai bagian dari gambaran ungkapan si pemberi komentar.

Nah, kali ini akan saya bahas mengenai caranya kotak komentar supaya bisa disisipi gambar gambar tertentu supaya lebih cantik dilihat. Contoh demonya bisa dilihat di kolom komentar saya di bawah

1. Login ke akun Blogger
2. Pilih Template > Edit HTML
3. Cari kode </body> kemudian letakkan script dibawah ini tepat diatasnya:


<script type='text/javascript'>
//<![CDATA[
function repText(id) {
var a = document.getElementById(id),
 b = a.innerHTML,
 b = b.replace(/<i rel="image">(.[^\>]*)<\/i>/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
 b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");

 document.getElementById(id).innerHTML = b;
 b = b.replace(/<i rel="code">(.*?)<\/i>/ig, "<code>$1<\/code>");
 b = b.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre>$1<\/pre>");
 b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>");
 b = b.replace(/&amp;feature=[0-9a-zA-Z-_]*/ig, "");
 b = b.replace(/\/s(640|1600)/g, "/s400");
 } repText('comment-holder'); 
c = document.getElementById('comment-holder');
if (c) {
 b = c.getElementsByTagName("p");
 for (i = 0; i < b.length; i++) {
  if (b.item(i).getAttribute('CLASS') == 'comment-content') {
   ki_comm = b.item(i).innerHTML.replace(/\[code\](.[^\]]*)\[\/code\]/ig, "<code>$1<\/code>");
   ki_comm = ki_comm.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre>$1<\/pre>");
   ki_comm = ki_comm.replace(/\[blockquote\](.[^\]]*)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");
   ki_comm = ki_comm.replace(/\[quote\](.[^\]]*)\[\/quote\]/ig, "<blockquote>$1<\/blockquote>");        
   b.item(i).innerHTML = ki_comm;
  }
 }
}
//]]>
</script> 

4. Simpan Template.
5. Nah untuk memasukan file gambar di kolom komentarnya, anda cukup meletakkan kode dibawah ini

<i rel="image">URL Gambar Anda</i>

atau


[img]URL Gambar Anda[/img]



6. Tulisan berwarna Merah adalah kode URL gambar yang Anda inginkan.
7. Lalu lihat hasilnya, Gambar anda akan tampil ketika komentar anda sudah diluncurkan.

Selamat Mencoba! Tolong di share juga ya :)

Tweet

Fb

Postingan terkait:

Ditulis Raka — Tuesday, April 14, 2015 — Add Comment — Trik dan Tutorial Blog