Modifikasi Alert Emoticon

Modifikasi Alert Emoticon

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.

• Demo

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:

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

#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:

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

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

Modifikasi Alert Emoticon


Modifikasi Alert Emoticon

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Blog Hatsaka. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Blog Hatsaka dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Columbia Mary pada tanggal Wednesday, August 14, 2013