Cara Memasang Emoticon List Pada Threaded Comment Blogger

Dipostingan kali ini akan membahas mengenai emotion list pada komentar Blogger, dan bisa ditampilkan secara show hide sehingga tampilan lebih rapih. Di pembahasan ini sistem komentar yang nantinya akan kita pasang menggunakan sistem dengan threaded comment default bawaan Blogger yang lebih simple, jadi bisa menjadi solusi bagi blognya yang belum menggunakan sistem threaded comment hack. 

Nah postingan ini juga kita akan memasang emoticon dengan tampilannya yang bisa show hide dengan menampilkan list dari emoticon tersebut khusus untuk threaded comment default Blogger yang akan kita gunakan nantinya dengan tombol Onclick Event. Caranya pun cukup mudah dimengerti, bagi sobat yang mau mencobanya mari ikuti langkah berikut ini Cara Memasang Emoticon List Pada Threaded Comment Blogger.

Langkah Pertama

Silahkan sobat salin kode dibawah ini lalu letakkan diatas kode </body>. Kode ini berguna untuk menampilkan emoticon atau smiley pada threaded comment blogger.

<script type='text/javascript'>
//<![CDATA[
a=document.getElementById('comments');if(a){b=a.getElementsByTagName("p");for(i=0;i<b.length;i++){if(b.item(i).getAttribute('CLASS')=='comment-content'){
_str=b.item(i).innerHTML.replace(/:\)\)/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' alt='' class='smiley'/>");
_str=_str.replace(/:\)\]/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' alt='' class='smiley'/>");
_str=_str.replace(/;\)\)/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' alt='' class='smiley'/>");
_str=_str.replace(/;\;\)/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' alt='' class='smiley'/>");
_str=_str.replace(/:d/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt='' class='smiley'/>");
_str=_str.replace(/\;\)/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' alt='' class='smiley'/>");
_str=_str.replace(/:p/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' alt='' class='smiley'/>");
_str=_str.replace(/:\(\(/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' alt='' class='smiley'/>");
_str=_str.replace(/:\)/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' alt='' class='smiley'/>");
_str=_str.replace(/:\(/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' alt='' class='smiley'/>");
_str=_str.replace(/:x/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' alt='' class='smiley'/>");
_str=_str.replace(/=\(\(/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' alt='' class='smiley'/>");
_str=_str.replace(/:\-\o/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' alt='' class='smiley'/>");
_str=_str.replace(/:-\//gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' alt='' class='smiley'/>");
_str=_str.replace(/:-\*/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' alt='' class='smiley'/>");
_str=_str.replace(/:\|/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' alt='' class='smiley'/>");
_str=_str.replace(/8-\}/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' alt='' class='smiley'/>");
_str=_str.replace(/~x\(/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' alt='' class='smiley'/>");
_str=_str.replace(/:-t/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' alt='' class='smiley'/>");
_str=_str.replace(/b-\(/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' alt='' class='smiley'/>");
_str=_str.replace(/:-\L/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' alt='' class='smiley'/>");
_str=_str.replace(/x\(/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' alt='' class='smiley'/>");
_str=_str.replace(/:-\q/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif' alt='' class='smiley'/>");
_str=_str.replace(/\=\)\)/ig,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' alt='' class='smiley'/>")
b.item(i).innerHTML=_str;}}}
//]]>
</script>

Langkah Ke Dua
Silahkan sobat cari kode seperti ini

<b:includable id='threaded-comment-form' var='post'>

Setelah itu agak geser kebawah sedikit lalu cari kode berikut

<p><data:blogCommentMessage/></p>

Setelah ketemu silahkan sobat salin kode dibawah ini lalu letakkan tepat dibawah kode diatas tadi (yang ke dua).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="Button">
<input type="button" onclick="document.getElementById('emoticons').style.display='block';Button.style.display='none';Button2.style.display='block';" value="Show Emoticon" />
</div>
<div id="Button2" style="display: none;">
<input type="button" onclick="document.getElementById('emoticons').style.display='none';Button.style.display='block';Button2.style.display='none';" value="Hide Emoticon" />
</div>
<div id='emoticons' style='display: none;margin:10px 0'>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/><span class='codesmiley'>:))</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/><span class='codesmiley'>:)]</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/><span class='codesmiley'>;))</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/><span class='codesmiley'>;;)</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/><span class='codesmiley'>:d</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/><span class='codesmiley'>;)</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/><span class='codesmiley'>:p</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/><span class='codesmiley'>:((</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/><span class='codesmiley'>:)</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/><span class='codesmiley'>:(</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/><span class='codesmiley'>:x</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/><span class='codesmiley'>=((</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/><span class='codesmiley'>:-o</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/><span class='codesmiley'>:-/</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/><span class='codesmiley'>:-*</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/><span class='codesmiley'>:|</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/><span class='codesmiley'>8-}</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/><span class='codesmiley'>~x(</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/><span class='codesmiley'>:-t</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/><span class='codesmiley'>b-(</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/><span class='codesmiley'>:-L</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/><span class='codesmiley'>x(</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/><span class='codesmiley'>w-)</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/><span class='codesmiley'>:-q</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/><span class='codesmiley'>=))</span></span>
</div></b:if>

Langkah Ke Tiga
Silahkan sobat salin kode CSS ini lalu letakkan diatas kode ]]></b:skin> atau </style>

#emoticons .iconsmiley{float:left;text-align:center;height:40px;width:41px;margin:0 0 10px;}
#emoticons .codesmiley{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#444}

Dan sampai disini selesai silahkan sobat SAVE templatednya dan silahkan coba lihat hasilnya, mengingat kode dan karakter template berbeda jika timbul permasalahan saat sobat mau mereply komentar terjadi masalah di tombol show hide smiley list tidak otomatis naik keatas untuk mengatasinya sobat lakukan solusinya seperti dibawah ini.

Silahkan sobat cari kode seperti ini 

<b:includable id='threaded-comment-form' var='post'>

Kemudian sobat geser sedikit kebawah nanti akan ketemu kode dibawah ini

<b:if cond='data:mobile'>

Setelah ketemu silahkan sobat tambahkan kode <div id='form-wrapper'> tepat diatasnya.

Masih lanjut, silahkan sobat cari kode penutupnya </b:if> kode tersebut biasanya berada diatas kode <data:post.friendConnectJS/>, setelah ketemu silahkan tambahkan kode penutup </div> letakkan tepat dibawah kode </b:if> yang tadi.

Kemudian sobat cari kembali kode dibawah ini, biasanya berada di id='threaded_comment_js'

document.getElementById(domId).insertBefore(replybox, null);

Jika sudah ketemu silahkan sobat ganti kode tersebut dengan kode ini.

document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);

Dan selesai silahkan di SAVE, selamat mencoba.