Cara Agar Kolom Komentar Blog Dapat Disisipi Gambar

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

Nah, kali ini akan saya bahas mengenai caranya kotak komentar biar dapat disisipi gambar gambar tertentu biar lebih manis dilihat. Contoh demonya dapat dilihat di kolom komentar saya di bawah

1. Login ke akun Blogger
2. Pilih Template > Edit HTML
3. Cari aba-aba </body> lalu letakkan script dibawah ini sempurna 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 aba-aba dibawah ini

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

atau


[img]URL Gambar Anda[/img]



6. Tulisan berwarna Merah ialah aba-aba URL gambar yang Anda inginkan.
7. Lalu lihat hasilnya, Gambar anda akan tampil dikala komentar anda sudah diluncurkan.

Selamat Mencoba! Tolong di share juga ya :)

Berbagi :