Berikut ini akan saya tampilkan beberapa cara, dan termasuk updatenya pula pada bagian paling bawah. Tinggal pilih sendiri mana yang paling cocok, kadang tergantung selera dan template pula. Namun saran saya, coba cara update yang paling bawah terlebih dahulu, itu cara yang paling mudah.
Memasang emotion ayo dance.
- Masuk ke dashboard, ke design kemudian edit HTML
- Save terlebih dahulu supaya menghindari terjadinya kesalahan dan kekeliruan, dengan download full template
- Pilih Expand Widget Templates.
- Kemudian setelah itu, dengan menenkan CTRL F carik kode </body>
- Setelah menemukan kode di atas, pasang kode di bawah ini, tepat di atas kode </body>
<!-- Ayo dance by alprablog.blogspot.com -->
<script src='http://www.geocities.ws/alprablog/user/js/audiemo.js' type='text/javascript'/> - Sebenarnya kodenya sudah tertanam (maksudnya dengan hanya menuliskan kode saja, emotion sudah akan tampil di komentar). tapi pertanyaanya pengunjung kan tidak tau kodenya? makanya kita tampilkan emotion diatas kotak komentar supaya kodenya bisa dilihat oleh pengujung. caranya, cari kode berikut terlebih dahulu.
Masukan kode di bawah ini, tepat di bawah kode di atas.<p class='comment-footer'>
<p><img alt='' src='http://img.alpra.co.cc/file/n4305995/01hepi.png' title=';hepi'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/02smile.png' title=';:)'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/03win.png' title=';win'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/04hik.png' title=';hik'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/05grr.png' title=';grr'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/06luph.png' title=';luph'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/07down.png' title=';down'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/08tear.png' title=';tear'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/10mo.png' title=';mo'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/11dan2.png' title=';dan2'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/12bete.png' title=';bete'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/13kdip.png' title=';kdip'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/14swet.png' title=';swet'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/15etc.png' title=';etc'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/16calm.png' title=';calm'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/17hai.png' title=';hai'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/18hoeh.png' title=';hoeh'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/19tida.png' title=';tida'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/20shy.png' title=';shy'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/21weh.png' title=';we'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/22zzz.png' title=';zzz'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/23cuih.png' title=';cuih'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/24shok.png' title=';shok'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/25omg.png' title=';omg'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/26phew.png' title=';phew'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/27hwa.png' title=';hwa'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/28mbok.png' title=';mbok'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/29uhuk.png' title=';uhuk'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/30mad.png' title=';mad'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/31groa.png' title=';groa'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/32joke.png' title=';joke'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/33hp.png' title=';hp'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/34hati.png' title=';hati'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/35hset.png' title=';hset'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/36flwr.png' title=';flwr'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/37pc.png' title=';pc'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/38pupi.png' title=';pupi'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/39kado.png' title=';kado'/>
<img alt='' src='http://img.alpra.co.cc/file/n4305995/40cam.png' title=';cam'/> </p> - Perhatian, dalam mencari kode di langkah no 6, kadang anda menemukan 3 atau 4 kode yang sama. maka taruh di tempat yang terakhir.
- Save template
Memasang emotion yahoo messenger
- Langkahnya sama dengan ayo dance, hanya beda di langkah no 5 dan 6.
- Langakh 5 perlu di tambahkan (diganti) dengan kode berikut.
<!-- Yahoo messenger by alprablog.blogspot.com -->
<script src='http://www.geocities.ws/alprablog/user/js/yemo.js' type='text/javascript'/> - Langakah no 6 perlu di tambahkan (diganti) kode berikut.
<div style='text-align:center;'>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' title=':))'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' title=':)]'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' title=':>'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' title=';;)'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' title=':D'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' title=';)'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' title=':P'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' title=':(('/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' title=':)'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' title=':('/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' title=':Love'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' title='=(('/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' title=':-o'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' title=':-/'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' title=':-*'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' title=':|'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' title='8-}'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' title='~x('/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' title=':-t'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' title='b-('/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' title=':-L'/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' title='x('/>
<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' title='=))'/>
</div> - Terakhir simpan (save template) dah.
Troubleshooting.
- Tanda yang berwarna merah, hanya sebagai pembatas, tidak akan terbaca didalam kode, lagi pula sebagai penghargaan terhadap penulis scripnya, jadinya saya cantumkan.
- Tanda warna biru, hanya pembatas ato perata tulisan. agar rata tengah center atau di taruh pada alenia berikutnya <p>
- Anda bisa menggabungkan kedua emotion tersebut, caranya tinggal di satukan satu tempat saja kedua kodenya.
- Untuk emotion ayo dance, bisa untuk template standar maupun template hasil download-an (bukan standar blog)
- Untuk emotion yahoo messegar di atas, hanya bisa digunakan pada template download, untuk yang standar saya coba tidak bisa. jadi harus di ganti scrip nya untuk langkah no 5 dan 6.
- Kode di atas mengunakan 'title', maksudnya kode tidak ditaruh di samping emotion seperti gambar berikut ini. dan hal ini akan membuat gambar lebih ringkes, untuk mengetahui kodenya cukup mengarahkan mouse ke gambar, nanti keluar kodenya.
- Untuk mengganti 'title' menjadi kode yang tampak, kodenya di ganti dari.
Hilangkan title nya, kemudian taruh kodenya di luar. menjadi<img border='0' class='' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' title=':))'/>
<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:)) - Ada kalanya kodenya tidak tampil di atas komentar, kadang suka tampil justru di bawah komentar. caranya, cari kode div id='comment-holder' dan masukan kode no 6 (dari memasang emotioan) diatasnya. Tampilnya tidak tepat di atas komentar, namun cukup jelas untuk bagi pembaca karena letaknya di atas. mungkin kejadian ini akan amat jarang, biasanya pada template blog bawaan alias standar.
- Harus di coba sendiri ya gan, untuk membuktikan hasilnya.
UPDATE 2 Juli 2012
Memasang emotion diatas Komentar blog ternyata dapat dengan mudah dengan scrip di bawah ini, kode ini saya dapatkan dari sahabat saya di system of blog. Scripnya cukup sederhana dan tidak ribet, hanay memasang scrip di bawah ini di atas kode </body>. Tentunya anda harus masuk ke edit HTML terlebih dahulu, yaitu dengan:1. Masuk di dasbor blogger
2. Klik Template / Rancangan
3. Klik Edit html
4. Klik Prooced / Lajutkan ( jika editor baru )
5. Cari kode </body>
6. Simpan kode di bawah ini di atas kode </body>
Keuntungan lainya dari scrip di atas adalah anda bisa menambahkan file youtube dan gambar ke dalam kotak komentar dengan mengunakan bahasa BB kode. Misalnya, untuk youtube [youtube]URL Video[/youtube] dan untuk gambar [img]URL Gambar[/img].<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comment-holder");
theText = bodyText.innerHTML;
theText = theText.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
theText = theText.replace(/\[nct\].*?'.*?\[\/nct\]/gi, "");
theText = theText.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin:10px 0;max-width:590px;background:#;padding:4px' src='");
theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?L=/gi, "<div style='overflow:hidden'><embed style='margin-top:-250px;width:300px;height:400px' src='http://www.nhaccuatui.com/l/");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?M=/gi, "<div style='overflow:hidden'><embed style='margin-top:-350px;width:300px;height:400px' src='http://www.nhaccuatui.com/m/");
theText = theText.replace(/\[\/nct\]/gi, "' quality='high' wmode='transparent' type='application/x-shockwave-flash'></embed></div>");
theText = theText.replace(/:\)\)/gi, "<img src='http://static.kaskus.co.id/images/smilies/ngakaks.gif'/>");
theText = theText.replace(/=d>/gi, "<img src='http://static.kaskus.co.id/images/smilies/s_sm_cendol.gif'/>");
theText = theText.replace(/:d/gi, "<img src='http://static.kaskus.co.id/images/smilies/s_sm_peace.gif'/>");
theText = theText.replace(/:p/gi, "<img src='http://static.kaskus.co.id/images/smilies/sumbangan/13.gif'/>");
theText = theText.replace(/:\(\(/gi, "<img src='http://static.kaskus.co.id/images/smilies/sumbangan/06.gif'/>");
theText = theText.replace(/:\)/gi, "<img src='http://static.kaskus.co.id/images/smilies/sumbangan/020.gif'/>");
theText = theText.replace(/:\(/gi, "<img src='http://static.kaskus.co.id/images/smilies/sumbangan/004.gif'/>");
theText = theText.replace(/:-\?/gi, "<img src='http://static.kaskus.co.id/images/smilies/bingungs.gif'/>");
theText = theText.replace(/\[\-\(/gi, "<img src='http://static.kaskus.co.id/images/smilies/sumbangan/12.gif'/>");
theText = theText.replace(/:-o/gi, "<img src='http://static.kaskus.co.id/images/smilies/sumbangan/amazed.gif'/>");
theText = theText.replace(/:-t/gi, "<img src='http://static.kaskus.co.id/images/smilies/sumbangan/42.gif'/>");
theText = theText.replace(/:-ss/gi, "<img src='http://static.kaskus.co.id/images/smilies/takuts.gif'/>");
theText = theText.replace(/b-\(/gi, "<img src='http://static.kaskus.co.id/images/smilies/sumbangan/5.gif'/>");
theText = theText.replace(/@-\)/gi, "<img src='http://static.kaskus.co.id/images/smilies/sumbangan/crazy.gif'/>");
theText = theText.replace(/=\)\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>");
theText = theText.replace(/x\(/gi, "<img src='http://static.kaskus.co.id/images/smilies/mads.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>
Sedangkan untuk emotion yang bisa di gunakan seperti di bawah ini, kelemahanya adalah (notifikation seperti di bawah ini) tidak bisa di tampilkan di atas komentar, sehingga harus di hapal. Namun biasanya user sudah hapal karena mengunakan kode emotion yahoo yang sudah familiar.
Keungulan lainya, kamu bisa mengganti emotion di atas dengan emotion yang kamumau. Misalnya emotion kaskus atau emotion Ceriwis. Caranya hanyatinggal menganti kode gambarnya, misalnya:
Kode yang berwarna merah merupakan kode gambar, jadi kamu bisa ganti sendiri dengan yang kamu mau.theText = theText.replace(/x\(/gi, "<img src='http://static.kaskus.co.id/images/smilies/mads.gif'/>");
