Dipostingan kali ini akan membahas mengenai emotion list pada komentar Blogger, dan mampu 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 mampu menjadi solusi bagi blognya yang belum menggunakan sistem threaded comment hack.
Nah postingan ini juga kita akan memasang emoticon dengan tampilannya yang mampu 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 teman yang mau mencobanya mari ikuti langkah berikut ini Cara Memasang Emoticon List Pada Threaded Comment Blogger.
Langkah Pertama
Silahkan teman salin arahan dibawah ini lalu letakkan diatas arahan </body>. Kode ini berkhasiat untuk menampilkan emoticon atau smiley pada threaded comment blogger.
Langkah Ke Dua
Silahkan teman cari arahan ibarat ini
Setelah itu agak geser kebawah sedikit lalu cari arahan berikut
Setelah ketemu silahkan teman salin arahan dibawah ini lalu letakkan sempurna dibawah arahan diatas tadi (yang ke dua).
Langkah Ke Tiga
Silahkan teman salin kode CSS ini lalu letakkan diatas kode ]]></b:skin> atau </style>
Dan hingga disini tamat silahkan teman SAVE templatednya dan silahkan coba lihat hasilnya, mengingat arahan dan abjad template berbeda kalau timbul permasalahan ketika teman mau mereply komentar terjadi duduk perkara di tombol show hide smiley list tidak otomatis naik keatas untuk mengatasinya teman lakukan solusinya ibarat dibawah ini.
Silahkan teman cari arahan ibarat ini
Kemudian teman geser sedikit kebawah nanti akan ketemu arahan dibawah ini
Setelah ketemu silahkan teman tambahkan arahan <div id='form-wrapper'> sempurna diatasnya.
Masih lanjut, silahkan teman cari arahan penutupnya </b:if> arahan tersebut biasanya berada diatas arahan <data:post.friendConnectJS/>, setelah ketemu silahkan tambahkan arahan penutup </div> letakkan sempurna dibawah arahan </b:if> yang tadi.
Kemudian teman cari kembali arahan dibawah ini, biasanya berada di id='threaded_comment_js'
Jika sudah ketemu silahkan teman ganti arahan tersebut dengan arahan ini.
Dan tamat silahkan di SAVE, selamat mencoba.
<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 teman cari arahan ibarat ini
<b:includable id='threaded-comment-form' var='post'>Setelah itu agak geser kebawah sedikit lalu cari arahan berikut
<p><data:blogCommentMessage/></p>Setelah ketemu silahkan teman salin arahan dibawah ini lalu letakkan sempurna dibawah arahan diatas tadi (yang ke dua).
<b:if cond='data:blog.pageType == "item"'> <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 teman 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 hingga disini tamat silahkan teman SAVE templatednya dan silahkan coba lihat hasilnya, mengingat arahan dan abjad template berbeda kalau timbul permasalahan ketika teman mau mereply komentar terjadi duduk perkara di tombol show hide smiley list tidak otomatis naik keatas untuk mengatasinya teman lakukan solusinya ibarat dibawah ini.
Silahkan teman cari arahan ibarat ini
<b:includable id='threaded-comment-form' var='post'>Kemudian teman geser sedikit kebawah nanti akan ketemu arahan dibawah ini
<b:if cond='data:mobile'>Setelah ketemu silahkan teman tambahkan arahan <div id='form-wrapper'> sempurna diatasnya.
Masih lanjut, silahkan teman cari arahan penutupnya </b:if> arahan tersebut biasanya berada diatas arahan <data:post.friendConnectJS/>, setelah ketemu silahkan tambahkan arahan penutup </div> letakkan sempurna dibawah arahan </b:if> yang tadi.
Kemudian teman cari kembali arahan dibawah ini, biasanya berada di id='threaded_comment_js'
document.getElementById(domId).insertBefore(replybox, null);Jika sudah ketemu silahkan teman ganti arahan tersebut dengan arahan ini.
document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);Dan tamat silahkan di SAVE, selamat mencoba.
Comments