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.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}
}jQuery Script
//<![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 )",": |",": \\","= \\",": *",": >",": <"];var j=[":)",":]","=]","=)","8)",":}",":D",":(",":[",":{","=(",";)",";]",";D",":P",":p","=P","=p",":b",":Þ",":O",":/","=/",":S",":#",":X","B)",":|",":\\","=\\",":*",":>",":<"];var h={">:)":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},">;)":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},">:(":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},">: )":{cssClass:"red-emoticon small-emoticon"},">; )":{cssClass:"red-emoticon small-emoticon"},">: (":{cssClass:"red-emoticon small-emoticon"},";(":{cssClass:"red-emoticon spaced-emoticon"},"<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><script type="text/javascript">
Nb:
//<![CDATA[
$(document).ready(function(){
$('.post-body').emoticonize({
//delay: 500,
//animate: false,
//exclude: 'pre, code, .no-emoticons'
});
})
//]]>
</script>
</body>
>> //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/
Loading... |
6 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...