Chèn bộ mặt cười giống Troll VL vào khung comments blogger

Đây là câu hỏi của bạn Pragma Tism 

Mình xin được chia sẻ cho mọi người bộ mặt cười mà Troll VL đang sử dụng 
Xem DemoBạn hãy thực hiện lần lượt theo các bước hướng dẫn đơn giản bên dưới để thêm bộ mặt cười vào khung comment của blog nhé!


Chèn biểu tượng mặt cười cho comments blogger
Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML

Bước 2: Mở rộng mẫu tiện ích

Bước 3: 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 form 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/AVvXsEjbai6N9hryOD-KmBhP83LD0el_fCZvY_x0v4LlwBqpFVsd8v85OW0v1GY8KAiSa0kxwT4s1lBvwIMt-3Q-ENeQnNw5yAm0U-wjHwbH12lyeQhhDrznZICH3jTFpmGc5IHXRqG5NusQ7Gc/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDktmaeRgbHyEA6qmYDasK5G6kLl6nspgAZW62UkF1tKnh7nomCaV8UiCgM7pVvY3AEle3VrxCGtGIcQw5CxFQtQ48Ra5rsceqGLoU6cFpCF2UyQK-Rb5RuGPLocU9H_N15jB-cmMa7iU/s47/06.gif", ";((");
emo(/\s:\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/01.gif", ":)");
emo(/\s:-\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/03a.gif", "=))");
    emo(/\s;\(+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/04.gif", ";(");
    emo(/\s;-\(+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/05.gif", ";-(");
    emo(/\s:d/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/7.gif", ":d");
    emo(/\s:-d/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/09.gif", "@-)");
    emo(/\s:p/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/10.gif", ":p");
    emo(/\s:o/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/11.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/12.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/14.gif", "[-(");
    emo(/\s:-\?/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/16.gif", "(p)");
    emo(/\s:-s/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/19.gif", "8-)");
    emo(/\s:-t/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/20.gif", ":-t");
    emo(/\s:-b/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/22.gif", "b-(");
    emo(/\s:-#/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/23.gif", ":-#");
    emo(/\s=p~/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/31.gif", "(c)");
    emo(/\scheer/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/32.gif", "cheer");
    emo(/\s\(s\m\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/green29.gif", "(sm)");
    emo(/\s\(f\u\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/soldier_baby15.gif", "(fu)");
    emo(/\s\(k\u\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/soldier_baby18.gif", "(ku)");
    emo(/\s\(b\g\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/soldier_baby21.gif", "(bg)");
    emo(/\s\(l\o\l\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/yahoo_24.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 form 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/AVvXsEjbai6N9hryOD-KmBhP83LD0el_fCZvY_x0v4LlwBqpFVsd8v85OW0v1GY8KAiSa0kxwT4s1lBvwIMt-3Q-ENeQnNw5yAm0U-wjHwbH12lyeQhhDrznZICH3jTFpmGc5IHXRqG5NusQ7Gc/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDktmaeRgbHyEA6qmYDasK5G6kLl6nspgAZW62UkF1tKnh7nomCaV8UiCgM7pVvY3AEle3VrxCGtGIcQw5CxFQtQ48Ra5rsceqGLoU6cFpCF2UyQK-Rb5RuGPLocU9H_N15jB-cmMa7iU/s47/06.gif", ";((");
emo(/\s:\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/01.gif", ":)");
emo(/\s:-\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/03a.gif", "=))");
    emo(/\s;\(+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/04.gif", ";(");
    emo(/\s;-\(+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/05.gif", ";-(");
    emo(/\s:d/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/7.gif", ":d");
    emo(/\s:-d/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/09.gif", "@-)");
    emo(/\s:p/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/10.gif", ":p");
    emo(/\s:o/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/11.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/12.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/14.gif", "[-(");
    emo(/\s:-\?/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/16.gif", "(p)");
    emo(/\s:-s/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/19.gif", "8-)");
    emo(/\s:-t/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/20.gif", ":-t");
    emo(/\s:-b/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/22.gif", "b-(");
    emo(/\s:-#/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/23.gif", ":-#");
    emo(/\s=p~/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/31.gif", "(c)");
    emo(/\scheer/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/32.gif", "cheer");
    emo(/\s\(sm\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/green29.gif", "(sm)");
    emo(/\s\(f\u\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/soldier_baby15.gif", "(fu)");
    emo(/\s\(k\u\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/soldier_baby18.gif", "(ku)");
    emo(/\s\(b\g\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/soldier_baby21.gif", "(bg)");
    emo(/\s\(l\o\l\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/yahoo_24.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://ma-hoa-trollvl.blogspot.com/&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>

Bước 4: Lưu lại template. 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. Bạn cần làm thêm các bước bên dưới để hoàn thiện tính năng này
Di chuyển các biểu tượng mặt cười theo khung nhận xét khi Trả lời (Reply)
Bước 1: Vẫn trong phần chỉnh sửa HTML bạn tìm thẻ <b:includable id='threaded-comment-form' var='post'> và ngay dưới thẻ bạn vừa tìm được bạn để ý đoạn code được bôi đen như hình bên dưới

• Trong đoạn code được bôi đen đó bạn chèn đoạn bên dưới thẻ <b:else/>

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

• Và trước thẻ đóng </b:if> của đoạn bôi đen bạn chèn thẻ code bên dưới vào

</div>

Đây là hình ảnh sau khi chèn 2 đoạn code trên

 Bước 2: Tìm đoạn code document.getElementById(domId).insertBefore(replybox, null); và thay thế bằng code dưới đây

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

Bước 3: Lưu lại template là hoàn tất

Update: Nếu không hiện mặt cười có thể template của bạn chưa có jQuery. Vậy chèn code bên dưới vào trước thẻ </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>