bikin dan pasang emotikon di blog

Kali ini saya bisa share lagi, karena kesibukan yang tidak bisa di tinggalkan sehingga beberapa minggu kebelakang saya absen di blog. ternyata googlecode sudah hampir di tiadakan pada tahun depan 2014 sehingga semua data data yang di simpan sesegera mungkin di pindahkan ke tempat penyimpanan lain yang di sediakan oleh google.

Tentuya kita nyari yang berbasis geratis. he he... ok langsung saja ke pokok bahasan. template ini tadi nya ada fasilatas emotikon yang link nya dapat pinjam dari blog DTE. Karena file emotikon di simpan di googlecode dan sudah error, maka saya pindahkan filenya ke google drive bila ada teman teman yang mau memakai nya di persilahkan ambil kode di bawah ini :

bikin dan pasang emotikon blog, opic blog
Emotikon blog


#emoWrap {
  padding:5px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
  margin:0 8px;
}
.emo {
  display:inline-block;
  *display:inline;
  vertical-align:middle;
}
.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
  display:inline-block;
 width:25px;
}
kode di bawah ini letakan di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
// muncul di postingan tambahkan .post-body
var emoRange    = "#comments p, div#emoWrap",
    putEmoAbove = "#comment-editor";
//]]>
</script>
kode di bawah ini letakan di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(function () {
    // letak bar emotikon di atas comment-form
    if (putEmoAbove) {
      $(putEmoAbove).before('<div class="heads-up" id="emoWrap"> :yaya: =( ;) :p :) ^_^ @@, :-bd  :-b =D :D  :( :Q</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:-bd/ig, "http://2.bp.blogspot.com/-yElQmFAIiII/UKhVMcObcQI/AAAAAAAADP4/-qdEpW8zCmY/s1600/thumbsup.gif", ":-bd");
     emo(/\s:-b/ig, "http://2.bp.blogspot.com/-mmr_09MutIs/Uphuan9AjBI/AAAAAAAAAtc/iBfiqbR2sqk/s1600/thumb.gif", ":-b");
     emo(/\s=D/ig, "http://2.bp.blogspot.com/-evcdI2Y9-PY/UphsTrZ5fOI/AAAAAAAAAsg/B-vods-jkPg/s1600/hihi.gif", "=D");
     emo(/\s:D/ig, "http://3.bp.blogspot.com/-nx2NWkzLKWM/UphseGIoiKI/AAAAAAAAAso/pBp-s2CDOgg/s1600/icon_smile.gif", ":D");
     emo(/\s@@,/ig, "http://3.bp.blogspot.com/-03UqMUZLQh0/UphsqxtUdsI/AAAAAAAAAsw/RFjZBkFSuTs/s1600/rolleyes.gif", "@@,");
     emo(/\s\^(\_|)\^/g, "http://3.bp.blogspot.com/-6mcFL4ydC6Y/UphtPHYo3tI/AAAAAAAAAtI/5Zjburhpj6E/s1600/smile.gif", " ^_^ ");
     emo(/\s:\)/ig, "http://4.bp.blogspot.com/-Z0iKxnXitPQ/Uphtb3OekVI/AAAAAAAAAtQ/DRzPyjmohNo/s1600/smile1.gif", ":)");
     emo(/\s:\(/ig, "http://4.bp.blogspot.com/-I3LIxyrzksI/Uphs26mTfxI/AAAAAAAAAs4/dM05SuSOPDA/s1600/sad.gif", ":(");
     emo(/\s:p/ig, "http://1.bp.blogspot.com/-z47egfHKgUU/Uphu1eQBLxI/AAAAAAAAAts/2kI2rUoWHQw/s1600/wee.gif", ":p");
     emo(/\s;\)/ig, "http://2.bp.blogspot.com/-W9AEsoinxfo/Uphu-wQqZaI/AAAAAAAAAt0/9RELx5s9GbU/s1600/wink.gif", ";)");
     emo(/\s=\(/ig, "http://3.bp.blogspot.com/-YlSAT80xhmo/UphtBvJGecI/AAAAAAAAAtA/qUvGp74TfyY/s1600/sadanimated.gif", "=(");
     emo(/\s:yaya:/ig, "http://1.bp.blogspot.com/-zkqJv-iwMtg/UplMeHC38HI/AAAAAAAAAuQ/79gyqWCcOQg/s1600/yaya.gif", ":yaya:");
     emo(/\s:Q/ig, "http://4.bp.blogspot.com/-F530SwubA0c/UplMVR9a8xI/AAAAAAAAAuI/Hn34VNbUcSc/s1600/smoking.gif", ":Q");
// klick sembarang tempat untuk menyembunyikan code emot
    $(document.body).on("click", function () {
        $('.emoKey').remove();
    });
    // klik untuk memunculkan code emot!
    $('.emo').css('cursor', 'pointer').on("click", function (e) {
        $('.emoKey').remove();
        $(this).after('<input class="emoKey" type="text" size="6" value=" ' + this.alt + '" />');
        $('.emoKey').trigger("select");
        e.stopPropagation();
    });
    })(jQuery);
//]]>
</script>
Untuk kode javascript saya sarankan di host di google drive Semoga ulasan yang singkat tentang bikin dan pasang emotikon di blog ini dapat dengan mudah di pahami
Bila sobat yang biasa pakai link external silahkan kode kode di atas di simpan dan di host pada Google Drive untuk tutorial nya silahkan cari di mbah google

kolaborasi code:
  • mas Taufik nurrohman ( dte.web.id ) 
  • kang Ismet ( blog.kangismet.net )

8 komentar

  1. Pertamaax, izin prakteknya mas opic,,
    Http://kemalseo.blogspot.com

    BalasHapus
    Balasan
    1. mas, kira-kira apa yang kurang dari blog saya. ? :(
      http://kemalseo.blogspot.com

      Hapus
  2. makasih mas taufik, oiya kalau untuk pasang tombol di kotak komentar bagaimana iya?

    BalasHapus
    Balasan
    1. kode kode tombol di letakan di bawah kode ini. kode di bawah ini ada 4, coba pasang di ke 2 dan di ke 4
      <p><data:blogCommentMessage/></p>

      Hapus
  3. mas blog saya kok emoticon nya g muncul yah?
    sedawai.com

    BalasHapus
    Balasan
    1. coba ulangi pemasangan nya, soalnya sudah di test di berbagai template dengan hasil ok

      Hapus

Terima kasih atas kunjungan nya dan Gunakan tag seperlunya

Tag kode pendek <i rel="code">KODE ANDA</i>
Tag kode panjang <i rel="pre">KODE PANJANG ANDA</i>
Tag gambar <i rel="image">URL GAMBAR</i>
Tag judul <b rel="h3">JUDUL ANDA DI SINI...</b>
Tag huruf tebal <b>TEKS ANDA DI SINI...</b>
Tag huruf miring <i>TEKS ANDA DI SINI...</i>

Konversi Code