EnglishBasis.Com: Chèn bộ mặt cười (Emoticons) dạng input cho comment của blogspot style 2

Thứ Ba, 23 tháng 7, 2013

Chèn bộ mặt cười (Emoticons) dạng input cho comment của blogspot style 2

Emoticons input for comment of blogger blogspot - Chèn bộ mặt cười vào khung comments blogger

Hôm nay namkna hướng dẫn các bạn cách tạo bôm mặt cười (Emoticons) cho phàn comment của blogger. Với bản này khi bạn bấm vào một mặt cười sẽ có một khung hiện ký tự chèn vào blog ra và bạn chỉ càn copy dán vào là xong.

Trong tiện ích này mình kết hợp cả popup hướng dẫn mọi người sử dụng tiện ích khi truy cập blog của bạn.

Bấm vào để xem demo: View Demo

Ảnh minh họa:

Chèn bộ mặt cười (Emoticons) dạng input cho comment của blogspot style 2

Làm thế nào để cài đặt Emoticons cho blogger

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Chọn Mở rộng tiện ích mẫu ( Expand Template Widgets)
4- Chèn code sau trước thẻ </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "Click vào biểu tượng sau đó copy xuống khung comment";
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
// Emoticon bar before comment-form
$(function() {
    $(putEmoAbove)
        .before('<div style="text-align:center" class="emoWrap"> :) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :&gt;) (o) [-( :-? (p) :-s (m) 8-) :-t :-b  b-( :-# =p~  $-)  (b)  (f) x-)  (k)  (h)  (c)  cheer  (sm)  (fu)  (ku)  (bg)  (lol)<br/><b><a href="javascript:openup_parseHTML()" rel="nofollow" title="Mã hóa code trước khi đưa vào bình luận"><span class="text_style">Mã hóa code đưa vào comments</span></a></b></div>');
    var emo = function(emo, imgRep, emoKey) {
        $(emoRange)
            .each(function() {
            $(this)
                .html($(this)
                .html()
                .replace(/<br>:/g, "<br> :")
                .replace(/<br>;/g, "<br> ;")
                .replace(/<br>=/g, "<br> =")
                .replace(/<br>\^/g, "<br> ^")
                .replace(emo, " <img style='max-height:24px' src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"));
        });
    };
    emo(/\s:\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgowEX8HVUcsr8vYQojns3gTkxe6Y82eKn5Hru6fmT7iAvz34s9PGJvD3Q3fB1bX0bRslFsZQr-KUfSpbFlZHJzjoctu69jLK5RSaC95WSYUl7-R3ybShy2YrcjCzFh2WVlaCu1mo-B_nw/s1600/38-namkna-blogspot-com.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjndIHDHDaKUD0ELptc6CodJ-lu8ekmekWokRkiatIS7YwnEIpQfV3cfsOQ6hpCyrQDDCgHZ881ivfWQ5hrtOhh51azQIw5Wojyno-L0TzEokzv3W4ju31Hp3af1TQN_ooovtt_WQId5hI/s1600/39-namkna-blogspot-com.gif", ";((");
emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZC_m7e8-2jJmpRw_J_B1NPOptauaZcUMsCtEo_igNacAFGMFur6i2UCyoGmNmUCx_cBSoQsFr5K8gy5B8csVLwxwBXIuUSgZ_uT68DDu6FLjXzJydhZ7NHmh4NRdW1kwi1AeUXhM0HLc/s1600/01-namkna.gif", ":)");
emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggDQMqY5Du8r7so4BtmSyxr-Url4Uz8X5hwmFOd_z-3Yoi6UEWleVi3pZS7awVEZzbdpruSsTF77ARLEl5c4jkyYP5xOioCW5skCWMNh2wiUzX-k_OoBLHm7mOCeC1DB2QyD25gHwZong/s1600/02-namkna.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAucL_TywKrlrERx-O1zVHvcFoyGMcmHcVT95Ql-kMjCWU0scx5vd52QlNrQKGLpZBPel4H-jR7psrvDMGpQhSr0w83_SYA_cO90q3Dyq5s_s0RuVHGBSJR8nteNKof65C46QR2woc12s/s1600/03-namkna1.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-PIiCvdpsoTEW6Nqho1pUFUopL0On-3QoliqHFOqS7zAEX0e_bj-_4BPavhVxwIHs7Iar85iN9jEQ_iDix3k0JzYP8lDaHI99hyphenhyphend5fth-67P2ByNQoOH00EIosnNBhrokDTqyCcueTVA/s1600/04-namkna.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIIHCXIky6_0xlXifhiP2fjm3dkoSOJgWQWv0aXOedZbVxR-OA-KLeguoeqg8Nu5mh1oj4SCPTwrh0LhmJyTmcLA11k0PsCiRmnO4fXRwwflTrOZZzGn740sFoStbYP7_2-HUcZl-dX7E/s1600/05-namkna.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIJ-Hhr2uMDtHyphAuE-shFHmtWJB-h0N2qUpeZkoeIJRtOXvA6eBFNqOBDJgAg0H8xQkQuL5dFuV-HHNXLVToJcby6Xr2qDTqqYVA8rAjPLX8K26OOCkTtgpN7Q75BOw12RbkAaN0q-s/s1600/07-namkna.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS2UZDxTfoJsaOYU9PGM2ojHKb5NxNS3Sq5-Df0DIlekNA063YhyE4U44Leqy25QbYUDzW2ICBF70vdmwpqwnrVlndYI7E7KMkvI9PoW-8a8xKomf0wFYvay_cQ6vddiWeUxDEwLIiXQk/s1600/08-namkna.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCU1jpXsmYo0IX16aQK3Athdh2HAFkasjcqUAqHmsOnw-EXQwGr_nL6st4fHvRrl9GVsJXvYH7VtAZCa6b2bZZogXJQdV0CZ6UJVUPnS6tRote68AFJ_FAM0E2hos1JpPMzbxshwJMNf0/s1600/09-namkna-blogspot-com.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOqiz7Wyx2SWwNBeAL-b4UyDydwPNxlkqDfXsmaTwls-6YO-PXJpFAWm51ezto0juT-l7oODNsCKcInkmdQHl09iJaQIyKl3swVa_wKz-J4JbYgYrSdaDNU_M-Vvi-fDZWRrGGHxVdXSI/s1600/10-namkna-blogspot-com.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqC9-Q60Iu5KDIOepgFYaxnpa_FFXapaQBM_SJwC4jW4SqNO-D1LMI01GQRmCkQwohVVkWZubxVwqz7cYNrIV-FsewagJaa9W9FGtglG-wtbwswxdHsgaFN8EjOwkAMoQFOuHQnDX-1E8/s1600/11-namkna-blogspot-com.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpZTxJEOxc4LIP7zzPXCgu-Pt9GtH6spDe3JH7_RYudnC2r3ZhbxjTg3A84QFOzxgGTalrPahegvFNpkoNM9TMJdgcO4Goe5apHmekfjS-mQnAMiNf8eKazF0Q1RsTteWnV6ity3Z8up4/s1600/12-namkna-blogspot-com.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuHcK_Jy20OP_kY05a_qmf9a7GDpKSOdSAt2SVchD4C4BXeT2hxU-prPZRG6KwvWouelW79813o57jVlKKzlKLHm4DXOy75yeYxgsy32XBPP5i16K-WJCQmpEH-avV57ca5Ge_Nsq3eZc/s1600/13-namkna-blogspot-com.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE0_Uz1LR4rDdFTJIlCvPeiyVspkMi71eVsQqBARZx4IZBlp2M8Nk7ED4RAZuAPDCZ_byOtIp8472GpiqFrwEGI5yc4qeHceFPUTJACmk1ihRqVkR30DuSmnrJ9oRErJwnP0ir6LrYMA/s1600/14-namkna-blogspot-com.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrFuclZiqTzIuD_e1AmCCVHWjm_UjyKme7O81ZWyzQ6x1efucyl4JglaHCeoQDD8bCZKkhhXuVqTiAyQVVgyAg0X1jyQiYo4pE1I4U7TTJrh1VrfpyJEjVuEcBvLtRZnB1sfq5wNSiPOA/s1600/15-namkna-blogspot-com.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicukvahyg789q6HLmyNtt16ClUwFIoAbNN15bqe2rPXyS6Ky4RAiPM3z-fNdsGq1A6bjHfSAhaqssV-r3VALup9eNPbz3yr8TKAjZTn4y362_RFQ1SoznF4GHdT5xP7IjgUR4ocFrOtDw/s1600/16-namkna-blogspot-com.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkWR3UY2M929wDmV4sZoNQQfutFBN-4fGxMFAmhy-KBnNbysJCerY_QhU6G3D6esARDxIC9dn9Eie8Anh8nfenTblSJFW4jzE8uJT9VeA49tfNfq2ng_L1j-c3huok9aCR7hM3hx0hy3E/s1600/17-namkna-blogspot-com.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXynPqLevIjcNEoS6pBXvpizKEHRsOXlHw0lcIHLf5NpmC6LAxf5Bue7DSxCaiyXR6VpMH1e3hVyjpeFNXjymlh1WYg5TAqf0_mEhPpTdZP4GRaYQebhCtuCoZKUhXAk5yPI52ZjStWjQ/s1600/18-namkna-blogspot-com.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJAQFVkF-ksA3hxivIwv5FDDtJu9e4unu0RVQAzNsMPLhQC8aP5xs2zR-l57OwWmP5UWaioedzAUuxkZClLsUE8G2mJ-rB9UJGh6Yy05LCR2q_VIVZdvMvxqld1-qWhXdiZVNy_pacRB8/s1600/19-namkna-blogspot-com.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZMTnskv1pX61cKcapBJVhZHyKnHwGhnPEv89xleW4wfTF0LM_2hKnBgczYrqx80WOIVn0D-9I9ySF7LgRvssu5caLy8sY32FPzsrC2U_FBFGZ2Pzlw45HqO35uyyKBPmCUQIeBV00X2o/s1600/20-namkna-blogspot-com.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyzbbRYPpWTBTMnctO97ExiSn3PVeE1dMVJ3q_faYRbhxKOChhxjpRkzH3aWFhFg8aowMjKGnz-dGwMgBuipNqf7u7DQ80a_ALL1chSEGvahxnap-VQSdZgPUvic3jSLYYFANioMxxBDU/s1600/21-namkna-blogspot-com.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKe4-UKeAJlbg6kKImzQ4T3IpfJwyB28_fDlAZLQBMgcnZA1tzRyrJYDdVJAF-eaTga_jAaUiO7YEEQj9HFNtdFzvHaqE3ND_8mKbrVcUclvyzct-rWTMmSefNLAbvZyyePaNYCT2GTas/s1600/22-namkna-blogspot-com.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg05TFn6SuTxJ81Db_bBKcdGV3WXhmSta1ht74BWztPYFOeW4_KzFW9EVyuVTUeE-a9oXolPf60BpFw_s9weI0aPQvw3aqw8s2BE0FbzXp92C71mVDHGLWysw8fvTUhzJdBXXxuDNrplHs/s1600/23-namkna-blogspot-com.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7OgopI64HFcldsxPLsv0-riUOk8JeO60NN3O6qnFRx8IPP3C2xeJPdU5vZAcfJkkDnJ2_5xwNp1FOsDZbuCFfgSQ-7OnHw9bwdE2IlWH1Sm3P4ip2lQQuluwfaV9ECHVhkiDfwp7yYio/s1600/24-namkna-blogspot-com.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaHFVISL8RiksLCJAn9hakpf50ciUCtCI-2hZdCNScz_5OxDX1FA4q1KSzAlt04TRnh0pbfDz_HG2SZOGmla0Sb-cbxcXGILdEChOpNvczR4LZjJm3wPtjjMTfRwGjXtAjhESfI5SCu7c/s1600/25-namkna-blogspot-com.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgukU6DoR1BriwC2kBVDEqqLWimrU8AHmq3WuUwMej93-VtlMZsr_BVWLeCR9h9iZO649HY3t81GtzpLjEjg82Dy2gDPivICBAtgs29QJIySQzWZGbeJwYtEHAvsZzYyWAd9E92wTOp7IM/s1600/26-namkna-blogspot-com.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcK3D2srXq02_uSWIDR_xnHr-nc4YVwd7uyyVokKmbeAiyJjeS-nhl-zoIP9xg4H8Cu-QyZ4AmIP8W3zkTtx7c0w3EzNKG_rvGYy1d9DAyLM9mFCJbMSeb-L1Lbe1lbfRAW3RsEc0P78/s1600/27-namkna-blogspot-com.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkGj9vf9qeG7UspyCku70oue_rGSSbWhtFJV9eisAWrDx2Gmxq32EiwtfNhlnYz_nDLf1pc6VgQyaErYv1G2PEh7_qDOlxeO3qOdKMm9opl3i0sPpntgHJBkmidAt7dWKTAU67abblO5Q/s1600/28-namkna-blogspot-com.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMcxxpU1tqToL1SSKdpdBJ1WAkLoxBMq5VZY_h4xwg6GsqfsC7JEV_iwiJBA2dzAzAHZc5ZFYRdUrxIm-eYXbPBr7K2o6tSy2KKqVd6_dzVthN6aG6ZKVIbPlWrmTy87A_o9ajPpUlYYU/s1600/29-namkna-blogspot-com.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP20bMWlRjf6V-hPP5_PzEPwQwTQ1KWUUAzmOP6fADnX8TUaEq4qsSAIALicRdQuU3Eli1rRLRCKH676O-w9K2bgvLIDwaVNhQzC87Lj_JqFfbzu-eqr7ZmVq7EPVrdYGEZkL-cK1NzAk/s1600/30-namkna-blogspot-com.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-jhk5y31gUF7oZ77a-CFNygF_XKQDJwHVX8J5ZEV9zaaMBYO0cplB8Dva7ssd44Set2lpXoPq1RAUGDn-AJtUOk57gIg_naSPClZKAmJA3Pr2HyxzY6pFsHVqvlzEDzkfFUX9ijmYPB8/s1600/31-namkna-blogspot-com.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip4AeBVlD_dTAdq86xqFCZHht8ndY3knTpF3cecN7hBUO1CyUD-KfyUTvAMEP4WGI-M2I3LGLecgt4A7yLpXIxCS44Sg-7J-rU8A-lWLazr-E2mFmgyYvFwu_ll2mBYl5aa8_0ruzbFcg/s1600/32-namkna-blogspot-com.gif", "cheer");
    emo(/\s\(s\m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpc_Txwg954yL4felloatNSRVKbURdxJqv1tfRnF52FAmWBeWYX7RAM3JQPV7SONecBUKwySDzPptbMUu-dj2BYVIDOZB6T-vc9K3irSePeDA3Gl4vPu5c0__fcRATStXUl-xRJHinM_Y/s1600/33-namkna-blogspot-com.gif", "(sm)");
    emo(/\s\(f\u\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO3nDFxkmIUDXTm9ncSyoDAEUdoBsC1uFJn-jC6Rr0IsLSDeGZKllQX1kjkwXo3Z42K6ajpLpVAR84SEkvIQ_MJ8CNrrze3-K5fjyb1TamB36tS4BBiVmIOIYtDCT1KDNh4wuWkwIVjAw/s1600/34-namkna-blogspot-com.gif", "(fu)");
    emo(/\s\(k\u\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYNdOiI3Vhf7me4JQENwzdKeGWMfWO9lShtHb9uqE8eR65gPzWx9IbkzV6KP-zON-STsOqqryB_8Lo0rmkc1uCbfflIKkTtRJHIlH3P_VpBgcGifCsVp3csaR9J_vmTk5rsHdTxlVNcy4/s1600/35-namkna-blogspot-com.gif", "(ku)");
    emo(/\s\(b\g\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAA1gGn8npFkTYSjSaXhF6Q2aMc2OCBtOi5jANWON8r7HhQh1Bkv5GP-Jd-ZBKTLbYjgS39VYQhPYHyBVRCGYirNE-my4CavhilSsv-hPSE1-xbduEqNHYC20xQSffrwv3D0Q89rbH0pw/s1600/36-namkna-blogspot-com.gif", "(bg)");
    emo(/\s\(l\o\l\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ca_cnpM0VyKZGokOo7CxHqtUWVXJKgoADh1m8hNA2aVKv0D8Nqf9QhRZB7Blqfc6hhMH4uGpqP_DYZBQ9hHsTO1ml7-OD_-Xo103o61AlwrPS80gjfwTgs_D8jxZWardrv9cIJHJKcE/s1600/37-namkna-blogspot-com.gif", "(lol)");

// Show alert one times!
    $('div.emoWrap')
        .one("click", function() {
        if (emoMessage) {
            alert(emoMessage);
        }
    });
    // Click to show the code!
  $('.emo')
        .css('cursor', 'pointer')
        .live("click", function(e) {
        $('.emoKey')
            .remove();
        $(this)
            .after('<input class="emoKey" type="text" size="' + this.alt.length + '" value=" ' + this.alt + '" />');
$('.emoKey')
            .trigger("select");
e.stopPropagation();
    });
    $('.emoKey')
        .live("click", function() {
        $(this)
            .focus()
            .select();
    });
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
 $('.separator a').attr({'class':'fancy','data-fancybox-group':'gallery'});
$('.fancy')
.fancybox({padding: 5, openEffect : 'elastic', openSpeed  : 400, closeEffect : 'elastic', closeSpeed  : 400, closeClick : true, helpers : {overlay : null}});
});
//]]>
</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
 $('.separator a').attr({'class':'fancy','data-fancybox-group':'gallery'});
$('.fancy')
.fancybox({padding: 5, openEffect : 'elastic', openSpeed  : 400, closeEffect : 'elastic', closeSpeed  : 400, closeClick : true, helpers : {overlay : null}});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "Chọn mặt cười sau đó copy xuống khung comment";
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
// Emoticon bar before comment-form
$(function() {
    $(putEmoAbove)
        .before('<div style="text-align:center" class="emoWrap"> :) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :&gt;) (o) [-( :-? (p) :-s (m) 8-) :-t :-b  b-( :-# =p~  $-) (b) (f) x-) (k) (h) (c) cheer  (sm)  (fu)  (ku)  (bg)  (lol)  <br/><b><a href="javascript:openup_parseHTML()" rel="nofollow" title="Mã hóa code trước khi đưa vào bình luận"><span class="text_style">Mã hóa code đưa vào comments</span></a></b></div>');
    var emo = function(emo, imgRep, emoKey) {
        $(emoRange)
            .each(function() {
            $(this)
                .html($(this)
                .html()
                .replace(/<br>:/g, "<br> :")
                .replace(/<br>;/g, "<br> ;")
                .replace(/<br>=/g, "<br> =")
                .replace(/<br>\^/g, "<br> ^")
                .replace(emo, " <img style='max-height:24px' src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"));
        });
    };
    emo(/\s:\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgowEX8HVUcsr8vYQojns3gTkxe6Y82eKn5Hru6fmT7iAvz34s9PGJvD3Q3fB1bX0bRslFsZQr-KUfSpbFlZHJzjoctu69jLK5RSaC95WSYUl7-R3ybShy2YrcjCzFh2WVlaCu1mo-B_nw/s1600/38-namkna-blogspot-com.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjndIHDHDaKUD0ELptc6CodJ-lu8ekmekWokRkiatIS7YwnEIpQfV3cfsOQ6hpCyrQDDCgHZ881ivfWQ5hrtOhh51azQIw5Wojyno-L0TzEokzv3W4ju31Hp3af1TQN_ooovtt_WQId5hI/s1600/39-namkna-blogspot-com.gif", ";((");
emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZC_m7e8-2jJmpRw_J_B1NPOptauaZcUMsCtEo_igNacAFGMFur6i2UCyoGmNmUCx_cBSoQsFr5K8gy5B8csVLwxwBXIuUSgZ_uT68DDu6FLjXzJydhZ7NHmh4NRdW1kwi1AeUXhM0HLc/s1600/01-namkna.gif", ":)");
emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggDQMqY5Du8r7so4BtmSyxr-Url4Uz8X5hwmFOd_z-3Yoi6UEWleVi3pZS7awVEZzbdpruSsTF77ARLEl5c4jkyYP5xOioCW5skCWMNh2wiUzX-k_OoBLHm7mOCeC1DB2QyD25gHwZong/s1600/02-namkna.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAucL_TywKrlrERx-O1zVHvcFoyGMcmHcVT95Ql-kMjCWU0scx5vd52QlNrQKGLpZBPel4H-jR7psrvDMGpQhSr0w83_SYA_cO90q3Dyq5s_s0RuVHGBSJR8nteNKof65C46QR2woc12s/s1600/03-namkna1.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-PIiCvdpsoTEW6Nqho1pUFUopL0On-3QoliqHFOqS7zAEX0e_bj-_4BPavhVxwIHs7Iar85iN9jEQ_iDix3k0JzYP8lDaHI99hyphenhyphend5fth-67P2ByNQoOH00EIosnNBhrokDTqyCcueTVA/s1600/04-namkna.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIIHCXIky6_0xlXifhiP2fjm3dkoSOJgWQWv0aXOedZbVxR-OA-KLeguoeqg8Nu5mh1oj4SCPTwrh0LhmJyTmcLA11k0PsCiRmnO4fXRwwflTrOZZzGn740sFoStbYP7_2-HUcZl-dX7E/s1600/05-namkna.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIJ-Hhr2uMDtHyphAuE-shFHmtWJB-h0N2qUpeZkoeIJRtOXvA6eBFNqOBDJgAg0H8xQkQuL5dFuV-HHNXLVToJcby6Xr2qDTqqYVA8rAjPLX8K26OOCkTtgpN7Q75BOw12RbkAaN0q-s/s1600/07-namkna.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS2UZDxTfoJsaOYU9PGM2ojHKb5NxNS3Sq5-Df0DIlekNA063YhyE4U44Leqy25QbYUDzW2ICBF70vdmwpqwnrVlndYI7E7KMkvI9PoW-8a8xKomf0wFYvay_cQ6vddiWeUxDEwLIiXQk/s1600/08-namkna.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCU1jpXsmYo0IX16aQK3Athdh2HAFkasjcqUAqHmsOnw-EXQwGr_nL6st4fHvRrl9GVsJXvYH7VtAZCa6b2bZZogXJQdV0CZ6UJVUPnS6tRote68AFJ_FAM0E2hos1JpPMzbxshwJMNf0/s1600/09-namkna-blogspot-com.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOqiz7Wyx2SWwNBeAL-b4UyDydwPNxlkqDfXsmaTwls-6YO-PXJpFAWm51ezto0juT-l7oODNsCKcInkmdQHl09iJaQIyKl3swVa_wKz-J4JbYgYrSdaDNU_M-Vvi-fDZWRrGGHxVdXSI/s1600/10-namkna-blogspot-com.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqC9-Q60Iu5KDIOepgFYaxnpa_FFXapaQBM_SJwC4jW4SqNO-D1LMI01GQRmCkQwohVVkWZubxVwqz7cYNrIV-FsewagJaa9W9FGtglG-wtbwswxdHsgaFN8EjOwkAMoQFOuHQnDX-1E8/s1600/11-namkna-blogspot-com.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpZTxJEOxc4LIP7zzPXCgu-Pt9GtH6spDe3JH7_RYudnC2r3ZhbxjTg3A84QFOzxgGTalrPahegvFNpkoNM9TMJdgcO4Goe5apHmekfjS-mQnAMiNf8eKazF0Q1RsTteWnV6ity3Z8up4/s1600/12-namkna-blogspot-com.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuHcK_Jy20OP_kY05a_qmf9a7GDpKSOdSAt2SVchD4C4BXeT2hxU-prPZRG6KwvWouelW79813o57jVlKKzlKLHm4DXOy75yeYxgsy32XBPP5i16K-WJCQmpEH-avV57ca5Ge_Nsq3eZc/s1600/13-namkna-blogspot-com.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE0_Uz1LR4rDdFTJIlCvPeiyVspkMi71eVsQqBARZx4IZBlp2M8Nk7ED4RAZuAPDCZ_byOtIp8472GpiqFrwEGI5yc4qeHceFPUTJACmk1ihRqVkR30DuSmnrJ9oRErJwnP0ir6LrYMA/s1600/14-namkna-blogspot-com.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrFuclZiqTzIuD_e1AmCCVHWjm_UjyKme7O81ZWyzQ6x1efucyl4JglaHCeoQDD8bCZKkhhXuVqTiAyQVVgyAg0X1jyQiYo4pE1I4U7TTJrh1VrfpyJEjVuEcBvLtRZnB1sfq5wNSiPOA/s1600/15-namkna-blogspot-com.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicukvahyg789q6HLmyNtt16ClUwFIoAbNN15bqe2rPXyS6Ky4RAiPM3z-fNdsGq1A6bjHfSAhaqssV-r3VALup9eNPbz3yr8TKAjZTn4y362_RFQ1SoznF4GHdT5xP7IjgUR4ocFrOtDw/s1600/16-namkna-blogspot-com.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkWR3UY2M929wDmV4sZoNQQfutFBN-4fGxMFAmhy-KBnNbysJCerY_QhU6G3D6esARDxIC9dn9Eie8Anh8nfenTblSJFW4jzE8uJT9VeA49tfNfq2ng_L1j-c3huok9aCR7hM3hx0hy3E/s1600/17-namkna-blogspot-com.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXynPqLevIjcNEoS6pBXvpizKEHRsOXlHw0lcIHLf5NpmC6LAxf5Bue7DSxCaiyXR6VpMH1e3hVyjpeFNXjymlh1WYg5TAqf0_mEhPpTdZP4GRaYQebhCtuCoZKUhXAk5yPI52ZjStWjQ/s1600/18-namkna-blogspot-com.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJAQFVkF-ksA3hxivIwv5FDDtJu9e4unu0RVQAzNsMPLhQC8aP5xs2zR-l57OwWmP5UWaioedzAUuxkZClLsUE8G2mJ-rB9UJGh6Yy05LCR2q_VIVZdvMvxqld1-qWhXdiZVNy_pacRB8/s1600/19-namkna-blogspot-com.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZMTnskv1pX61cKcapBJVhZHyKnHwGhnPEv89xleW4wfTF0LM_2hKnBgczYrqx80WOIVn0D-9I9ySF7LgRvssu5caLy8sY32FPzsrC2U_FBFGZ2Pzlw45HqO35uyyKBPmCUQIeBV00X2o/s1600/20-namkna-blogspot-com.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyzbbRYPpWTBTMnctO97ExiSn3PVeE1dMVJ3q_faYRbhxKOChhxjpRkzH3aWFhFg8aowMjKGnz-dGwMgBuipNqf7u7DQ80a_ALL1chSEGvahxnap-VQSdZgPUvic3jSLYYFANioMxxBDU/s1600/21-namkna-blogspot-com.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKe4-UKeAJlbg6kKImzQ4T3IpfJwyB28_fDlAZLQBMgcnZA1tzRyrJYDdVJAF-eaTga_jAaUiO7YEEQj9HFNtdFzvHaqE3ND_8mKbrVcUclvyzct-rWTMmSefNLAbvZyyePaNYCT2GTas/s1600/22-namkna-blogspot-com.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg05TFn6SuTxJ81Db_bBKcdGV3WXhmSta1ht74BWztPYFOeW4_KzFW9EVyuVTUeE-a9oXolPf60BpFw_s9weI0aPQvw3aqw8s2BE0FbzXp92C71mVDHGLWysw8fvTUhzJdBXXxuDNrplHs/s1600/23-namkna-blogspot-com.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7OgopI64HFcldsxPLsv0-riUOk8JeO60NN3O6qnFRx8IPP3C2xeJPdU5vZAcfJkkDnJ2_5xwNp1FOsDZbuCFfgSQ-7OnHw9bwdE2IlWH1Sm3P4ip2lQQuluwfaV9ECHVhkiDfwp7yYio/s1600/24-namkna-blogspot-com.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaHFVISL8RiksLCJAn9hakpf50ciUCtCI-2hZdCNScz_5OxDX1FA4q1KSzAlt04TRnh0pbfDz_HG2SZOGmla0Sb-cbxcXGILdEChOpNvczR4LZjJm3wPtjjMTfRwGjXtAjhESfI5SCu7c/s1600/25-namkna-blogspot-com.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgukU6DoR1BriwC2kBVDEqqLWimrU8AHmq3WuUwMej93-VtlMZsr_BVWLeCR9h9iZO649HY3t81GtzpLjEjg82Dy2gDPivICBAtgs29QJIySQzWZGbeJwYtEHAvsZzYyWAd9E92wTOp7IM/s1600/26-namkna-blogspot-com.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcK3D2srXq02_uSWIDR_xnHr-nc4YVwd7uyyVokKmbeAiyJjeS-nhl-zoIP9xg4H8Cu-QyZ4AmIP8W3zkTtx7c0w3EzNKG_rvGYy1d9DAyLM9mFCJbMSeb-L1Lbe1lbfRAW3RsEc0P78/s1600/27-namkna-blogspot-com.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkGj9vf9qeG7UspyCku70oue_rGSSbWhtFJV9eisAWrDx2Gmxq32EiwtfNhlnYz_nDLf1pc6VgQyaErYv1G2PEh7_qDOlxeO3qOdKMm9opl3i0sPpntgHJBkmidAt7dWKTAU67abblO5Q/s1600/28-namkna-blogspot-com.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMcxxpU1tqToL1SSKdpdBJ1WAkLoxBMq5VZY_h4xwg6GsqfsC7JEV_iwiJBA2dzAzAHZc5ZFYRdUrxIm-eYXbPBr7K2o6tSy2KKqVd6_dzVthN6aG6ZKVIbPlWrmTy87A_o9ajPpUlYYU/s1600/29-namkna-blogspot-com.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP20bMWlRjf6V-hPP5_PzEPwQwTQ1KWUUAzmOP6fADnX8TUaEq4qsSAIALicRdQuU3Eli1rRLRCKH676O-w9K2bgvLIDwaVNhQzC87Lj_JqFfbzu-eqr7ZmVq7EPVrdYGEZkL-cK1NzAk/s1600/30-namkna-blogspot-com.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-jhk5y31gUF7oZ77a-CFNygF_XKQDJwHVX8J5ZEV9zaaMBYO0cplB8Dva7ssd44Set2lpXoPq1RAUGDn-AJtUOk57gIg_naSPClZKAmJA3Pr2HyxzY6pFsHVqvlzEDzkfFUX9ijmYPB8/s1600/31-namkna-blogspot-com.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip4AeBVlD_dTAdq86xqFCZHht8ndY3knTpF3cecN7hBUO1CyUD-KfyUTvAMEP4WGI-M2I3LGLecgt4A7yLpXIxCS44Sg-7J-rU8A-lWLazr-E2mFmgyYvFwu_ll2mBYl5aa8_0ruzbFcg/s1600/32-namkna-blogspot-com.gif", "cheer");
    emo(/\s\(sm\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpc_Txwg954yL4felloatNSRVKbURdxJqv1tfRnF52FAmWBeWYX7RAM3JQPV7SONecBUKwySDzPptbMUu-dj2BYVIDOZB6T-vc9K3irSePeDA3Gl4vPu5c0__fcRATStXUl-xRJHinM_Y/s1600/33-namkna-blogspot-com.gif", "(sm)");
    emo(/\s\(f\u\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO3nDFxkmIUDXTm9ncSyoDAEUdoBsC1uFJn-jC6Rr0IsLSDeGZKllQX1kjkwXo3Z42K6ajpLpVAR84SEkvIQ_MJ8CNrrze3-K5fjyb1TamB36tS4BBiVmIOIYtDCT1KDNh4wuWkwIVjAw/s1600/34-namkna-blogspot-com.gif", "(fu)");
    emo(/\s\(k\u\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYNdOiI3Vhf7me4JQENwzdKeGWMfWO9lShtHb9uqE8eR65gPzWx9IbkzV6KP-zON-STsOqqryB_8Lo0rmkc1uCbfflIKkTtRJHIlH3P_VpBgcGifCsVp3csaR9J_vmTk5rsHdTxlVNcy4/s1600/35-namkna-blogspot-com.gif", "(ku)");
    emo(/\s\(b\g\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAA1gGn8npFkTYSjSaXhF6Q2aMc2OCBtOi5jANWON8r7HhQh1Bkv5GP-Jd-ZBKTLbYjgS39VYQhPYHyBVRCGYirNE-my4CavhilSsv-hPSE1-xbduEqNHYC20xQSffrwv3D0Q89rbH0pw/s1600/36-namkna-blogspot-com.gif", "(bg)");
    emo(/\s\(l\o\l\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ca_cnpM0VyKZGokOo7CxHqtUWVXJKgoADh1m8hNA2aVKv0D8Nqf9QhRZB7Blqfc6hhMH4uGpqP_DYZBQ9hHsTO1ml7-OD_-Xo103o61AlwrPS80gjfwTgs_D8jxZWardrv9cIJHJKcE/s1600/37-namkna-blogspot-com.gif", "(lol)");
 
// Show alert one times!
    $('div.emoWrap')
        .one("click", function() {
        if (emoMessage) {
            alert(emoMessage);
        }
    });
    // Click to show the code!
  $('.emo')
        .css('cursor', 'pointer')
        .live("click", function(e) {
        $('.emoKey')
            .remove();
        $(this)
            .after('<input class="emoKey" type="text" size="' + this.alt.length + '" value=" ' + this.alt + '" />');
$('.emoKey')
            .trigger("select");
e.stopPropagation();
    });
    $('.emoKey')
        .live("click", function() {
        $(this)
            .focus()
            .select();
    });

});
//]]>
</script>
</b:if>

<div class='cleared'/>
<script type='text/javascript'>
function openup_parseHTML() { window.open(&quot;http://namkna.blogspot.com/p/code-convert-for-blogspot-chuyen-doi.html&quot;, &quot;followblog&quot;, &quot;height=700, width=630, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no&quot; ); }
</script>

5- Lưu mẫu lại.

- Lúc này khung comments của bạn đã xuất hiện các biểu tượng mặt cười nhưng chưa di chuyển khi Trả Lời comments nên không thuận tiện trong việc chèn mặt cười vào comment.

Tùy biến cho mẫu threaded comment của blogger.

- Bước tiếp theo sẽ giúp cho khung mặt cười trên di chuyển theo nhận xét.
1- Vào Mẫu (Template) => Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Chọn Mở rộng tiện ích mẫu ( Expand Template Widgets)
1- Tìmđoạn code như bên dưới.

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
   </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

- Thêm vào sau thẻ <b:else/> (phần mình tô màu xanh) đoạn code bên dưới:

<div id='threaded-comment-form'>

- Thêm vào trước thẻ </b:if> (phần mình tô màu xanh) đoạn code bên dưới:

</div>

- Xem hình minh họa dưới để thấy rõ hơn:

2- Tìm đoạn code sau:

document.getElementById(domId).insertBefore(replybox, null);

- Tahy thế nó thành đoạn code bên dưới:

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

3- Lưu mẫu của bạn lại và xem kết quả nha.

Theo: Troll VL

EnglishBasis.Com

Thứ Ba, 23 tháng 7, 2013

Chèn bộ mặt cười (Emoticons) dạng input cho comment của blogspot style 2

Chèn bộ mặt cười (Emoticons) dạng input cho comment của blogspot style 2

Làm thế nào để cài đặt Emoticons cho blogger

Tùy biến cho mẫu threaded comment của blogger.

Không có nhận xét nào:

Đăng nhận xét

Bài đăng phổ biến