Cara Mudah Menambahkan Gambar, Video, Kode Pada Komentar Blog

Menambahkan Gambar Pada Komentar Blog

Belajar Komputer -  Sebenarnya postingan kali ini berawal dari pengalaman pribadi yang penulis alami, pada update sebelumnya penulis pernah membahas tentang Cara Mempercepat Koneksi Modem Smartfren dan beberapa hari setelah postingan ini dipublish, ada pengunjung blog yang menanyakan Bagaimana Cara Menghubungkan Modem dengan Antenanya, sempat bingung bagaimana cara menjelaskannya kalau menggunakan kata-kata, akhirnya terbersit dalam benak saya untuk menjelaskan dengan kombinasi kata-kata disertai gambar, nah sekarang yang jadi kendala adalah Bagaimana Menambahkan Gambar Pada Komentar Blog Saya.

Setelah itu saya memutuskan untuk mencari Tutorial tentang Bagaimana Cara Menambahkan Gambar Pada Komentar Blog, akhirnya setelah beberapa saat browsing ketemulah dengan blog Kang Ismet yang secara rinci pertanyaan yang ada di benak saya, pada tutorial yang saya temukan, tidak hanya membahas tentang Bagaimana Cara Menambahkan Gambar Pada Komentar Blog, tetapi juga dibahas Bagaimana Menambahkan Video, Kode dan Blockquote Pada Komentar Blog.

Sekarang apa yang saya sudah dapatkan dari Blog Kang Ismet sudah saya aplikasikan pada blog kesayangan saya ini, dan pada postingan kali ini saya juga akan membagikannya kepada teman-teman semua yang ingin mempercantik blognya dengan Menambahkan Gambar, Video, Kode dan Blockquote Pada Komentar Blog. Silahkan simak langkah-langkahnya berikut ini:

Langkah 1 - Simpan kode berikut diatas ]]></b:skin>

#comment-holder .cm-youtube {  
  display:block;
  border:none !important;
  background-color:#333;
  width:450px;
  height:240px;
  margin:0 auto 30px;
}
#comment-holder .cm-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 Anda untuk melihat gambar ini!";
  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 Anda untuk melihat video ini!";
}

Langkah 2 - Simpan kode berikut diatas </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='cm-image' src='$1' alt='loading...' \/>");
 b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
 b = b.replace(/<i rel="youtube">http:\/\/www.youtube.com\/embed\/(.[^>]*)<\/i>/ig, "<iframe class='cm-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='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
 b = b.replace(/\[youtube\]http:\/\/www.youtube.com\/embed\/(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-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='cm-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') {
   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>

Kemudian Simpan Template.

Langkah 3 - Cara Penulisan (Mengaplikasikan)

Berikut adalah cara Menuliskannya / format penulisan pada komentar blog Anda.

Menulis Tag <code>
<i rel="code">Tulis kode yang sudah diparse di sini</i>, atau
[code]Tulis kode yang sudah diparse di sini[/code]

Menulis Tag <pre>
<i rel="pre">Tulis kode yang sudah diparse di sini</i>, atau
[pre]Tulis kode yang sudah diparse 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">Tulis URL gambar di sini</i>, atau
[img]Tulis URL gambar di sini[/img]

Memasukan/Menambahkan Video Youtube

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

Sekian dulu postingan kali ini semoga bisa bermanfaat untuk semuanya, jangan lupa untuk membaca update sebelumnya mengenai Bagaimana Cara Membuat Pesan Diatas Kotak Komentar.

Inspirasi Blog :
http://blog.kangismet.net/2013/08/memasukan-gambar-youtube-kode-pada-komentar-blogger.html