Cara Memasukan Gambar, Youtube, Blockquote dan Kode pada Komentar



Memasukan Gambar, Youtube, Blockquote dan Kode pada Komentar - Sebetulnya tutorial ini sudah banyak yang membuatnya. Akan tetapi banyak juga yang belum mengetahui cara memasukan gambar, video youtube, kode, catatan ke komentar Blogger, maka saya ambil postingan ini dari Blog Kang Ismet, buat tutorial ini untuk memudahkan pengunjung blog ini.

Biasanya, hal ini digunakan oleh sahabat yang sering berbagi tutorial, untuk memudahkan berbagi kode atau screenshoot.

Kode yang saya bagikan berasal dari DTE, karena ada sebagian kode yang tidak jalan, maka Kang Ismet tambahkan yang lainnya. Silahkan sobat ikuti langkah mudahnya :

Simpan kode ini di atas ]]></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:"Please enable your JavaScript to see this image!";
  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:"Please enable your JavaScript to watch this video!";
}
Kemudian, simpan kode ini di atas </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>
Simpan Template

Format Penulisan :

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 Gambar
<i rel="image">Tulis URL gambar di sini</i>, atau
[img]Tulis URL gambar di sini[/img]

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

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

28 komentar untuk "Cara Memasukan Gambar, Youtube, Blockquote dan Kode pada Komentar"

  1. pertamax nih,izin coba yah sob!!!

    BalasHapus
    Balasan
    1. haha silahkan sob, saya juga udah coba, keren sob :D

      Hapus
    2. kok kode-kodenya nggak muncul ?
      yang muncul cuma gini nih :
      https://lh4.googleusercontent.com/-tPyXz6EM9qc/UgGjHQExUUI/AAAAAAAAAQw/cIqFbWZ17W8/h77/komentar.png

      Hapus
    3. haha sob kode <i rel="code"> dan </i> harus di konversi dulu, caranya klik "konversi kode di atas form-komentar ini sob, lalu masukan <i rel="code"> di dalam kotak konversi, selanjutnya klik konversi, lalu copas kode di dalam kotak konversi tersebut ke pesan formulir :W
      komentar, masih belum jelas, lihatlah gambar dibawah ini:
      http://i.imgur.com/32uvI6C.png

      Hapus
    4. mungkin karena pengaruh formulir pesan komentar sob :W, klo masih belum berhasil coba tanyakan pada kang ismet, barangkali dia tau :D

      Hapus
    5. oh iya ternyata harus di konversi dulu ^_^

      Hapus
    6. sudah berhasil ya \o/ haha dimana kesalahannya ?

      Hapus
    7. iya betul sob harus di konversi dulu, haha \o/

      Hapus
  2. Maaf sob komentarnya kehapus salah hapus saya :p kok bisa gitu ya ?, coba ulangi tutorial di atas mungkin kodenya ada yang kelewat :W tapi saya muncul kodenya sob

    BalasHapus
  3. sob kok di komentar saya gak ada tombol balasnya ?

    BalasHapus
    Balasan
    1. klo buat tombol balas nya gk ada, solusi saya ganti style komentarnya :W

      Hapus
  4. http://mtaufiqh28.blogspot.com/

    MTH BLOG

    share tentang apa saja :v mulai dari tentang android, patch software, PS 3, Info PS4, game PS3, cheat, JKT48, semuanya dah kalo ane tau ane share :v ^^

    blogwalking

    arigatou gozoimas ^^

    BalasHapus
    Balasan
    1. :D salam kenal sob, selamat hari raya Idul Fitri :D

      Hapus
  5. keren gan ,tutornya di coba dulu... :D

    BalasHapus
    Balasan
    1. makasih sob, tapi kode CSS dan Javascriptnya bukan buatan saya, melainkan buatan kang Ismet, hehe :D

      Hapus
  6. nice artikel,, thanks gan atas infonya, jadi nambah wawasan,, koment back ya www.ankurniawan.blogspot.com

    BalasHapus
  7. Balasan
    1. haha sudah lama Lank Cyber4rt(master) gk muncul di komentar blog saya, makasih atas kunjungannya, hehe :-d

      Hapus
  8. koq tulisannya,"HTML Anda tidak bisa diterima: Tag tidak tertutup: B"

    BalasHapus
  9. <b rel="quote"></b&gtujicoba;

    BalasHapus
  10. <b rel="quote">uji coba...</b>

    BalasHapus
  11. I am really enjoying reading your well written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles.

    BalasHapus
  12. This is an incredible web site and that i can't advocate you guys enough. jam-packed with helpful resource and nice layout terribly straightforward on the eyes. judi-bola.biz

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top