Tuesday, May 1, 2012

Masukan gambar,video dan emot ke dalam komentar

Mantappp

Memasukan gambar,video dan juga emoticon ke dalam area komentar pasti akan membuat komentar lebih hidup dan pasti lebih fresh. hemm trik ini menurut saya sangat sederhana karena kodenya gak terlalu banyak dan gak terlalu ribet juga.

1. Masuk di dasbor blogger
2. Klik Template / Rancangan
3. Klik Edit html
4. Klik Prooced / Lajutkan ( jika editor baru )
5. Cari kode </body>
6. Simpan kode di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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: Taufik Nurrohman
// URL: http://hompimpaalaihumgambreng.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(/&amp;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(&lt;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>

7. Cari lagi kode </head> setelah ketemu simpan kode di bawha ini di atas kode tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Add More Features to the Blogger Comments by Taufik Nurrohman */
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>

8. Klik SIMPAN TEMPLATE

Penggunaan kode

1. Untuk penggunaan gambar silahkan anda gunakan tag

[img]URL Gambar[/img] atau <i rel="image">URL Gambar</i>

2. Untuk penggunaan video silahkan anda gunakan tag

[youtube]URL Video[/youtube] atau <i rel="youtube">URL YouTube</i>

3. Untuk Emoticon anda bisa gunakan seperti ini.

:) :( =( :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

4. Memasukan kode bisa menggunakan tag

<i rel="code">Kode Anda</i> atau [code]Kode Anda[/code]

5. Memasukan kode html / css / jquery bisa menggunakan

<i rel="pre">Kode Anda</i> atau [pre]Kode Anda[/pre]

6. Menggunakan blockquote di komentar bisa menggunakan tag

<b rel="quote">Kata-kata Anda</b> atau [blockquote]Kata-kata Anda[/blockquote]


Nah semoga komentar - komentarnya makin hidup dan makin keren dan sukses selalu.
Postingan ini sengaja saya update menggunakan javascript dari bang Taufik karena javascript yang dulu masih banyak yang error kalau yang ini sudah mantap.

75 komentar postingan ini

Manggtaff
ane selama ini cari buat yang emoticon tapi gk selalu muncul tetapi yang ini muncul + youtubeX
Manttaaap Lah..

ini kan cara memasukkan gambar dan video di komentar. nah kok di komentar saya gak kelihatan avatarnya komentatornya sobat????

wah.. keren nih tutorialnya!! thanks for sharing sob :D

Mantaf sob, jadi tambah menarik ya koment box nya hehehe...

mantab gan numpang nyedot ya sahabat

ini yg saya cari²...
dari dulu gak nemu...

makasih sob.. :)

Keren infonya Sob!, makasihhhh...

Huwaaaa... CANGGIIIH BANGEEEET!!!
Ini neh baru Kotak Komentar MANTAAAAAFFFFFF!!!
Hmm.. mo nyobain tapi masih rada ragu neh Sob!!
Hweheheee...

Walaaahh.... Request ane dipenuhin juga akhirnya, makasih banyak ya sobat, baik banget deh sob, langsung pake ah, [img]http://www.grogol.us/style/smiles/uyee.gif[/img] thank you very much

Lah?? Komen ane tadi kemana ya?? Ya udah lah, nggak apa-apa, sekali lagi terima kasih ya sob [img]http://www.grogol.us/style/smiles/uyee.gif[/img]

wah caranya di keluarin juga nie. tenkyu gan. di ccoba ah. makasih ya.

wah akhirnya di keluarin juga rahasianay. di coba ya gan, makasih nie.

wiee,..keren keren,... bisa juga ya ternyata video dimasukin komentar,,. hehehe,... tapi blog saya nak di kasih pasti tambah lemot ya kak??

wew Bloglang jg nih, thanks udah share :D

:))....Keren Gan ...Ane coba dulu yahhh...And Lam Kenal....

wahhh, manteb banget nih sobat :)
sangat bermanfaat :)

ternyata hny dgn satu langkah.., sangat simple sekali..., thx infox gan... *smile

Wah sob, berita buruk, cara ini nggak bisa dipraktekkan ke blog ane sob :((

mantap gan, berhasil. tapi ko senyumnya lebar bener ya... , lucu jadinya. haha

[img]http://ourdesktop.files.wordpress.com/2011/02/alam-009-1366x768.jpg[/img]

Testing bang?

Ya ampun dari dulu kok itu terus di tanya bang. kan udah aku bilang mungkin karena ada scroll nya :D

keren, oh iya gambarnya bisa diganti gak ? :))

Bisa silahkan ganti aja URL gambarnya

ada 22 komentar, sy yg ke 23 komentar yg tampak/enggak tampak nih!!!
test!

yang saya tampak kok, mungkin ini terjadi galat pada pihak bloggernya...
ada enggak yg lebih komentarnya dari 20? tampak semua nggak! kalau iyah brarti galat terjadi hanya pada postingan ini (bgt kira2)

Ya bisa. wah aneh kalau gitu ya, emm coba deh kalau gitu aku edit2 postingannya, tapi kalau postingan yang ke bawah tetep keliatan cuman yang agak di atas tuh yang gak keliatan, Saya aja ini komentar yang ke 38

ets maksud saya komentarnya. sampe salah tulis :D

wah gak tau ya hehehe yang penting jangan kebanyakan JS :)

Hehehe salam kenal juga bang

Wah sedih banget :(( kira2 kenapa ya, emmm

[img]http://www.grogol.us/style/smiles/Piyeiki.gif[/img] Iya sob, kenapa ya?? Haduh, bingung ane nih? Sedih deh

Mungkin karena km gak pake' komentar yang style threaded

Ets maksud saya Style Threaded Bawaan BLOGGER

test gan !!!
:)) =d> :D :P :(( :) :( :-? [-( :-o :-t :-ss b-( @-) =))

tes

[blockquote] img.emo {
display:inline-block;
vertical-align:middle;
} [/blockquote]

Test test
http://www.youtube.com/watch?v=5j67-gScMX8&feature=g-vrec

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

mantep infonya salam
sukses dari
http://gunung-air.com
(peralatan Rumah tangga)

[blockquote]Thanks infonya..., sangat berguna [/blockquote]

mas sin

kalau buat kotak seperti diatas kotak komentar ini gimana yah?

"Jika ingin memasukan gambar gunakan tag
[img]url gambar[/img]
Jika Video
[youtube]URL Video[/youtube]
Jika kata - kata mutiara gunakan
[blockquote]Kata-kata Anda[/blockquote]
Anda juga bisa menggunakan emoticon seperti biasa."

soalnya pas nyoba makai di setingan default blogger ga bisa ditambahin dengan tag nya.

mohon bantuannya mas :D

Disini mas postingan saya tentang pesan formulir komentar itu

http://sin1aja.blogspot.com/2012/05/pesan-formulir-komentar-keren.html

saya terapkan hasilnya nihil,bisa cek di blog saya gan

di blognya kok g ada komentar, aku jd g bs ngecek

http://exitren.blogspot.com/2012/06/beberapa-keuntungan-memiliki-bos-yang.html

coba link itu gan

Gan kami minta cara atau tutorialnya kalau ada dan anda mau...bagaimana cara membuat Perpendek Komentar Sperti Blog Ini.Kalau berkenan kirim ke e-mail : cintakubaca@gmail.com

salam, andikwin facewoman

ga fungsi nih :(
editin dong blog saya ya :) boleh ?

mas kalo berkenan editin html blog saya dong biar bisa kaya gini, soalnya saya coba ga bisa2

Tes Tes [img]http://hermanbagus.mywapblog.com/files/hermanbagus-profile.jpg[/img] Hehehehe

[youtube]http://www.youtube.com/watch?v=_Ct9mZGsVtA&feature=g-all-xit[/youtube]

punya sya ko ga muncul gan.. :( ?????

boyrohman.blogpspot.com

[blockquote]test gan[/blockquote]

tess code

[code] konde: 4 lusin [/code]

tess pre css

[pre] djarum-super: 5ltr;
gula: 1kg; [/pre]

keren mas, tapi saya terapin emoticon nya aja ah asalnya udah terlalu banyak CSS sama JS nya di blogku takut nambah beban.. o iya salam kenal.

Ganteng amattt... :))

numpang ngetes gan
[youtube]http://www.youtube.com/watch?v=VLSqBohpSlA[/youtube]
http://www.youtube.com/watch?v=VLSqBohpSlA

[youtube]http://www.youtube.com/watch?v=66zgz7uEjgg[/youtube]

testing.... :D

This comment has been removed by the author.

tutorialnya sangat keren sob, ijin coba =D

[img]http://www.grogol.us/style/smiles/uyee.gif[/img]

wih berhasil lagi saya terapkan di blogku, Makasih yah Mas tutorialnya ^_^

Jika ingin memasukan gambar gunakan tag
[img]url gambar[/img]
Jika Video
[youtube]URL Video[/youtube]
Jika kata - kata mutiara gunakan
[blockquote]Kata-kata Anda[/blockquote]
Emoticon
EmoticonEmoticon