Masukan Gambar, video Dan Emot Kedalam Komentar

Masukkan gambar, video dan emot kedalam komentar kodenya lumayan panjang sih pastinya sudah bisa dan udah tak coba caranya

1. login ke blogger

2. rancangan => edit html

3. cari kode </body> letakkan kode berikut diatas kode tadi

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
// Add More Features to the Blogger Comments
// Fix some bugs that I got from some similar code out here :)
// Date: 21 May 2012
// Time: 22:50 WIB
// Author: Eko Yulianto
// URL: http://eko-tipsntrick.blogspot.com
function repText(id) {
var a = document.getElementById(id),
b = a.innerHTML,
c = "http://reader-download.googlecode.com/svn/trunk/images/emo/";
// Images
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...' \/>");
// YouTube video
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>");
// Code & text block
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(/\[code\](.[^\]]*)\[\/code\]/ig, "<code>$1<\/code>");
b = b.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre>$1<\/pre>");
b = b.replace(/\[blockquote\](.[^\]]*)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");
// Finishing YouTube and Reduce filesize from images that uploaded by Blogger
b = b.replace(/&feature=[0-9a-zA-Z-_]*/ig, "");
b = b.replace(/\/s(640|1600)/g, "/s400");
// Emoticons
b = b.replace(/\s:\)+/g, " <img class='emo' alt='emo' src='" + c + "smile.gif'\/>");
b = b.replace(/\s;\)+/g, " <img class='emo' alt='emo' src='" + c + "wink.gif'\/>");
b = b.replace(/\s:$/g, " <img class='emo' alt='emo' src='" + c + "sad.gif'\/>");
b = b.replace(/\s=\(/g, " <img class='emo' alt='emo' src='" + c + "sadanimated.gif'\/>");
b = b.replace(/\s@@,/g, " <img class='emo' alt='emo' src='" + c + "rolleyes.gif'\/>");
b = b.replace(/\s:s/ig, " <img class='emo' alt='emo' src='" + c + "sullen.gif'\/>");
b = b.replace(/\s:(\\|\/)/g, " <img class='emo' alt='emo' src='" + c + "memble.gif'\/>");
b = b.replace(/\s:D/g, " <img class='emo' alt='emo' src='" + c + "haha.gif'\/>");
b = b.replace(/\s=D/g, " <img class='emo' alt='emo' src='" + c + "hihi.gif'\/>");
b = b.replace(/\s\^:D/g, " <img class='emo' alt='emo' src='" + c + "abovemehaha.gif'\/>");
b = b.replace(/\s\^(\_|)\^/g, " <img class='emo' alt='emo' src='" + c + "senyum-tulus.gif'\/>");
b = b.replace(/\s:'\(/g, " <img class='emo' alt='emo' src='" + c + "cry.gif'\/>");
b = b.replace(/\sT_T/ig, " <img class='emo' alt='emo' src='" + c + "tears.gif'\/>");
b = b.replace(/\sB$/g, " <img class='emo' alt='emo' src='" + c + "cool.gif'\/>");
b = b.replace(/\s:Q/ig, " <img class='emo' alt='emo' src='" + c + "smoking.gif'\/>");
b = b.replace(/\s7:$/g, " <img class='emo' alt='emo' src='" + c + "conf.gif'\/>");
b = b.replace(/\s:p/ig, " <img class='emo' alt='emo' src='" + c + "wee.gif'\/>");
b = b.replace(/\s:Oz+/ig, " <img class='emo' alt='emo' src='" + c + "sleep.gif'\/>");
b = b.replace(/\s7:O/ig, " <img class='emo' alt='emo' src='" + c + "angry.gif'\/>");
b = b.replace(/\s\\o\//ig, " <img class='emo' alt='emo' src='" + c + "applause.gif'\/>");
b = b.replace(/\s\\m\//ig, " <img class='emo' alt='emo' src='" + c + "metal.gif'\/>");
b = b.replace(/\s(<3|:\*)/ig, " <img class='emo' alt='emo' src='" + c + "love.gif'\/>");
b = b.replace(/\s0:$+/ig, " <img class='emo' alt='emo' src='" + c + "angelgreen.gif'\/>");
b = b.replace(/\s\^o\^/ig, " <img class='emo' alt='emo' src='" + c + "angelwhite.gif'\/>");
b = b.replace(/\s:-a/ig, " <img class='emo' alt='emo' src='" + c + "vomit.gif'\/>");
b = b.replace(/\s\*fck\*/ig, " <img class='emo' alt='emo' src='" + c + "fuck.gif'\/>");
b = b.replace(/\sxV/ig, " <img class='emo' alt='emo' src='" + c + "demo.gif'\/>");
b = b.replace(/\sx\@/g, " <img class='emo' alt='emo' src='" + c + "marahbesar.gif'\/>");
b = b.replace(/\s\X\@/g, " <img class='emo' alt='emo' src='" + c + "arrgh.gif'\/>");
b = b.replace(/\s:-d/ig, " <img class='emo' alt='emo' src='" + c + "top.gif'\/>");
b = b.replace(/\s:-bd/ig, " <img class='emo' alt='emo' src='" + c + "topmarkotop.gif'\/>");
b = b.replace(/\s\~x\(+/ig, " <img class='emo' alt='emo' src='" + c + "ugh.gif'\/>");
b = b.replace(/\s:W/g, " <img class='emo' alt='emo' src='" + c + "explain.gif'\/>");
b = b.replace(/\s\'\'J/ig, " <img class='emo' alt='emo' src='" + c + "call.gif'\/>");
document.getElementById(id).innerHTML = b;
} repText('comment-holder');
//]]>
</script>
</b:if>

4. cari kode <head> letakkan kode berikut diatas kode tadi

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* Add More Features to the Blogger Comments by eko yulianto */
img.emo {
display:inline-block;
vertical-align:middle;
}
#comment-holder .cm-youtube {
display:block;
border:none !important;
background-color:#333;
width:370px;
height:218px;
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:2px;
max-width: 95%;
}
#comment-holder code,
#comment-holder i[rel="code"] {
font:normal 12px Monaco,"Courier New",Monospace;
color:blue;
}
#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;
}
#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:bold;
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!";
}
</style>
</b:if>

5. kemudian simpan

Cara Menggunakan Kode

Penggunaan gambar

[img]URL Gambar[/img]

Penggunaan Video

[youtube]URL Video[/youtube]

Penggunaan Emoticon

:) :( =( :s ^_^ :D =D ^:D @@, ;) :-bd :-d :'( :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ <3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( ''J :W

Kiranya hanya sampai disini postingan kali ini lain kali akan posting lagi

6 comments

Unknown mod

June 26, 2012 at 8:46 AM

test :) :( =( :s ^_^ :D =D ^:D @@, ;) :-bd :-d :'( :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ <3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( ''J :W

Share With Agung Talaga mod

June 26, 2012 at 2:42 PM

Saya juga mau tes2 sob and sekalian salam kenal ya....
:) :( =( :s ^_^ :D =D ^:D @@, ;) :-bd :-d :'( :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ <3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( ''J :W