Script Gambar Pada Komentar

Script Gambar Pada Komentar

27 Comments

Update - Sebenarnya pada body komentar dapat dimasukkan gambar, namun terlebih dahulu kita harus memasukkan script untuk mendukung space dan kerja dari gambar yang akan ditampilkan. Mungkin ini jadi daya tarik sendiri bagi pengunjung blog anda, untuk memberi komentar sekaligus memasukkan gambar ke dalamnya. Uniknya lagi, ternyata bukan hanya gambar saja yang dapat dimasukkan, namun kita juga bisa memberi efek marquee dan memberi warna tertentu. Baiklah, langsung saja kita bahas cara pasang script gambar pada komentar

Log in ke blog
Klik Rancangan
Klik Edit HTML
Centang Expand Template Widget
Masukkan script berikut di atas kode </body>
<a href='http://blogonol.blogspot.com'><img alt='blogonol | blogger tutorial' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj15aRvpwaadFE5SvDUCUol6vuYtYjXjWN3Q_y9WtaiWAV0oJrWOz53fw86aDvgB0wX6EdAmbhIT03jSfSOg4iPZDXgXVKSUEhyphenhyphenQPIIc941SyidFd0-znvPfiKldHv_u6lJYpzS4xrYMJAF/s1600/best+blogger+tips.png'/></a><script src='http://hosting.gmodules.com/ig/gadgets/file/105066904960012479556/nccode.js' type='text/javascript'/><a href='http://blogonol.blogspot.com'>tutorial blog dan seo</a>
Klik Simpan Template
Jika ingin memberikan gambar pada komentar, kgunakan script ini pada kolom komentar
[im]http://alamat gambar anda.jpg[/im]

Jika ingin memberi efek marquee, masukkan script berikut pada kolom komentar
[ma]masukkan tulisan di sini[/ma]

Jika ingin memberi warna tertentu pada komentar, masukkan script ini dalam kotak komentar
[co="red"]Comment Text Here[/co] /* silahkan ganti red dengan blue, green, orange, atau warna lainnya */
Update - Karena beberapa template yang semakin berkembang, mungkin script di atas tidak berfungsi lagi. Solusinya saya menambahkan tutorial ke dua dengan menggunakan script kang ismet. Sekarang ikuti langkah pemasangannya.
Pasang kode berikut di atas kode ]]></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!"}
Pasang kode berikut di atas kode </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>
Selanjutnya klik simpan template
Catatan:
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 dengan 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]
Silahkan berkomentar di blog ini untuk mencobanya. Kamu dapat masukkan gambar, memberi warna, atau memberi efek tulisan berjalan (marquee) pada body komentar yang akan muncul. Demikian tutorial cara memberi gambar, efek marquee, dan memberi warna pada komentar, semoga bermanfaat bagi semua. Amin. Selamat mencoba dan sukses selalu


"keep spirits and do the best"
Mau belajar trick dan tips blogging lengkap dan mudah?... BACA DI SINI

About the Author

Blogonol adalah Blog - 0 atau blog kosong dengan konten tutorial blog, seo, widget, template gratis, dan blog info yang dikonsep secara sederhana untuk belajar membangun blog yang lebih baik.