Cara Pasang Yahoo Emoticon Komentar Blogger

Cara Memasang Yahoo Emoticon/Smiley di Kotak Komentar  - Memasang yahoo emoticon atau smiley di kotak komentar blogger/blogspot sebenarnya bukan sesuatu yang baru. Tapi saya ingin mencoba mengangkat lagi topik cara memasang emoticon ini, yah siapa tahu ada sobat blogger yang ingin memasang emoticon di kotak komentar blognya tapi belum tahu caranya. Kalau mau lihat tampilan emoticon/smiley-nya nanti bakalan seperti apa, contohnya sudah bisa anda lihat langsung diatas kotak komentar blog ini.

Baik sobat, singkat kata singkat cerita inilah cara memasang emoticon/smiley di blogspot :

Langkah 1

• Login ke blogger anda.
• Klik design kemudian edit template.
• Klik centang pada pilihan expand widget templates.
• Tekan tombol CTRL + F pada keyboard anda untuk mengaktifkan modus pencarian.
• Cari kode ]]></b:skin> pada template yang anda gunakan.
• Copy / Paste kode di bawah ini dan letakan di atas kode ]]></b:skin>
• .emoticon { margin: 0px 0px 0px 5px; }

Langkah 2

• Cari kode <data:blogCommentMessage/> atau yang mirip dengan kode tersebut.
• Tambahkan kode di bawah ini dan letakan di atas dan di bawah kode <data:blogCommentMessage/>.
• Kode : <dd class='emoticon'>        </dd>

Contoh :

kode 1 : <dd class='emoticon'>
             <data:blogCommentMessage/>
kode 2 : </dd>

• Cari kode <data:comment.body/> atau yang mirip dengan kode tersebut.
• Tambahkan kode di bawah ini dan letakan di atas dan di bawah kode <data:comment.body/>.
• Kode : <dd class='emoticon'>        </dd>

Contoh :
kode 1 : <dd class='emoticon'>
             <data:comment.body/>
kode 2 : </dd>

• Cari kode <a name='comments'/> atau yang mirip dengan kode tersebut kemudian lihat kode diatas <a name='comments'/> umumnya seperti kode <div class='comments'> atau seperti kode <div class='comments-wrap'>. Tambahkan kode [ id='comments' ] seperti contoh berikut ini.
  Contoh 1 : <div class='comments' id='comments'>
  Contoh 2 : <div class='comments-wrap' id='comments'>
• Ingat hanya tambahkan kode [ id='comments' ] jangan merubah nama class-nya.

Langkah 3

    Copy kode Yahoo emoticon dibawah ini dan letakkan tepat dibawah kode <p class='comment-footer'>  tadi.  Aiternatif kedua Atau bila tidak berfungsi/muncul cari kode ini  <data:blogTeamBlogMessage/> pastekan kode dibawah ini tepat dibawahnya 

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'> <b> <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :)) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;)) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :(( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =(( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/ <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-* <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :| <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-} <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)] <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =)) </b> </div>

Langkah 4

• Cari kode </body>.
• Tambahkan kode di bawah ini dan letakan di atas kode </body>.
• <script src='http://7startmenu.googlecode.com/files/smiley_comment.js' type='text/javascript'/>

5.  Coba sobat lihat dulu tampilan previewnya, lebar (width) kotak emoticon/smiley silahkan diedit agar sesuai dengan lebar kotak komentar pada blog anda.

6.    Jika sudah OK, kemudian save template anda.

Nah sekarang diatas kotak komentar anda sudah berjajar rapi Yahoo emoticon/smiley seperti yang biasa juga ada di shoutbox. Sekian dulu tips blogging cara pasang yahoo emoticon/smiley di kotak komentar ini, dan kalau mau kotak komentarnya lebih terlihat rapi lagi, baca juga cara Memasang Emoticon komentar Blogger 3 In 1 seperti Template ini DISINI