Emoticon Pure CSS with jQuery Plugin

Pure CSS atau trik menggunakan dimana pemakaian kode banyak dengan kode-kode atribut CSS. Pernah membaca 45+ CSS Trick Must be Known, dimana Beben si bloglang anu ganteng kalem tea sedikit memaparkan apa-apa saja yang dapat dilakukan dengan kekuatan CSS. Mau membuat tab menu dengan CSS juga bisa pure Css tab menu, membikin tombol sexy bookmark murni CSS sexy bookmark using CSS atau kepengen single menu with hover single menu with hover sampai centered menu juga ada centered menu with css :-"
Promosi postingan sob, biasa untuk merefresh ;)) Sekarang bagaimana membuat CSS emoticon with jQuery plugin? Nah hayooo, sudah murni CSS ditambah dengan plugin lagih :-/ Trik emoticon ini juga sudah ada dalam postingan Beben yang sebelum-sebelumnya (silahkan diubek-ubek saja)

Postingan trick kali ini akan banyak menanamkan kode CSS dan script jQuery pada template kita jika memang ingin menggunakannya. Maka harap dipertimbangkan lagi kalau sobat mau menanamkannya pada template tercinta :x
Karena disini Beben hanya berbagi ternyata trik ini bisa juga dipasang pada template berbasis blogspot :D Si bloglang tea, no unique no post, no gaya no post too :)) Oke kita langsung saja pada inti permasalahan, buka halaman berikut guna mendapatkan link download dan demonya JQuery CSS Emoticons Plugin. Kalau sudah melihatnya kita lanjut pada sesi pemasangan kedalam blog tercinta :D Screenshot setelah praktek di dummie blog :)

Hihihi...lucu nyak kayak Beben :-" :">

CSS Kode

span.css-emoticon{font-family:"Trebuchet MS";font-size:.55em;font-weight:700;color:#000;display:inline-block;overflow:hidden;vertical-align:middle;transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);width:1.54em;height:1.54em;text-align:center;line-height:1.34em;-moz-border-radius:1.54em;-webkit-border-radius:1.54em;border-radius:1.54em;-moz-box-shadow:1px -1px 2px rgba(0,0,0,0.5);-webkit-box-shadow:1px -1px 2px rgba(0,0,0,0.5);box-shadow:1px -1px 2px rgba(0,0,0,0.5);border:1px solid rgba(0,0,0,0.25);background-color:#fc0;background-image:0 41% #fd5 56% #fea 100% );-webkit-transition-property:color, background, transform;-webkit-transition-duration:1s 1s;-webkit-transition-timing-function:linear, ease-in;padding:0}
span.css-emoticon.spaced-emoticon{padding-left:.2em;width:1.34em;letter-spacing:.2em}
span.css-emoticon.small-emoticon{font-size:.55em;width:1.82em;height:1.82em;line-height:1.72em;-moz-border-radius:1.82em;-webkit-border-radius:1.82em;border-radius:1.82em}
span.css-emoticon.small-emoticon.spaced-emoticon{padding-left:0;width:1.82em;letter-spacing:.1em}
span.css-emoticon.red-emoticon{background-color:#eb0542;background-image:0 41% #eb265a 56% #fa376e 100% )}
span.css-emoticon.pink-emoticon{background-color:#ff8fd4;background-image:0 41% #ff99d8 56% #ffade1 100% )}
span.css-emoticon.no-rotate{transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.5);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.5);box-shadow:1px 1px 2px rgba(0,0,0,0.5);font-size:.45em;width:2.2em;height:2.2em;line-height:1.9em;-moz-border-radius:2.2em;-webkit-border-radius:2.2em;border-radius:2.2em;background-image:0 41% #fd5 56% #fea 100% )}
span.css-emoticon.counter-rotated{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-moz-box-shadow:-1px 1px 2px rgba(0,0,0,0.5);-webkit-box-shadow:-1px 1px 2px rgba(0,0,0,0.5);box-shadow:-1px 1px 2px rgba(0,0,0,0.5);background-image:0 41% #fd5 56% #fea 100% )}
span.css-emoticon.un-transformed-emoticon,span.css-emoticon.animated-emoticon:hover{letter-spacing:inherit;color:inherit;overflow:visible;transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);background:none;background-image:none;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;border-color:transparent}
span.css-emoticon.nintendo-controller{font-size:.8em;height:1.2em;line-height:1em;width:2.7em;vertical-align:bottom;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;background:0 9% #a5aabd 55% )}
span.css-emoticon.no-rotate.red-emoticon,span.css-emoticon.counter-rotated.red-emoticon{background-image:0 41% #eb265a 56% #fa376e 100% )}
span.css-emoticon.no-rotate.pink-emoticon,span.css-emoticon.counter-rotated.pink-emoticon{background-image:0 41% #ff99d8 56% #ffade1 100% )}
@media screen and -webkit-min-device-pixel-ratio0 {
span.css-emoticon.spaced-emoticon{width:1.4em}
}

CSS diatas sudah Beben kompress, letakinnya diatas kode ]]></b:skin>

jQuery Script

<script type='text/javascript'>
//<![CDATA[
/*
* jQuery CSSEmoticons plugin 0.2.9
*
* Copyright (c) 2010 Steve Schwartz (JangoSteve)
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Date: Sun Oct 22 1:00:00 2010 -0500
*/
(function(a){a.fn.emoticonize=function(m){var c=a.extend({},a.fn.emoticonize.defaults,m);var d=[")","(","*","[","]","{","}","|","^","<",">","\\","?","+","=","."];var l=[":-)",":o)",":c)",":^)",":-D",":-(",":-9",";-)",":-P",":-p",":-Þ",":-b",":-O",":-/",":-X",":-#",":'(","B-)","8-)",";*(",":-*",":-\\","?-)",": )",": ]","= ]","= )","8 )",": }",": D","8 D","X D","x D","= D",": (",": [",": {","= (","; )","; ]","; D",": P",": p","= P","= p",": b",": Þ",": O","8 O",": /","= /",": S",": #",": X","B )",": |",": \\","= \\",": *",": &gt;",": &lt;"];var j=[":)",":]","=]","=)","8)",":}",":D",":(",":[",":{","=(",";)",";]",";D",":P",":p","=P","=p",":b",":Þ",":O",":/","=/",":S",":#",":X","B)",":|",":\\","=\\",":*",":&gt;",":&lt;"];var h={"&gt;:)":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},"&gt;;)":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},"&gt;:(":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},"&gt;: )":{cssClass:"red-emoticon small-emoticon"},"&gt;; )":{cssClass:"red-emoticon small-emoticon"},"&gt;: (":{cssClass:"red-emoticon small-emoticon"},";(":{cssClass:"red-emoticon spaced-emoticon"},"&lt;3":{cssClass:"pink-emoticon counter-rotated"},O_O:{cssClass:"no-rotate"},o_o:{cssClass:"no-rotate"},"0_o":{cssClass:"no-rotate"},O_o:{cssClass:"no-rotate"},T_T:{cssClass:"no-rotate"},"^_^":{cssClass:"no-rotate"},"O:)":{cssClass:"small-emoticon spaced-emoticon"},"O: )":{cssClass:"small-emoticon"},"8D":{cssClass:"small-emoticon spaced-emoticon"},XD:{cssClass:"small-emoticon spaced-emoticon"},xD:{cssClass:"small-emoticon spaced-emoticon"},"=D":{cssClass:"small-emoticon spaced-emoticon"},"8O":{cssClass:"small-emoticon spaced-emoticon"},"[+=..]":{cssClass:"no-rotate nintendo-controller"}};var f=new RegExp("(\\"+d.join("|\\")+")","g");var n="(^|[\\s\\0])";for(var g=l.length-1;g>=0;--g){l[g]=l[g].replace(f,"\\$1");l[g]=new RegExp(n+"("+l[g]+")","g")}for(var g=j.length-1;g>=0;--g){j[g]=j[g].replace(f,"\\$1");j[g]=new RegExp(n+"("+j[g]+")","g")}for(var k in h){h[k].regexp=k.replace(f,"\\$1");h[k].regexp=new RegExp(n+"("+h[k].regexp+")","g")}var e="span.css-emoticon";if(c.exclude){e+=","+c.exclude}var b=e.split(",");return this.not(e).each(function(){var o=a(this);var i="css-emoticon";if(c.animate){i+=" un-transformed-emoticon animated-emoticon"}for(var p in h){specialCssClass=i+" "+h[p].cssClass;o.html(o.html().replace(h[p].regexp,"$1<span class='"+specialCssClass+"'>$2</span>"))}a(l).each(function(){o.html(o.html().replace(this,"$1<span class='"+i+"'>$2</span>"))});a(j).each(function(){o.html(o.html().replace(this,"$1<span class='"+i+" spaced-emoticon'>$2</span>"))});a.each(b,function(q,r){o.find(a.trim(r)+" span.css-emoticon").each(function(){a(this).replaceWith(a(this).text())})});if(c.animate){setTimeout(function(){a(".un-transformed-emoticon").removeClass("un-transformed-emoticon")},c.delay)}})};a.fn.unemoticonize=function(b){var c=a.extend({},a.fn.emoticonize.defaults,b);return this.each(function(){var d=a(this);d.find("span.css-emoticon").each(function(){var e=a(this);if(c.animate){e.addClass("un-transformed-emoticon");setTimeout(function(){e.replaceWith(e.text())},c.delay)}else{e.replaceWith(e.text())}})})};a.fn.emoticonize.defaults={animate:true,delay:500,exclude:"pre,code,.no-emoticons"}})(jQuery);
//]]>
</script>

Sisipkan jQuery script diatas tepat dibawah jQuery inti, atau sobat dapat mencoba meletakannya diatas kode </head> Kalau sudah itu scroll kebawah dan cari code </body> Masukin script pemanggil ini diatasnya yah

<script  type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('.post-body').emoticonize({
//delay: 500,
//animate: false,
//exclude: 'pre, code, .no-emoticons'
});
})
//]]>
</script>

</body>

Nb:
>> //delay :500, : Jika sobat mengaktifkan kode ini dengan menghilangkan // maka efeknya ada delay dalam menampilkan kode emotikon.
>> //animate: false, : Jika diaktifkan maka saat cursor diarahkan pada emotikon tidak akan berubah.
>> //exclude: 'pre, code, .no-emoticons' : Tag mana saja yg tidak mau disisipkan kode emotikon.

Save

Kata siapa emoticon tidak bisa memakai CSS :))
Happy emoticon \m/