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 

Selengkapnya.....

Cara Menampilkan Artikel Berdasarkan Katagori

Sekarang saya akan mencoba berbagi dengan kawan Cara Membuat dan menampilkan Artikel berdasarkan Katagori / Label Blog,  :r  secara tahap demi tahap, baik itu secara default maupun dengan JavaScript :# 

• Cara default yang disediakan oleh Google :

1. Masuk ke Account Blogger dengan ID kawan 
2. Pada Tata Letak pilih Tambah Gadget
3. Selanjutnya pilih Feed
4. Pada Url kawan Isi Url Blog kawan 

[contoh :  http://blog-renovasi.blogspot.com/feeds/posts/default/] 

Bagaimana mudah bukan ?!

Nah sekarang bagaimana kalau Label / Katagori yang akan kita tampilkan khusus sesuai Nama Label [misalnya : tips trik, tutorial dll] ! :z

Kawan cukup menambahkan Nama Label / Katagori yang ingin ditampilkan, tapi ingat ini sangat sensitif dengan huruf yang dipakai [huruf besar / kecil] harus sesuai dengan Label / Katagori, dan seandainya Label memakai 2 suku kata [tips trik] penulisan untuk spasi [%20] maka tulisannya menjadi tips%20trik 

contoh : http://blog-renovasi.blogspot.com/feeds/posts/default/-/tips%20trik

maka Label yang ditampilkan khusus tips trik saja 

• Dengan JavaScript :

Script ini saya dapatkan pada Blogger Tun-Up caranya 

• Pada tata letak pilih Tambah Gadget
• Pilih tanda + pada HTML / JavaScript
• Copas Script berikut ke dalamnya 

<script src="https://sites.google.com/site/blogrenovasi/java-script/kategori.js"></script>
<script>
var numposts = 5;
var showpostdate = true;
var showpostsummary =false;
var numchars = 125;
</script>
<script src="http://blog-renovasi.blogspot.com/feeds/posts/default/-/tips%20trik?orderby=published&alt=json-in-script&callback=rp">
</script>
<br/><a href="http://blog-renovasi.blogspot.com/search/label/tips%20trik"><strong>Artikel Lain dari Tips Trik...</strong></a>

Hasilnya seperti berikut :

Sedikit Penjelasan Kode-kode tersebut : 

• Silahkan ganti Url Blog saya dengan Url Blog kawan
• true artinya ditampilkan
• false artinya tidak ditampilkan
• var showpostsummary =false; dan var numchars = 125; ini berhubungan, showpostsummary adalah isi artikel seperti Read more sedangkan 125 adalah jumlah karakter huruf bukan suku kata

Selengkapnya.....