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

  • Mengompress data Javascript tools YUI Compressor
    Mungkin blog tanpa javascript akan terasa biasa saja dan menjadi kurang menarik, itu semua menurut saya. karena dengan javascript kita dapat menciptakan hal - hal cantik dengan efek yang terlihat unik untuk sebuah tampilannya. dengan semakin majunya javascript berbagai hal yang terbilang berhubungan dengan blog kini banyak tercipta, bila anda …
  • Membuat persentase ketika scroll digulung
    Mungkin trik ini terbilang tidak penting untuk mendukung apa pun di dalam blog, namun untuk anda para sobat yang suka dengan kreasi dan menambah unik tampilan, persentase scroll bisa dipasang sebagai hiasan. Dengan menambahkan persentase scroll, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll/ia gulung, jika penggulung…
  • Klik kanan hanya berfungsi di tag pre
    Trik ini adalah bagian dari tujuan untuk melindungi content blog anda, mematikan fasilitas klik kanan dengan mengeset tag <body> menggunakan dasar oncontextmenu='return false;'. trik ini mematikan semua klik kanan dalam blog, lalu bagaimana caranya kita membuat sebuah ijin klik kanan yang berfungsi di area tertentu saja... kali ini saya…
  • Memasang alert untuk mengaktifkan javascript
    Tutorial ini berguna untuk para pengunjung blog anda yang menon-aktifkan fungsi javascript di web browser mereka. misalnya, ketika blog anda tidak memiliki tampilan maksimal saat fungsi javascript di web browser pengunjung anda dinon-aktifkan, maka para pengunjung blog anda harus mengaktifkan fungsi javascript di web browser mereka dengan men…
  • Memasang efek animasi loading halaman blogger
    Sudah lihat animasi loading blog ini, itu adalah hasil dari efek animasi loading beforeunload. Kali ini kita membuat efek animasi yang ditampilkan bukan karena terpicu oleh momen klik pada tautan melainkan karena aksi halaman yang mulai berpindah. Sehingga kita bisa merancang ulang efek animasi loading ketika perpindahan halaman dengan cara in…
  • Filter otomatis kata - kata kotor dalam komentar
    Adakalanya sebuah komentar yang masuk dalam blog anda memiliki kata - kata yang tidak pantas untuk di cantumkan dalam komentar dan ini mengganggu pengunjung lain yang berkomentar. umumnya tidakan berkomentar rendahan seperti ini dilakukan oleh orang yang tidak bertanggung jawab dan tidak memiliki etika yang baik yang tidak berani menampakkan d…

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...