Memasang kode, gambar dan video di komentar

Javascript jQuery sitemap

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.

13 komentar

  1. Sebelum ganti template saya juga menggunakan script di atas tapi sudah terhapus dan lupa untuk dibackup, sekarang diposting disini jadi kebetulan sekali akan dipakai lagi di blog saya.
    Izin simpan scriptnya gan... terima kasih sudah berbagi...!

    BalasHapus
  2. Coba tes kode pre
    #comment-holder .db-com-youtube {
    display:block;
    border:none !important;
    background-color:#333;
    width:450px;
    height:240px;
    margin:0 auto 30px;
    }

    BalasHapus
  3. #comment-holder .db-com-youtube {
    display:block;
    border:none !important;
    background-color:#333;
    width:450px;
    height:240px;
    margin:0 auto 30px;
    }

    BalasHapus
  4. jika disini berhasil tp sy praktekkan dikomentar blog tmn,gk bisa ya?

    BalasHapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. Untuk menyisipkan script, gunakan ...KODE SCRIPT ANDA...

    BalasHapus
  7. Untuk menyisipkan script, gunakan ...KODE SCRIPT ANDA...

    BalasHapus

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...