Menambah emoticon di comment

Kadang buat lucu-lucuan, menambah ekspresi wajah pada comment membuat seru komentar yang dibuat. Kayak di kaskus gitu loh... Setelah surfing di berbagai blog, hati saya jatuh pada blog ini. Ternyata walau diikuti petunjuknya ternyata tidak langsung berhasil. Alhasil, buat newbie blogger kayak saya bisa mengerti kesalahannya dimana. Jadi saya sempurnahkan langkahnya sesuai yang saya alami ya. Smoga bermanfaat. Berikut langkah-langkahnya. 1. Buka dashboard blogger  - Template - Edit HTML - Proceed

2. Pilih Expand Widget Template (pastikan sebelum mengutak-atik, template lama di BACKUP dulu ya...)

3. Gunakan CTRL+F dan temukan </body>  silahkan copy-paste sintak dibawah ini:
Untuk previous commenting system (comment tanpa pilihan reply) <!--kolobok-smileys--> <script src='http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js' type='text/javascript'/><noscript><a href='http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html' target='_blank'><span style='font-size: x-small;'>Add emoticons</span></a></noscript> <!--kolobok-smileys-->
Untuk threaded commenting system (comment dengan pilihan reply) <script src='https://helplogger.googlecode.com/svn/trunk/kolobok threaded.js' type='text/javascript'/> Catatan : Lewati langkah 4-5 bila menggunakan "threaded commenting system".
4. kemudian temukan kode snippet ini <b:loop values='data:post.comments' var='comment'>, lalu copy-paste kode dibawah ini: <div id='smileys'>
5. Setelah itu scroll down pelan-pelan kode nya, sampai ditemukan kode </b:loop>. Kode ini adalah penutup sintak dari kode di langkah 4 tadi. Lalu copy-paste setelahnya dengan kode </div>

6. Kemudian temukan kode dibawah ini :
» Untuk previous commenting system:
temukan kode <data:blogteamblogmessage> Catatan : Kadang ditemukan lebih dari satu. Nah saya mencari kode <b:includable id='comment-form' var='post'> terletak di atas kode "blogtemblgomessage" itu. Karena ada juga id untuk thread.
» untuk threaded commenting system: temukan kode <div class="post-footer-line post-footer-line-3">
7. Tambahkan kode ini setelahnya : <b:if cond="data:blog.pageType == "item""><script type="text/javascript"> //<![CDATA[ function moreSmilies() { document.getElementById('smiley-more').style.display = 'inline'; document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;"> Hide Emoticons /<a href="http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html">Add Emoticons</div> </a></span>'; } function lessSmilies() { document.getElementById('smiley-more').style.display = 'none'; document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold;"> Show Emoticons</div> </a>'; } //]]> </script> </b:if> <div class="emoticons"> <span id="smiley-more" style="display: none;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeyNYjDWHEZdFXs_HucIvIYqosAfIagYxqRXxG3u_QG0XBeLdsxyU3x3xzGHXgpLYu2pt-1Gm009db31hq3tqQnriTexzZgk06mI-5BOyMjsUd2l65VEydh0GUw9tc7nvmULBWLauNhUk/s1600/smile3.gif" />:) <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWZXyozTwTRXd4frzloasHLCEWylKmpABnzfGXZJycquwqAKUGr7iH2e8_9XNF49Uz5uE6ttlaQNp9c4wjG-GmPtBy_opcLNRZs5IXL80A7fePMxatAkhRetIGFAej-6n93rWhcW7I6MI/s1600/sad.gif" />:( <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj49jBh3G-atPKL5PZjx1TRogLOzYtWfAttkr1U0mLFcjTODBqiq_kyqX4wv0_DLQwLpd5SAOnwa8gbh1wvH2oVOBDIVe2HoksTZgdFg7MoBbTIvM4fUtoYk_uH6CCUQaQE15G3ScaOOYw/s1600/taunt.gif" />:)) <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP1qBkjcWOAZkIvAYZDgVRH49bJalii3KhVO8xSgI-NPr3ehLXe26X-k5bjajRpkcPMj4eT6WBH667VvKMN-9g9PQX50L0rVClWd5LKHwPj4vc6Il-_P12Fmbk6PkDoFsGpe3Fuj2nxZU/s1600/cry2.gif" />:(( <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYgIWorF9wQggvxAdBLo7MpRBlhsJyabHYWbi8LabD8SFyyfpW6jAv3Bi4ef2RucR9s_cYfQwlBgkxvVG6lojBlbQ0g-dw83bXoy6kWK81RNAszQD5yDtfAWe71j7R2o83tOBXlj9Kgto/s1600/rofl.gif" />=)) <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnC7N2lslw8IdedSPA_KXMYJbSPecxMUuWdZkBxS9PTR7hbk3Sf9YGthew0idj5meTmWHIqvR0NL50sBmfaZzCMoYcuNnhTuAGErWewoKPpKXjZqif_etLfo38oWD0FMAjwwDVqZsP39A/s1600/suicide.gif" />=D> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIwCBVptlFpJClI9zBWTXDATpWOP8n2D3mqsnoU3LpyIWbISAJI9XQp0fgxvaPHMAG8dPQ_3dDmhRZefATv_FN95XEclJsB9NbJUvtBdRz7TkmNtGz9r9diEkD6D-meMeTfOHaEWwT_HQ/s1600/biggrin.gif" />:D <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9iPDje9in3Ceo86Vgoy5WAhHLHVRUL1dpxQOCEu6i7V75mzhRfUwufxQkBI1Oi8ZsigDAKPVdwayf8OUkZ4H25dVbknVYWxjfG7oeXJXGSmruxGR_bKSYdaGGhC-sUM59vYEPnqPgOr4/s1600/tongue.gif" />:P <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnYyQtch08K8F39o7jMEPmTNCvrxHBO2XCnJ0Jns05HWmhUQx3beqelTE1bluhFaTvfE-BNjU4vJe5EQsBVx_W-WePGYZxVys9x1WlCICGgXMLq_MYuclZYCEWGSUSgpLSqMuyoTC1Qas/s1600/shock.gif" />:-O <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnwRUb92F0znDqqHz0mcTZ7wgmE8IJ2bCJO70IFJUyCErcbO4o1lDk2FCZM7O_SppSSz1MD0mUzkvmn2WBsSJ28blrgCFAttCR0PXxfOiRKRjPRpHpRt43rswMGDEcbncjKpcvbpeCxZY/s1600/think.gif" />:-? <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqEsYfEH6KO8YsKLaHLpQpCjJqYwwse5Effte9Y9TwR_sLFjOhnh2WxLy0yojNMGh1S72RjeaWi5V1aCTPUEKIZFCUFFcYwaboTNbST6QOGufeirjANWyMKKe9oBXwvTGVdnVN5IEwMD0/s1600/unsure.gif" />:-SS <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_bXcV2_-EKJX8adlR3Tj4yDoqimMScuqWff9Gzx8t-5DeFChUV2JIoHP44kn8mGKUtmmb2pHcVsCgWCfFN5F3_Q7JMHlwi0M-lJVDUfMgnu7cNqnFDViVEFq_HkrqiOuBM26MppMOXKE/s1600/flowers1.gif" />:-f <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4EQPjfPgmsL96oH9mT72LUE2Pb0eSG5fxRa3W1N7IVaXXrM0kz6elEd5EK7br9_d4JgQLFf1WELaIrN8bsZyxeDea6_WbS-MwV938EpYK3TEDIwkMqrK8VRqXP3r_VmPZ2gPsDvF_JEg/s1600/doh.gif" />d( <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIH3zQI7IwydgHOPA_c_kggxn1DdJrAMJ1SlQda1CCVmcobZzSXEhxRzgJgA_3DtsMAU9q954W5OqZz5zp-Q6liA4YH-mpOVwxkQiApjZQAJt6fbMhS-fPA5asa_r4FRwtfOVRMCaNi4Y/s1600/air_kiss.gif" />:-* <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5tm06I5fNNCBUR585UJk_yxahTmyNCD8mrL3Q2oqYr1yHSFN8VZ8_R-LSOjReCy_aGnCJyXU3jfNlMcyZD706E5Ybw2SMF8wAae1L21XUGPbhqRjg9A8VritEHFrtQFhlz8hBJAe1OpM/s1600/threaten.gif" />b-( <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisVVuAmep6YCt_gWDtm6H_Kwf1H00pPDoOFU6FlXNXzxVgtrURs7H7dB46mA52mjYkde0FiMXNiroFgfCZYnvAXb3GtRRm2oJJk3g_qmvpGkG6Mlypk-p1qzDyQ8oGAUdhjGOmnkjt9sY/s1600/help.gif" />h-( <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmgnvl1p706clBiwZ7aophyKRZUyA0QUvl00vSqsjsbci-hwplS6GroICBWU_OwiR2TD-Akvxc4Ea4YpnH4ds9zhWvOtB9O_RSyTuJL2p9flbIU5viJolD7Wf_9IjqHu6N9ttnLJw52C8/s1600/good.gif" />g-) <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvMo3l8H4aNuiRz9ke5QrCTkE8OnMerKFMfBPSHB4mfU8_DPRT1txiZ3SFurYpQ4zXVQiTK76lvE_o3a5SggF77Pv7_WG3ompQ4u7jrdwq7-Kd5uEaPMfUuKPVEA_Qi17OXDZ8sSphuQk/s1600/beee.gif" />5-p <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMEDyQc1ThIpn2dCEm2sxpmWfDcPj95nRvhU6lWWuwXuQTynNdgKEb4PXzFOITrX12Qge8Q0DQ-AZULQT3RQV1iw0apz1bQUptxvvq2tpQjJ9aNrbLvdbc7VHX0MIm3D_41PMIQPTtpbM/s1600/yahoo.gif" />y-) <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ztYC6wvhpkLbZW370o_Z2nyoxMOaVnSL0H_1uudqKYD92mgaNTZqCrDatA27Rcf7KLzzZmHj1xHfIKiqaaY_K1SrBORlyfZfwi4KR5RJKNDRLh0wciMqBOAp6Sb2UBRajCGSelFpYAU/s1600/crazy.gif" />c-) <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzd1OI-qsRYXK56jfh_ubfrucx65O8PYYjPrrEVmULjx7PFbMsyZXyhdekdYsgflKgnJn6WXY0H-RO4MTybSANbrlY66HI3grlGzSo7xAiGHh5Z3e44YLNRQP51qbl3kC8zBidkyqqRJM/s1600/spiteful.gif" />s-) <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4NcsyqrO5qpdiPH_5bYoPO7CHIPe3J4F5AM1U7FtBsWh3UAVBXbZFh4OgwI1Pkm-O-GDYOsxEDKoD2YRUN-3V40R9NvbnqOd0jfiPHGLJpq4kcvYXOXyjkRsZvlmZY_mCHbe3xbubUXQ/s1600/drinks.gif" />d-) <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLL6VhLcSk5CU0HIXHSpBJz3xREFkIxe6JMApsFPUZ53YzAQUmHPiwm85RQ_lVFGtekzCi4PxItjIrnYkLs5jQTi3HGNl-0__2o6SwqJaihHESXbF1-dJGodPSu7iwMEPpXhRJAyvJzmc/s1600/cheer.gif" />w-) <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGJkhrLrxRnAq7omAJ3kKw2rc9Vi7PQCtc_ryWEGkKnvegmwJyQI_WLu2DRL0WAbCetHR6yonUqJ70o1yN11NsiLAxCvxDybM78Ju5fRMKiJ2bquBfXi-8T3_kMUHOnAfqGQ0IK5fYN-k/s1600/hi+2.gif" />:-h <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHlMWCsnBZx-e4DKYj1ai87tU7lh3PS3hYAQD6KbZdyWJGjC4BRfB2p9iDrh302QySp2gXwPJSFszPOVMyIxeWQZX2FgbXmkVGwCuuf8kaF2r_vzqXglo5ivSb48B-y0LmUCegIMSjAP4/s1600/give_heart.gif" />:X </span> <span id="smiley-toggle"><a href="javascript:moreSmilies()"></a></span> <div style="font-size: small; font-weight: bold;"> <span id="smiley-toggle"><a href="javascript:moreSmilies()">Show Emoticons <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeyNYjDWHEZdFXs_HucIvIYqosAfIagYxqRXxG3u_QG0XBeLdsxyU3x3xzGHXgpLYu2pt-1Gm009db31hq3tqQnriTexzZgk06mI-5BOyMjsUd2l65VEydh0GUw9tc7nvmULBWLauNhUk/s1600/smile3.gif" /></a></span></div> </div> </b:if> Catatan: Abaikan langkah 8 jika menggunakan threaded comments!
8. Akhirnya, sudah mau kelar nih nge-coding-nya : Temukan sintak ini ]]></b:skin> dan copy-paste dibawahnya sintak berikut : .emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;width:400px;} .emoticons a, .emoticons a:hover {margin-left: 20px;text-decoration:none;} Catatan: Jika ingin mengubah ukuran wadah emotikon, edit kode yang bernomor 400.
9. Save the Template dan selesai sudah. Selamat mencoba.