Cara Menambahkan Gambar, Video Pada Komentar Blog

samfxpowermanager.blogspot.com

Cara Menambahkan Gambar, Video Pada Komentar Blog

 

huh! sudah lama tidak posting, bingung posting apa! tapi kali ini saya akan posting di atas :)

yap! menambahkan image atau movie pada blog :) ( gaya sedikit gan )

tutor ini akan meng-edit blog anda dengan cara html :

1. Simpan Template

Login ke blog anda, pilih blog :), klik template dan lihat gambar

( Klik untuk perbesar )

2. Menambahkan kode pada bagian atas (" ]]></b:skin> ")
Klik Tutup pada gambar diatas dan klik Edit HTML

( Klik untuk perbesar )

3. Cari Text (" ]]></b:skin> ")
Sekarang silahkan cari text  " ]]></b:skin> " tanpa tanda kutip ( " )

( Klik untuk perbesar )

Pada gambar di atas ada dua panah yang di bawah text di atas tadi (" ]]></b:skin> ") bosan mengulang lagi, apa boleh buat? :)
dan pada panah di atas kita tambahkan dengan text berikut :

( Listing )

#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!";
}

( End List )

4. Tambahkan Text Diatas (" </body> ")

Nah tambah lagi nih, Tambahkan text dibawah pada diatas text (" </body> ") tanpa tanda ( " )

( Listing )

<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>

( End List )

5. Cara Penulisan Code Pada Komentar Blog Anda

Menulis tag <code>

<i rel="code">Tulis kode yang sudah diparse disini</i>

atau

[code]Tulis kode yang sudah diparse disini[/code]

Menulis tag <pre>

<b rel="pre">Tulis kode yang sudah diparse disini</i>

atau

[pre]Tulis kode yang sudah diparse disini[/pre]

Menulis catatan (Blockquote)

<b rel="quote">Tulis catatan disini</b>

atau

[quote]Tulis catatan disini[/quote]

atau

[blockquote]Tulis catatan disini[/blockquote]

Menambahkan Gambar / Image

<i rel="image">Tulis URL gambar disini</i>

atau 

[img]Tulis URL gambar disini[/img]

Menambahkan Video / Movie di Youtube

<i rel="youtube">Tulis URL video disini</i>

atau

[youtube]Tulis URL video disini[/youtube]

***

Dan bahagia! :)

Selamat mencoba

Tidak boleh CoPas artikel ini

sebelum mengirim surat ke email saya samfx66@gmail.com

Lihat contoh pada komentar dibawah ini