Memasang kode, gambar dan video di komentar

Buat agan yang bingung dengan judul di atas sebenarnya adalah judul tentang cara menyisipkan dan mengijinkan kode, gambar dan video di komentar blogger. jadi kali ini kita akan membahas hal tersebut, karena saya pernah berkunjung ke sebuah blog yang memasang tool konversi kode tapi tidak memasang javascript ini jadi percuma juga menggunakan tool konfersi untuk menyisipkan salah satu dari hal di atas.
 

trik ini berguna untuk sebuah blog yang terutama menyajikan info tutorial sehingga ketika pengunjung ingin menyanyakan topik tertentu dengan menyertakan cuplikan kode, sedangkan untuk gambar dan video di pergunakan untuk kebutuhan tertentu sperti memberi sc dan lainnya, untuk video tergantung kebutuhan saja. jadi langsung saja mari kita mulai.

pertama silahkan pahami terlebih dahulu kode javascript berikut ini, lalu letakkan di atas tag penutup body yaitu </body>

<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='db-comt-image' src='$1' alt='loading...' \/>");
 b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='db-comt-image' src='$1' alt='loading...' \/>");
 b = b.replace(/<i rel="youtube">http:\/\/www.youtube.com\/embed\/(.[^>]*)<\/i>/ig, "<iframe class='db-com-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
 b = b.replace(/<i rel="youtube">(http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^>]*)<\/i>/ig, "<iframe class='db-com-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
 b = b.replace(/\[youtube\]http:\/\/www.youtube.com\/embed\/(.[^\]]*)\[\/youtube\]/ig, "<iframe class='db-com-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
 b = b.replace(/\[youtube\](http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^\]]*)\[\/youtube\]/ig, "<iframe class='db-com-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
 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') {
   db-comt-post = b.item(i).innerHTML.replace(/\[code\](.[^\]]*)\[\/code\]/ig, "<code>$1<\/code>"); /* untuk mengeksekusi baris tag kode */
   db-comt-post = db-comt-post.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre>$1<\/pre>");                  /* untuk mengeksekusi baris kode pada tag pre */
   db-comt-post = db-comt-post.replace(/\[blockquote\](.[^\]]*)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>"); /* untuk mengeksekusi baris kode catatan */
   db-comt-post = db-comt-post.replace(/\[quote\](.[^\]]*)\[\/quote\]/ig, "<blockquote>$1<\/blockquote>");          
   b.item(i).innerHTML = db-comt-post;
  }
 }
}
//]]>
</script>

cara penerapan pada komentar biasanya dalam kode konversi telah di sertakan ketika kita mengkonversi kode, jika ingin melakukan secara manual gunakan kode di bawah ini saat berkomentar:

Menulis Tag <code>

<i rel="code">Tulis kode di sini</i>, atau [code]Tulis di sini[/code]

Menulis Tag <pre>

<i rel="pre">Tulis kode di sini</i>, atau [pre]Tulis kode di sini[/pre]

Menulis Catatan (Blockquote)

<b rel="quote">Tulis catatan di sini</b>, atau [quote]Tulis catatan di sini[/quote], atau [blockquote]Tulis catatan di sini[/blockquote]

Memasukan/Menambahkan Gambar

<i rel="image">URL gambar di sini</i>, atau [img]URL gambar di sini[/img]

Menambahkan Video Youtube

<i rel="youtube">URL Video Youtube di sini</i>, atau [youtube]URL Video Youtube di sini[/youtube]

jangan lupa tambahkan css berikut ini di template sobat untuk mengatur tampilan dari semua kode di atas

#comment-holder .db-com-youtube {  
  display:block;
  border:none !important;
  background-color:#333;
  width:450px;
  height:240px;
  margin:0 auto 30px;
}
#comment-holder .db-comt-image {
  display:block;
  margin:0 auto 15px;
  outline:none;
  border:1px solid #ccc;
  background-color:white;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  padding:5px;
  max-width:96%;
  height:auto;
  width:auto;
}
code, #comment-holder code,
#comment-holder i[rel="code"] {
  font:normal 12px Monaco,"Courier New",Monospace;
  color:blue;
}
pre, #comment-holder pre,
#comment-holder i[rel="pre"] {
  display:block;
  font:normal 12px Monaco,"Courier New",Monospace;
  background-color:#333;
  color:white;
  padding:0.5em 1em;
  word-wrap:normal;
  white-space:pre;
  overflow:auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
blockquote, #comment-holder blockquote,
#comment-holder b[rel="quote"] {
  margin:0 2%;
  background-color:#eee;
  padding:1em 1.2em;
  border-left:4px solid #7498AD;
  display:block;
  font-weight:normal;
  font-style:italic;
}
#comment-holder i[rel="image"],
#comment-holder i[rel="youtube"] {
  display:block;
  overflow:hidden;
  border:2px solid black;
  position:relative;
  width:170px;
  height:100px;
  margin:0 auto 30px;
}
#comment-holder i[rel="image"]:before,
#comment-holder i[rel="youtube"]:before {
  content:"Silahkan enable JavaScript untuk melihat gambar!";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:red;
  color:white;
  font-weight:bold;
  text-align:center;
  padding:15px 0;
}
#comment-holder i[rel="youtube"]:before {
  content:"Silahkan enable JavaScript untuk melihat video!";
}

jadi jangan lupa juga untuk menyimpan perubahan, untuk melihat hasilnya cek deh dengan memasukkan kode di komentar sesuai cara diatas...

semoga berguna dan bermanfaat.