Modifikasi Alert Emoticon

Modifikasi Alert Emoticon

Javascript jQuery Komentar

Saya telah membuat postingan Emoticon komentar otomatis namun pada postingan dahulu itu tidak ada modifikasi pemberitahuan pada saat emoticon tersebut di klik yang mana tampilannya masih menggunakan tampilan alert default.


Dan pada postingan saya kali ini saya akan membagikan cara modifikasi tampilan alertnya sesuka hati kita agar tidak terlalu sederhana (menggunakan alert default).

Baik langsung saja, Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML

untuk yang pernah memasang emoticon ini silahkan ganti semua jsnya dengan js berikut ini:

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-2728code-line:1-2829code-line:1-2930code-line:1-3031code-line:1-3132code-line:1-3233code-line:1-3334code-line:1-3435code-line:1-3536code-line:1-3637code-line:1-3738code-line:1-3839code-line:1-3940code-line:1-4041code-line:1-4142code-line:1-4243code-line:1-4344code-line:1-4445code-line:1-4546code-line:1-4647code-line:1-4748code-line:1-4849code-line:1-4950code-line:1-5051code-line:1-5152code-line:1-5253code-line:1-5354code-line:1-5455code-line:1-5556code-line:1-5657code-line:1-5758code-line:1-5859code-line:1-5960code-line:1-6061code-line:1-61<script type='text/javascript'>
//<![CDATA[
$(function () {
    if (putEmoAbove) {
        $(putEmoAbove).before('<div class="wrap-emo" id="emo-bar"> :) :( ^_^ :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 () {
        $('.emo-Key').remove();
    });
    $('.emo').css('cursor', 'pointer').on("click", function (e) {
        $('.emo-Key').remove();
        $(this).after('<input class="emo-Key" type="text" size="6" value=" ' + this.alt + '" />');
        $('.emo-Key').trigger("select");
        if (emoMessage && one === 0) {
            $('#panel-emo').css('opacity', 1);
            $('#panel-emo .message').html(emoMessage);
            one = 1;
        }
        e.stopPropagation();
    });
    $('#panel-emo .close').on("click", function () {
        $('#panel-emo').css('opacity', 0);
    });
});
var emoRange    = "#comments p, div#emo-bar",
    putEmoAbove = "#comment-editor",
    emoMessage  = "Untuk menyisipkan emotikon setidaknya Anda harus menambahkan satu spasi di depan. Jangan pernah melupakan itu atau emotikon Anda tidak bisa diterjemahkan.";

//]]>
</script>

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

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-2223code-line:2-2324code-line:2-2425code-line:2-2526code-line:2-2627code-line:2-2728code-line:2-2829code-line:2-2930code-line:2-3031code-line:2-3132code-line:2-3233code-line:2-3334code-line:2-3435code-line:2-3536code-line:2-3637code-line:2-3738code-line:2-3839code-line:2-3940code-line:2-4041code-line:2-4142code-line:2-4243code-line:2-4344code-line:2-4445code-line:2-45#panel-emo {
  position:fixed !important;
  position:absolute;
  top:50px;
  right:0;
  left:0;
  z-index:9999;
  text-align:center;
  width:370px;
  margin:0 auto;
  padding-bottom:10px;
  height:auto;
  background-color:#333;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  box-shadow:0 1px 2px rgba(0,0,0,0.4);
  z-index:1000;
  opacity:0;
}
#panel-emo .title {
  background-color:#3B5998;
  padding:10px;
  color:#fff;
  font:normal 14px;
  margin:0;
  position:relative;
}
#panel-emo .message {
  padding:5px 10px;
  text-align:left;
  display:block;
  font-size:12px;
  color:#fff;
}
.wrap-emo {padding:10px;background-color:#555;border:1px solid #369;}
#panel-emo a{color:#fff;}
#panel-emo .close-wrapper .close a{
  position:relative;
  font:bold 10px Arial,Sans-Serif;
  
  cursor:pointer;
}
#panel-emo .close-wrapper .close:hover {
  color:#aaa;
}

untuk yang belum, Temukan kode </body>

Salin kode di bawah ini dan letakkan di atasnya:

1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-910code-line:3-1011code-line:3-1112code-line:3-1213code-line:3-1314code-line:3-1415code-line:3-1516code-line:3-1617code-line:3-1718code-line:3-1819code-line:3-1920code-line:3-2021code-line:3-2122code-line:3-2223code-line:3-2324code-line:3-2425code-line:3-2526code-line:3-2627code-line:3-2728code-line:3-2829code-line:3-2930code-line:3-3031code-line:3-3132code-line:3-3233code-line:3-3334code-line:3-3435code-line:3-3536code-line:3-3637code-line:3-3738code-line:3-3839code-line:3-3940code-line:3-4041code-line:3-4142code-line:3-4243code-line:3-4344code-line:3-4445code-line:3-4546code-line:3-4647code-line:3-4748code-line:3-4849code-line:3-4950code-line:3-5051code-line:3-5152code-line:3-5253code-line:3-5354code-line:3-5455code-line:3-5556code-line:3-5657code-line:3-5758code-line:3-5859code-line:3-5960code-line:3-6061code-line:3-6162code-line:3-6263code-line:3-6364code-line:3-6465code-line:3-6566code-line:3-66<script type='text/javascript'>
//<![CDATA[
$(function () {
    if (putEmoAbove) {
        $(putEmoAbove).before('<div class="wrap-emo" id="emo-bar"> :) :( ^_^ :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 () {
        $('.emo-Key').remove();
    });
    $('.emo').css('cursor', 'pointer').on("click", function (e) {
        $('.emo-Key').remove();
        $(this).after('<input class="emo-Key" type="text" size="6" value=" ' + this.alt + '" />');
        $('.emo-Key').trigger("select");
        if (emoMessage && one === 0) {
            $('#panel-emo').css('opacity', 1);
            $('#panel-emo .message').html(emoMessage);
            one = 1;
        }
        e.stopPropagation();
    });
    $('#panel-emo .close').on("click", function () {
        $('#panel-emo').css('opacity', 0);
    });
});
var emoRange    = "#comments p, div#emo-bar",
    putEmoAbove = "#comment-editor",
    emoMessage  = "Untuk menyisipkan emotikon setidaknya Anda harus menambahkan satu spasi di depan. Jangan pernah melupakan itu atau emotikon Anda tidak bisa diterjemahkan.";

//]]>
</script>
<div id="panel-emo">
    <div class='title'>PENTING UNTUK DIPERHATIKAN</div>
    <div class="message"></div>
    <a href='#' class="close">OK</a> 
</div>

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

1code-line:4-12code-line:4-23code-line:4-34code-line:4-45code-line:4-56code-line:4-67code-line:4-78code-line:4-89code-line:4-910code-line:4-1011code-line:4-1112code-line:4-1213code-line:4-1314code-line:4-1415code-line:4-1516code-line:4-1617code-line:4-1718code-line:4-1819code-line:4-1920code-line:4-2021code-line:4-2122code-line:4-2223code-line:4-2324code-line:4-2425code-line:4-2526code-line:4-2627code-line:4-2728code-line:4-2829code-line:4-2930code-line:4-3031code-line:4-3132code-line:4-3233code-line:4-3334code-line:4-3435code-line:4-3536code-line:4-3637code-line:4-3738code-line:4-3839code-line:4-3940code-line:4-4041code-line:4-4142code-line:4-4243code-line:4-4344code-line:4-4445code-line:4-4546code-line:4-4647code-line:4-4748code-line:4-4849code-line:4-4950code-line:4-5051code-line:4-5152code-line:4-5253code-line:4-5354code-line:4-5455code-line:4-5556code-line:4-5657code-line:4-5758code-line:4-5859code-line:4-5960code-line:4-6061code-line:4-6162code-line:4-6263code-line:4-6364code-line:4-6465code-line:4-65#panel-emo {
  position:fixed !important;
  position:absolute;
  top:50px;
  right:0;
  left:0;
  z-index:9999;
  text-align:center;
  width:370px;
  margin:0 auto;
  padding-bottom:10px;
  height:auto;
  background-color:#333;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  box-shadow:0 1px 2px rgba(0,0,0,0.4);
  z-index:1000;
  opacity:0;
}
#panel-emo .title {
  background-color:#3B5998;
  padding:10px;
  color:#fff;
  font:normal 14px;
  margin:0;
  position:relative;
}
#panel-emo .message {
  padding:5px 10px;
  text-align:left;
  display:block;
  font-size:12px;
  color:#fff;
}
.wrap-emo {padding:10px;background-color:#555;border:1px solid #369;}
#panel-emo a{color:#fff;}
#panel-emo .close-wrapper .close a{
  position:relative;
  font:bold 10px Arial,Sans-Serif;
  
  cursor:pointer;
}
#panel-emo .close-wrapper .close:hover {
  color:#aaa;
}
#emo-bar {
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}
img.emo, input.emo-Key {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}
input.emo-Key {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
  width:20px;
}

Terakhir Simpan dan lihat hasilnya.

sekian saja semoga bermanfaat...

Artikel Terkait

  • Membuat show hide konversi kode dan emoticon
    Salam buat agan agin sobat blogger yang suka utak atik template, kali ini saya mau share cara membuat show hide konversi kode dan emoticon pada komentar blogger bagi anda yang sedang mencari trik ini silahkan saja untuk di simak. pertama buka editor template blogger lalu tambahkan css di bawah ini .box-konvert-kode-db { width:100%; …
  • Membanned spamer di komentar dengan jquery
    Kali ini saya ingin berbagi buat sobat yang udah males dan capek menghapus komentar para spammer, yang satu ini palinf buat suasana jadi males dan menjengkelkan bila hadir di komentar blog kita. jquery ini bisa sobat gunakan untuk menghapus dan membanned para spamer tersebut dengan menghilangkan isi komentar juga link profile mereka agar user …
  • Memasang kode, gambar dan video di komentar
    Buat agan yang bingung dengan judul di atas sebenarnya adalah judul tentang cara menyisipkan dan mengijinkan kode, gambar dan video di komentar blogger. jadi kali ini kita akan membahas hal tersebut, karena saya pernah berkunjung ke sebuah blog yang memasang tool konversi kode tapi tidak memasang javascript ini jadi percuma juga menggunakan to…
  • Highlighter Language Autodetection
    Syntax Highlighter Language Autodetection ini saya dapatkan dari Software Maniacs dan saya terapkan di blog ini hanya saja tampilannya masih menggunakan Syntax Highlighter lama. seperti biasa anda mungkin sudah tau kegunaannya untuk di terapkan di blog, jadi tidak usah di jelaskan tinggal sekarang langsung saja ke cara bagaimana memasang Synta…
  • Memperbaiki ukuran thumbnail homepage
    buat sobat blogger yang mengalami masalah pada thumbnail/gambar Post.snippet dan post.thumbnail yang kurang jelas dan tidak sesuai ukuran pada tampilan posting static page/homepage, bisa menggunakan trik ini agar tampilan gambarnya bisa terlihat jelas dan sesuai. caranya cukup mudah dan gak ribet ikuti saja trik berikut perhatikan kode scrip…
  • Menerapakan jquery lightbox evolution
    Salam sobat blogger membuat postingan untuk share kali ini buat sobat yang masih bingung tentang jquery lightbox evolution. jquery lightbox ini saya gunakan di template ini pada konversi kode dan kontak bisa sobat lihat seperti apa itu jquery lightbox. untuk sobat yang tertarik dan ingin menerapkan ini untuk blognya saya akan memberikan trik…

Tidak ada komentar :

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...