Cara Pasang Emoticon Pada Komentar Blogger

Kamis, 20 Februari 2014

Cara Pasang Emoticon Pada Komentar Blogger - Pasti sobat sudah pernah melihat sebuah Blog yang menggunakan fitru Emoticon pada komentarnya, dangan menggunakan Emoticon pada komentar Blog, maka komentator akan lebih mudah mengekspresikan perasaannya.

Tutorial ini saya dapatkan dari salah satu Blog inspirasi saya yaitu Blog Kang Ismet, karena saya belum sanggup membuat yang seperti ini sendiri, dan saya juga masih awam tentang dunia Blogger. Untuk cara memasang emotikon pada komentar Blogger, silahkan ikuti langkah - langkahnya dibawah ini.

Cara Memasang Emoticon / Emotikon Pada Komentar Blogger

1. Simpan kode CSS dibawah ini tepat diatas ]]></b:skin>

img.comment_emo {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}

2. Simpan kode ini tepat diatas </body>

<script type="text/javascript">
//<![CDATA[
/* Blogger Comments Emoticon
 * by Kang Ismet
 * Url:http://blog.kangismet.net
 */
ki = document.getElementById('comment-holder');
if (ki) {
    zx = ki.getElementsByTagName("p");
    for (i = 0; i < zx.length; i++) {
        if (zx.item(i).getAttribute('CLASS') == 'comment-content') {
            ki_emo = zx.item(i).innerHTML.replace(/:\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCCY153jAeZizh3jajz8cB1pBvJeYLRGDcmE8iaAES_EmMSe_XvFoUpJ2DHqPNc3Zs48zNaLwEzX35TqNLrIkP-dskQcCcbjcN9brMwusKEFtTInP4jxxNvkOpW0H4wtvvfYlTbwIBFg/s1600/smile1.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\^_\^/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ZtCWpHLKnbdhSeiz7pAElLbQWRP4bUE0GA_OZ1rdvwsudQkEnqzRq-78mkMsDlLmD3DPe8dx8be7DoOs49L6jQJk9Riqfz08taqQMwp6LPyb9mJeDAM_866HHQ0Djqen5RUndS4iNg/s1600/smile.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-bd/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi60Tqu7PiPgzfj1Y7rxFLCi6n4kS8hcfgM1xueJnxDVu6vJIDu3pjqGc5te9AB8NEJTeRxSEQC52uI7BFJEGtAE7fOTWRs9bK5y2ESsqOUDxCg9SKNNkbib9Ypz6k9OY8Q2vowzYAPbQ/s1600/thumb.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLUzeu_X8uyxJiXLJw0RxrDKH0OrzIoqmSsMjXPz2-Hn2P6_mCgYG9c9npO6ZfZqL_XYkX5WVnZnqB7VjSV7WZe_paX7OWG0MzC9EJvdvASVmfpeMtxoc-vs4pMhukTgl73227tP-cWQ/s1600/thumbsup.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/@\@\,/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoeCeeCTELl6viq_Wbb1Qf9VMwOZZEsRgmBXytXr_Dp3i-xxM0MgkwqMPofuZYXfwO3DObPvsAEqYs8fHncH2fPbTWJyLQwn6ecjsamJb5z7apy0ycgDDt9a-Nv_lX1_wHWgd-_syrUQ/s1600/rolleyes.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\\o\//gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1FqKApCH70jjWthZ4Sh0grs0ouHGe4Jnfwv0YE3Qxuu2MYQ2-eRSFW_wkWKDHaLj5IBVr927_Pke_pvNJWsSjoEyvR5v8F0mdHbEurY54ROajlW2bJ5z3pGLI_pUVtbbwoD6aXDE_CQ/s1600/applause.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2B0z7ypX00q3VKgj_sTo2RmNK6J5E0vil8lDWoQ9YRU7oeTNgy8A7DOQZwOKulX6jr4V3TEtPciYTqoUx2jxAl8LTSu4aBwWRNxZCF7SwuutXDYxpXnKnFWkAYW6J3bTCpmC8rgj_nA/s1600/sadanimated.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUU233CXPkfW0TzfNfVW3RMGM8_De1xsvBZ45QeHBGLv3mDOs0XUd6M0dPGBNXPWBgQwlBcWMxUNnMKwhdSHm6T9WLLPIypXkE5hZYls5sR4jET69Eay8_DUiEiFbsLNEMbF9E4O_84g/s1600/sad.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\;\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNuH5WeOiXUZ1pvwple70QJKRzD_3YW_-dHfe5jKj22eDV8StLR5eBNImpb9gD-9qlCkpF7oPlZGlxLYbIddYZaLA_rcJ0K9FofXclx9jcqAOvSuPXJEUWfWHfAVxHdNYPrnIZyB2gsg/s1600/wink.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5SuqvevwBtLubqSz8Dv-yAP46rRfYaz_3LEa3H2p1glKqHiwmg6uNdmR1RAeirpGe8JW_uF8rEXucf6ZGvXU-gZX0N8zF9f59lxVqP1xXmzBfdiQK2-42OGt05Ara7BSETwFBfZCfkg/s1600/icon_smile.gif='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ86Fk7YDYSeI6atkax4NiWvFzyadPA4dEY_YIBI-vOQX-ELvbShSjlgqvMRkPcKcND-koWKnvnFBfWTpdkMyUACBfkSXXOzyywENr2IdyezurNTMeS1LspArf6DtL2Q5W9TbIAY6Siw/s1600/hihi.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\P/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiio4ThyaAr1YfoMoR707kSDMdDL89IKRhryug6DXNXssBdV1S6-XLZAjEcpigeWQCGIqYOo7pQJybaG4oGvTbR8sb4i6cXGNKsrOLb5ahzXdtuIlPgfdoIpkXWJTVEKF1P2fem-IpHMw/s1600/wee.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiio4ThyaAr1YfoMoR707kSDMdDL89IKRhryug6DXNXssBdV1S6-XLZAjEcpigeWQCGIqYOo7pQJybaG4oGvTbR8sb4i6cXGNKsrOLb5ahzXdtuIlPgfdoIpkXWJTVEKF1P2fem-IpHMw/s1600/wee.gif' alt='' class='comment_emo'/>");
            zx.item(i).innerHTML = ki_emo;
        }
    }
}
//]]>
</script>

Pada kode diatas sudah ada 12 emotikon yang bisa digunakan, jika ingin menambah atau mengeditnya, sobat hanya perlu mengubah url gambar diatas dengan URL gambar yang baru (gambar bisa sobat cari sendiri di Google).

Note: Emoticon ini untuk Komentar default Blogger. Emoticon ini tidak ditampilkan di atas form komentar dan tidak menggunakan alert box, apabila ingin menambahkan diatas form komentar atau ingin menggunkan alert box, silahkan cari tutorialnya di Googel, sudah banyak yang posting.

Semoga bermanfaat....

resouce: http://blog.kangismet.net

Blog Ziant Shady