Tampilkan Emoticon pada Thread Comment

Berbicara mengenai Blog agar tampil beda tentu keinginan semua Blogger, dengan cara yang berbeda - beda tentunya, :z tapi disini saya akan berbagi dengan kawan Cara menambahkan Emoticon pada Thread Comment atau Komentar Terbaru Google :r

Kawan masih ingat dengan Postingan saya tentang Ekspresikan Pengunjung Blog dengan..... atau Pasang Emoticon Multi Fungsi di Blog yang semuanya itu hanya untuk Komentar Lama Blog sedangkan pada Thread Comment tidak bisa tampil, tentu saja karena Css Thread Comment beda dengan Komentar Lama Blogger :y Pada kali ini saya mencoba meng-Edit ulang Script Emoticon multi fungsi yang dulu memakai huruf dan tanda baca, :q sekarang saya hanya mempergunakan huruf / alfabet saja [dari huruf a sampai dengan z] Okey cukup sekian ceritanya, langsung saja 

Caranya :

• Masuk Account Blogger dengan ID kawan 
• Pada Dasbor pilih Template 
• Pada Template pilih Edit HTML - Lanjutkan
• Cari </body> yang pada Template Designer letaknya paling bawah
• Copas Script berikut tepat diatas </body>

<script src='https://sites.google.com/site/blogrenovasi/java-script/Editor_Smyle.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

function replaceText(){if(!document.getElementById){return;}

bodyText = document.getElementById("comment-holder");

theText = bodyText.innerHTML;

theText = theText.replace(/:a/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>");

theText = theText.replace(/:b/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>");

theText = theText.replace(/:c/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif'/>");

theText = theText.replace(/:d/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>");

theText = theText.replace(/:e/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>");

theText = theText.replace(/:f/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>");

theText = theText.replace(/:g/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>");

theText = theText.replace(/:h/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/>");

theText = theText.replace(/:i/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/>");

theText = theText.replace(/:j/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/>");

theText = theText.replace(/:k/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/>");

theText = theText.replace(/:l/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/>");

theText = theText.replace(/:m/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>");

theText = theText.replace(/:n/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/>");

theText = theText.replace(/:o/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif'/>");

theText = theText.replace(/:p/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/>");

theText = theText.replace(/:q/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>");

theText = theText.replace(/:r/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>");

theText = theText.replace(/:s/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/>");

theText = theText.replace(/:t/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif'/>");

theText = theText.replace(/:u/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>");

theText = theText.replace(/:v/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif'/>");

theText = theText.replace(/:w/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif'/>");

theText = theText.replace(/:x/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdE3glOQIZjspIhxrIkFlP83TEEHK2rGqxMw0Y8V0dzkal0RhpFeMl3iuAdgSyN87Ih_VSbEDo7fWhdrqbYbevZnDBxlVMqCfX8DFGno23fQSouWSm5gK_EBiiO7aU-aw6G0ZtZm84VXM/s1600/buatD.gif'/>");

theText = theText.replace(/:y/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7RcYqblRwh6u8fyMYSKlZIhwn_B4JrneCHRb3O0oKxWaFtYBAHsUzvPdsf4MuZllKLzld-5IzkC0cml0ZNsuSQV5hMlEkjOnY7qImmgSVHC8z6Qa_WFT_CG2qy9rZHe9NnDqe079l5Xw/s1600/joget.gif'/>");

theText = theText.replace(/:z/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPzGWx0wmceIvpT79Hu_9RIyJinIU65JVFTWAvzDq0bfsewr6oic-yVoPwTFnsG92i2DnTZj9E0s7sYqG1YB37JyISV4L80uHNfjTbzIBjcrOIwgAO-b6OfRkfI_LjbrBBUUPbQogRbzc/s1600/xKopi.gif'/>");

bodyText.innerHTML = theText;

}replaceText();

//]]>

</script>

• Simpan Template kawan

Penjelasan :

1. Script Js yang saya beri warna merah khusus dipergunakan pada Editor Post 
2. Kalau kawan ingin mengganti image Emoticon smiley atau mengganti Kodenya [dari alfabet] menjadi angka silahkan asal kawan simpan kembali Scriptnya di tempat kawan menyimpan file, karena script tersebut saya simpan menyatu dengan Script Js diatas.

Bagaimana cara menampilkan Kodenya di Blog, agar pengunjung yang memberikan Komentar bisa mengetahuinya ? :y - :r

Terus terang ini yang agak ribet sedikit, tapi kawan jangan berkecil hati, karena saya kasi tahu caranya, yaitu mencoba-coba karena struktur Template pada umumnya berbeda-beda, tapi pada prinsip dasarnya yang kawan cari adalah kode seperti ini  <p><data:blogCommentMessage/></p> [ini pada Template jumlahnya berbeda, ada 3, atau 4]  :w  disamping tampilannya bisa diatas / dibawah Post Editor Komentar

Atau kawan bisa cari  

<b:if cond='data:post.embedCommentForm'> yang pada Template saya jumlahnya ada 2 [pakai yang pertama] tampilannya menetap diatas Komentar

Okey langsung saja :

• Posisi kawan masih tetap pada Template - Edit HTML
• Beri tanda cek  disamping Expand Template Widget 
• Cari
  <p><data:blogCommentMessage/></p> yang dibawahnya ada  <data:blogTeamBlogMessage/> 
• Simpan Script berikut diantaranya

<div style='overflow:hidden;width:420px;height: auto; padding:10px; margin-left:8px;border:1px solid #000;-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;text-align: left; line-height: 20px; font-size: 14px; font-family: Arial bold; color:#000; background:#95CAFF;'>

<span style='color: rgb(0, 0, 255); padding:5px; font-size:16px; font-family: Arial bold;'><center><blink>BERIKAN KOMENTAR SESUAI TOPIK <br/> BUKAN SPAM - PORNO MAUPUN SARA </blink> <br/><br/>

EKSPRESIKAN KOMENTAR KAWAN DENGAN EMOTICON : </center></span> 

<br/><br/><center>

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>  :a

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> :b

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif'/> :c

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :d

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :e

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :f

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :g

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> :h

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> :i

<br/>

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> :j

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/> :k

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> :l

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :m

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> :n

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif'/> :o

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/> :p

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :q

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> :r

<br/>

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/> :s

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif'/> :t

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :u

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif'/> :v

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif'/> :w

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdE3glOQIZjspIhxrIkFlP83TEEHK2rGqxMw0Y8V0dzkal0RhpFeMl3iuAdgSyN87Ih_VSbEDo7fWhdrqbYbevZnDBxlVMqCfX8DFGno23fQSouWSm5gK_EBiiO7aU-aw6G0ZtZm84VXM/s1600/buatD.gif'/> :x

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7RcYqblRwh6u8fyMYSKlZIhwn_B4JrneCHRb3O0oKxWaFtYBAHsUzvPdsf4MuZllKLzld-5IzkC0cml0ZNsuSQV5hMlEkjOnY7qImmgSVHC8z6Qa_WFT_CG2qy9rZHe9NnDqe079l5Xw/s1600/joget.gif'/> :y

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPzGWx0wmceIvpT79Hu_9RIyJinIU65JVFTWAvzDq0bfsewr6oic-yVoPwTFnsG92i2DnTZj9E0s7sYqG1YB37JyISV4L80uHNfjTbzIBjcrOIwgAO-b6OfRkfI_LjbrBBUUPbQogRbzc/s1600/xKopi.gif'/> :z

</center>

</div>

• Width : 420px; silahkan kawan menyesesuaikan dengan lebar Kotak Komentar kawan
• Hasilnya seperti