Cara Membuat Twitter Emoji di Komentar Blogger

Cara Membuat Twitter Emoji di Komentar Blogger

Rio Ilham Hadi

21 May 2015

Hai sobat Blanter semua... sekarang saya akan memberikan tips yang sudah di tunggu-tunggu nih, yaitu cara menggunakan Twitter Emoji di Komentar Blogger. Sebelumnya saya sudah membahas cara menggnakan Twitter Emoji di Postingan Blogger disini. Karena tips itu hanya untuk postingan dan bukan untuk komentar, nah dalam tips di postingan ini saya akan memberikan caranya agar Twitter Emoji yang keren ini bisa di gunakan di dalam komentar.

Cara ini sebenarnya hanya tips biasa cara membuat emoticon pada komentar blog, nah disini saya merubah gambar emoticon biasa menjadi Emoji, walaupun dalam tutorial ini tidak semua Emoji dapat digunakan karena ya sebenarnya bisa tapi karena terlalu banyak jadi saya persingkat saja.. Tutorial ini juga di lengkapi dengan tombol show hide Emoji Emoticon wah keren bukan?...

Demo

Apakah Anda ingin mencoba Emoji emoticon pada komentar blog? 

Silahkan Ikuti tips di bawah ini...

Cari kode di bawah ini biasanya ada 4, kita ambil yang ke 2 dan ke 4

<p><data:blogCommentMessage/></p>

Ganti kode di atas dengan kode di bawah ini

      <p><data:blogCommentMessage/>
        <br/>
        <a class='emoji-button buka' title='Emoticon'>Emoticon</a><a class='emoji-button tutup' style='display:none' title='Emoticon'>Close Emoticon</a>
</p>
<script type='text/javascript'>
$(document).ready(function() {
    $(&#39;.buka&#39;).click(function() {
        $(&#39;div.emoWrap&#39;).show();
        $(&#39;.tutup&#39;).show();
        $(&#39;.buka&#39;).hide();
    });
    $(&#39;.tutup&#39;).click(function() {
        $(&#39;div.emoWrap&#39;).hide();
        $(&#39;.tutup&#39;).hide();
        $(&#39;.buka&#39;).show();
    });
});
</script>

Kemudian tambahkan Style CSS berikut ini dan letakan di atas ]]></b:skin> atau </style>



img.comment_emo {
    height: auto !important;
    vertical-align: middle !important;
    width:25px !important;
    border:0px !important;
}
.emoji-button {padding:5px;background:#333;color:#fff;cursor:pointer}
.emoji-button:hover {color:#fff;background:#07ACEC}
div.emoWrap {display:none}

dan Langkah selanjutnya yaitu dengan menambahkan Javascript, letakan script di bawah ini di atas </head>

<script type='text/javascript'>
//<![CDATA[
/* Emoji Emoticon - Created For Comments By Rhinokage Rio - www.idblanter.com */
window.emoticonx=function(){var t=function(t){var m=t||{},o=m.emoRange||"#comments p, div.emoWrap",e=m.putEmoAbove||"iframe#comment-editor",c=m.topText||"Click to see the code!",n=m.emoMessage||"";$(e).before('<div style="text-align:center" class="emoWrap"> :) hihi :( :-) :D ;( ;-( :-d @-) :P :o :&gt;) (o) [-( :-? (p) :-s (m) 8-) :-t :-b  b-( :-# =p~ $-) (y) (f) x-) (k) (h) (c) cheer <br/><b>'+c+"</b><br/>"+n+"</div>");var i=function(t,m,e){$(o).each(function(){$(this).html($(this).html().replace(/<br>:/g,"<br> :").replace(/<br>;/g,"<br> ;").replace(/<br>=/g,"<br> =").replace(/<br>\^/g,"<br> ^").replace(t," <img style='max-height:24px' src='"+m+"' class='emo delayLoad' alt='"+e+"' />"))})};i(/\shihi/gi,"http://twemoji.maxcdn.com/36x36/1f601.png","hihi"),i(/\s:\(+/g,"http://twemoji.maxcdn.com/36x36/1f615.png",":("),i(/\s:\)+/g,"http://twemoji.maxcdn.com/36x36/1f600.png",":)"),i(/\s:-\)+/g,"http://twemoji.maxcdn.com/36x36/1f60f.png",":-)"),i(/\s:D/gi,"http://twemoji.maxcdn.com/36x36/1f603.png",":D"),i(/\s;\(+/g,"http://twemoji.maxcdn.com/36x36/1f61e.png",";("),i(/\s;-\(+/g,"http://twemoji.maxcdn.com/36x36/1f62d.png",";-("),i(/\s:-d/gi,"http://twemoji.maxcdn.com/36x36/1f604.png",":-d"),i(/\s@-\)+/g,"http://twemoji.maxcdn.com/36x36/1f616.png","@-)"),i(/\s:P/gi,"http://twemoji.maxcdn.com/36x36/1f61c.png",":P"),i(/\s:o/gi,"http://twemoji.maxcdn.com/36x36/1f62e.png",":o"),i(/\s:&gt;\)+/g,"http://twemoji.maxcdn.com/36x36/1f606.png",":&gt;)"),i(/\s\(o\)+/gi,"http://twemoji.maxcdn.com/36x36/1f609.png","(o)"),i(/\s\[-\(+/g,"http://twemoji.maxcdn.com/36x36/1f614.png","[-("),i(/\s:-\?/g,"http://twemoji.maxcdn.com/36x36/2753.png",":-?"),i(/\s\(p\)+/gi,"http://twemoji.maxcdn.com/36x36/1f619.png","(p)"),i(/\s:-s/gi,"http://twemoji.maxcdn.com/36x36/1f625.png",":-s"),i(/\s\(m\)+/gi,"http://twemoji.maxcdn.com/36x36/1f620.png","(m)"),i(/\s8-\)+/gi,"http://twemoji.maxcdn.com/36x36/1f60e.png","8-)"),i(/\s:-t/gi,"http://twemoji.maxcdn.com/36x36/1f624.png",":-t"),i(/\s:-b/gi,"http://twemoji.maxcdn.com/36x36/1f634.png",":-b"),i(/\sb-\(+/gi,"http://twemoji.maxcdn.com/36x36/1f635.png","b-("),i(/\s:-#/gi,"http://twemoji.maxcdn.com/36x36/1f637.png",":-#"),i(/\s=p~/gi,"http://twemoji.maxcdn.com/36x36/1f35c.png","=p~"),i(/\s\$-\)+/gi,"http://twemoji.maxcdn.com/36x36/1f4b5.png","$-)"),i(/\s\(y\)+/gi,"http://twemoji.maxcdn.com/36x36/1f44d.png","(y)"),i(/\s\(f\)+/gi,"http://twemoji.maxcdn.com/36x36/1f33a.png","(f)"),i(/\sx-\)+/gi,"http://twemoji.maxcdn.com/36x36/1f60d.png","x-)"),i(/\s\(k\)+/gi,"http://twemoji.maxcdn.com/36x36/1f496.png","(k)"),i(/\s\(h\)+/gi,"http://twemoji.maxcdn.com/36x36/1f44f.png","(h)"),i(/\s\(c\)+/gi,"http://twemoji.maxcdn.com/36x36/2615.png","(c)"),i(/\scheer/gi,"http://twemoji.maxcdn.com/36x36/1f378.png","cheer"),$("div.emoWrap").one("click",function(){n&&alert(n)}),$(".emo").css("cursor","pointer").on("click",function(t){$(".emoKey").remove(),$(this).after('<input class="emoKey" type="text" size="'+this.alt.length+'" value=" '+this.alt+'" />'),$(".emoKey").trigger("select"),t.stopPropagation()}),$(".emoKey").on("click",function(){$(this).focus().select()}),$(document).on("click",function(){$(".emoKey").remove()})};return function(m){t(m)}}();
//]]>
</script>

Nah sekarang cara untuk memunculkan emoji agar mudah untuk memilih dan melihat kode emoji yang ingin di gunakan untuk memunculkannya..

Tambahkan Script di bawah ini tepat di atas kode </body>



<script type='text/javascript'>
            //<![CDATA[
            emoticonx({
              emoRange:"#comments p, div.emoWrap",
              putEmoAbove:"iframe#comment-editor",
              topText:"Click to see the code!"
            });
            //]]>
</script>

Untuk Menambahakan Emoticon Emoji, caranya lumayan sulit, jika ada yang ingin menambahkan emoji emoticon silahkan anda bisa PM (Private Message) dengan saya disini.

Nah Mudah bukan?
Sekian Tutorial "Cara Membuat Twitter Emoji di Komentar Blog" Semoga Bermanfaat...

Share This