Beranda » jQuery » Komentar » Emoticon komentar otomatis

Emoticon komentar otomatis

Emo atau smiley biasanya digunakan untuk menyatakan suasana hati, senang, sedih, marah dsb. Selain itu juga sebagai penambah unik kolom komentar blog, sehingga tampak lebih interaktif dengan pengunjung ketika saling berbalas komentar.

Sudah banyak tutorial tentang cara memasang emotikon pada komentar blogger, tapi saya share ini untuk pembaca di blog saya dan jika berminat silahkan di simak.

pastikan template anda sudah terpasang:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

silahkan ikuti langkah mudahnya :

1. Simpan kode CSS ini di atas ]]></b:skin> atau kode </style>

.emoWrap {
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}

img.emo, input.emoKey {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}

input.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
}

2. Simpan kode ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
$(function () {

    if (putEmoAbove) {
        $(putEmoAbove).before('<div class="heads-up" id="emoWrap"> :) :( ^_^ :D ;) :-bd :yaya: :&#39;( :&#92; :p B) :Q :Ozz 7:( &#92;o/ **p &lt;3 0:) :-a 7:O *fck* x@ X@ ~x( =p*  </div>');
    }
    function emo(emo, imgRep, emoKey) {
        $(emoRange).each(function () {
            $(this).html($(this).html().replace(/<br ?\/?>(:|;|=|\^)/ig, "<br> $1").replace(emo, " <img src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"));
        });
    }
 emo(/\s:\)+/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/smile.gif", ":)");
 emo(/\s;\)+/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/wink.gif", ";)");
 emo(/\s:\(/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/sad.gif", ":(");
 emo(/\s:yaya:/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/yaya.gif", ":yaya:");
 emo(/\s:\\/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/memble.gif", ":&#92;");
 emo(/\s:D/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/haha.gif", ":D");
 emo(/\s\^(\_|)\^/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/senyum-tulus.gif", "^_^");
 emo(/\s:'\(/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/cry.gif", ":&#39;(");
 emo(/\sB\)/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/cool.gif", "B)");
 emo(/\s:Q/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/smoking.gif", ":Q");
 emo(/\s\*\*p/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/crazy.gif", "**p");
 emo(/\s7:\(/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/conf.gif", "7:(");
 emo(/\s:p/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/wee.gif", ":p");
 emo(/\s:Oz+/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/sleep.gif", ":Ozz");
 emo(/\s7:O/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/angry.gif", "7:O");
 emo(/\s\\o\//ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/applause.gif", "&#92;o/");
 emo(/\s&lt;3/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/love.gif", "&amp;amp;lt;3");
 emo(/\s0:\)+/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/angelgreen.gif", "0:)");
 emo(/\s:-a/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/vomit.gif", ":-a");
 emo(/\s\*fck\*/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/fuck.gif", "*fck*");
 emo(/\sx\@/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/marahbesar.gif", "x@");
 emo(/\s\X\@/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/arrgh.gif", "X@");
 emo(/\s:-bd/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/topmarkotop.gif", ":-bd");
 emo(/\s\~x\(+/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/ugh.gif", "~x(");
 emo(/\s=p\*/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/ball2.gif", "=p*");
    var one = 0;
    $(document.body).on("click", function () {
        $('.emoKey').remove();
    });
    $('.emo').css('cursor', 'pointer').on("click", function (e) {
        $('.emoKey').remove();
        $(this).after('<input class="emoKey" type="text" size="6" value=" ' + this.alt + '" />');
        $('.emoKey').trigger("select");
        if (emoMessage && one === 0) {
            alert(emoMessage);
            one = 1;
        }
        e.stopPropagation();
    });

});
var emoRange    = "#comments p, div.emoWrap",
    putEmoAbove = "#comment-editor",
    emoMessage  = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";
//]]>
</script>

jika terlalu panjang bisa menggunakan yang di bawah ini:

<script type='text/javascript'>
//<![CDATA[
var emoRange    = "#comments p, div.emoWrap",
    putEmoAbove = "#comment-editor",
    emoMessage  = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";
//]]>
</script>
<script src='http://reader-hosting.googlecode.com/svn/trunk/comments/emo-auto.js' type='text/javascript'></script>

Simpan dan lihat hasilnya.

Menambah Emoticon

Untuk menambah atau edit emoticon, tambahkan kode yang seperti ini (edit simbol dan url gambarnya) :

emo(/\s:\)+/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/smile.gif", ":)");

Perhatikan pada kode

var emoRange = "#comments p, div.emoWrap",

pada "#comments p" adalah tujuan dimana nantinya kode emo akan di terjemahkan menjadi emoticon, jika di template anda memiliki struktur id da class yang berbeda silahkan di sesuaikan. misalnya ganti "#comments p" dengan "comment_block" dsb.

sekian saja semoga bermanfaat...

Emoticon komentar otomatis

Belum ada tanggapan untuk "Emoticon komentar otomatis"

Post a Comment