bikin dan pasang emotikon di blog

30 Nov 2013

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 :

Emotikon blog

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

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

1234567891011121314151617181920212223242526272829303132333435363738394041<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, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB-_4y7wFokgeAV3PIg7_Ir6mq4sun4nDrwCq218jzUp8XHkOcsTyYg9zpHyz6tp4nfxqfuPS6w8AQwF_2-iWvN56mow5L6YTDVdrbbq2vnEjWCP-IOYDszTqAdhQ1sYQ1L9O0xWGn5aY/s1600/thumbsup.gif", ":-bd");
     emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXdrLdprTNM3Unus4pnl4DOa33EsPy-aNKmTdchT3EStiQmiB3CYFYxwqGNpi1QcGd4tVMcBfHF4PK232iOrfnMvtiFDMIYm_PfkxwSYgGti4h7PpZycL_EB7IbYTDvz81C0m3ikIrA3D1/s1600/thumb.gif", ":-b");
     emo(/\s=D/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmB5q7Q3ZqHB0u7rD8Udep-jk1G9kcSNc6XQQb6W5pGHC_QujtGzXsMLdpKkUb489TqKwRGIXMjwMQFKuipPQOAZT9AZSmtUli-28D6jfr48nZng89y26g7dPViYlyPcNF9By5v9EpGuKo/s1600/hihi.gif", "=D");
     emo(/\s:D/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN7be9gi-deA3jThn79HKs68yWQx0oHoydXqfh64FokaHpG6VGf1lu1twFlRaCSsLVq8-g3KE7TqyrdKfnAezc_x-VQ4EQqcHwDWTeV6wvRJsMo8ofp7HIhoLtRiGJ1ocZeOF-bYe_ZHJI/s1600/icon_smile.gif", ":D");
     emo(/\s@@,/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIEKYgR6EGjQYJ-orH_QOybfBN3PEpyPMkIJwmSoXIzmzYQXUhudXc_8yTm42ZTagmOKgYOElvCt3nMG0ZPbpqpng38J-JYgcboEXENDsB1S6Y6kuWlMXLiXDEKhy0gc0RjAAbzTQwK25t/s1600/rolleyes.gif", "@@,");
     emo(/\s\^(\_|)\^/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMNM_Ktlp33okR4ZOv530Novmbl2cMCUvEDQgTtYnYETM1cVvwVn3Bfgt_0oVECEhIFGZzuz28mczambEYjmHJkQXYET5GApaeWZfD4kIAn7gVSxmEjzhhHwImUFDdgpad7G1Fia9SdDiE/s1600/smile.gif", " ^_^ ");
     emo(/\s:\)/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcUN9JGjBhGsxQ2DPJ1QvEZTTs1ovL3_x37nhTx2xdoWwqplNCrL_3qaLOWI_B6DniH4GCX_n92aKlWwY50a68RgbeN0wX82xuTiOxcTTx43sAXBST2-6SE5sOzaA47NO1S45tnQPLNxAI/s1600/smile1.gif", ":)");
     emo(/\s:\(/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS-nMQzEHk4cbzxe-z9zeWVZ_mKPrkKRCV2aZXEbq6Rieg1ew5S6n1Vo8NEYVQTy_WvVydShZtTzpV-0N8m6_hOYhgtS_D5tW7JmHd5Qiw5Q8eLX2o9hatIi0KVTtB2P4M_n9YheuCaiVo/s1600/sad.gif", ":(");
     emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcGVDa86hrPIrUhvZSVGGcRN8tb6khXCyrX8IkaMTm31blHqnm8kzeuCfDfN-SnKywtp3HXhZVsg8d6eRSGoaJPyLZEqEce65QX_C6UvNBvVH2sfeRUovFgl3t7fkQtK91ZDaw904u4ACu/s1600/wee.gif", ":p");
     emo(/\s;\)/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqCYaCTsZwCrLW8oSJWEN6mSCHeUAreua_4pq5xYbKRRsOTecBqchulJGVjv5mU_gsp9p9VvUn-jDJ_gh0SIHmcvDW4n24NEUSaRCeKBy5HiRC8vd_dHGiDprTznEzMN4XMFfVdBcvRFIo/s1600/wink.gif", ";)");
     emo(/\s=\(/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_paZiY6y4N2tYVFYcMNTjnqLOSgTrNPK6Ukodgr9UZBOzQyUOFLI0nhpqvSo0sbxbSYl6kewanM5_qDK2G_QmchQiHVBSc4D-q2NStSucBGGigXv_zhSWtcvvisei5aR_RcGiZpG79d2m/s1600/sadanimated.gif", "=(");
     emo(/\s:yaya:/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpEZvemtO2Q3Lak7A0TS5WinRK-tUG0pabEXuiT34cTaFjH_i40hqE3ujMEM7Wek5LVjCxJVw0QJSwCcva9RNjfYko3Kpa_nbX7AcOCuFGBIA735md3hO4NaZ2GjjTogwVgkExA5ktOlKt/s1600/yaya.gif", ":yaya:");
     emo(/\s:Q/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYzzyE43iQ6ATqzYgo5Hs8iKsu2G2OZkuP2Hc_2t8Ut8ySC86_Kqh5FZ98iM4QsztirPoLAY5106prwowH8ptQau-2aMWiaswSoSSmtibrixn6vCTBG5-FNCgw6749R1JbXGNXa9M6YN_p/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 )

komentar

Taufik 11.37