Ekspresikan Commentator Thread dengan Emoticon

Setelah selesai saya berkreasi pada Komentar, baik Komentar lama maupun Komentar terbaru dari Google yang ngetrend disebut Thread Comments, yang pada akhirnya kurang lengkap rasanya tanpa diisi Emoticon sebagai bentuk mengekspresikan diri bagi si Komentator :q

Banyak para Blogger yang sudah menampilkan Emoticon untuk Komentator Thread di Blognya ada yang berisi image, youtube/video dan filenya ada yang pakai Js maupun Css biasa, tinggal kawan memilih mau pakai yang mana :z 

Pada Kesempatan ini saya akan mencoba berbagi dengan kawan yang ringan dan gampang di ingat Kodenya disamping biar sama dengan Editor-smiley Blog saya ini :i  promosi nih ye :x
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/AVvXsEh9DBuLI_-b17mtT-Yqk7Txx1_u7XOgAYqEGAAXD7F-ufSwqlxtxhq-rubvT5W0EJHnodAv0KJoFAlXSFXutTswf8nCJ3xjR5-x6Buu9Bwap4SCPxLPhIIHSGcMIH3pIFElVmletM6h4Tc/s1600/buatD.gif'/>");

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

theText = theText.replace(/:z/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM0mEzeLN3OnJVraZWJ3LDyXVSsoeAgDCgd2gTWVtDCTLf9SuFBVz5x6YARInj-kHFtXz7Hi2EPbzp6aVOGNRinXPi07oDyHM7nLgpRGvn1eFkVygvT4m1YxMpFMLrcj2hJ5Yw8E-LwGA/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

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>

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif&#39;/&gt;  :a

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif&#39;/&gt; :b

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif&#39;/&gt; :c

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif&#39;/&gt; :d

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif&#39;/&gt; :e

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif&#39;/&gt; :f

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif&#39;/&gt; :g

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif&#39;/&gt; :h

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif&#39;/&gt; :i

<br/>

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif&#39;/&gt; :j

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif&#39;/&gt; :k

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif&#39;/&gt; :l

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif&#39;/&gt; :m

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif&#39;/&gt; :n

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif&#39;/&gt; :o

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif&#39;/&gt; :p

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif&#39;/&gt; :q

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif&#39;/&gt; :r

<br/>

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif&#39;/&gt; :s

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif&#39;/&gt; :t

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif&#39;/&gt; :u

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif&#39;/&gt; :v

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif&#39;/&gt; :w

&lt;img src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9DBuLI_-b17mtT-Yqk7Txx1_u7XOgAYqEGAAXD7F-ufSwqlxtxhq-rubvT5W0EJHnodAv0KJoFAlXSFXutTswf8nCJ3xjR5-x6Buu9Bwap4SCPxLPhIIHSGcMIH3pIFElVmletM6h4Tc/s1600/buatD.gif&#39;/&gt; :x

&lt;img src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgilJIlA7mSoYMOFMdDPj9czQJdj_X9lUXnWv1kHqHYAKS7OIgHJPL0gd0NLr96SllR9uKammJ46lfuPNFS7OH1M3uLUAB5OAxLopjoAZEF2IuBGfp8pTg4OZharbb1TAFhc1iCtYcyJwM/s1600/joget.gif&#39;/&gt; :y

&lt;img src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM0mEzeLN3OnJVraZWJ3LDyXVSsoeAgDCgd2gTWVtDCTLf9SuFBVz5x6YARInj-kHFtXz7Hi2EPbzp6aVOGNRinXPi07oDyHM7nLgpRGvn1eFkVygvT4m1YxMpFMLrcj2hJ5Yw8E-LwGA/s1600/xKopi.gif&#39;/&gt; :z

</center>

</div>

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