Tạo Hệ Thống Bình Luận Cho Blogspot Với Phong Cách Mới StarThảo-IT

Chào các bạn, ai đã chán với Thread comment và emotions Facebook chưa? Bạn nào chưa chán thì tiếp tục dùng đi nhé, còn nếu chán thì các bạn có thể dùng bộ emoticon khác nhé, cũng khá cute đấy 😉😉😉.
Demo:

Cũng khá đẹp phải không các bạn?
Nào , chúng ta bắt tay vào làm nhé.
Bước 1: Blogger -> Chủ Đề -> Chỉnh sửa HTML.
Bước 2:Các bạn tìm thẻ:  ]]></b:skin> và dán vào sau nó đoạn CSS sau:

<b:if cond='data:blog.pageType != &quot;index&quot;'> <style type='text/css'> /* Material Design Comments */ #comments{line-height:1.4em;margin:20px 0 0;position:relative;background:#fff;border:1px solid #ddd;padding:0 20px 20px 20px;} #comments h3{float:left;font-size:15px;line-height:50px;text-transform:capitalize;font-weight:normal;font-family:'Roboto',Josefin Sans, Arial;color:#fff}#comments h3 i{padding-right:10px}#comments li{padding:0} a.click-comment{float:right;font-weight:bold;text-transform:uppercase;position:absolute;top:20px;right:20px;display:inline-block;background:#22A65A;border:2px solid #22A65A;padding:8px 10px;font-size:13px;color:#fff} a.click-comment:hover{background:#fff;color:#22A65A} .comment-body-author{background:#0b433f;color:#008000;border:1px dotted #008000;margin:0;padding:0 0 0 10px;} .comment_share{color:#999;cursor: pointer;font-size:10px;line-height:1.5em;max-width:100%;font-weight:normal;padding-left:5px;} #comment_rep a:hover {text-decoration:none;color:#464646!important;} .comment_avatar{height:50px;width:50px;margin-top:15px;background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZF1hD2HPDVlNh1imY28WpRONRGhlQI7lsPgGzrL3s5ECToWzkyAjMIZlCo6P0Ij7MJtomwhfcCTll9oHsr3gF83p5YcwHuHY-NNVt2hqkaPOmcws9aug0ALP725CYiT8WRHwQDrH5VL4/w50-h50/noimage.png) no-repeat;float:left;margin-right:15px;overflow:hidden;padding:0;border-radius:99em} .comment_admin .comment_name:after {content:"";width:0;height:0;position:absolute;top:5px;right:0;border-width:5px;border-style:solid;border-color:#fff transparent transparent transparent;display:block;} .comment_name{color:#4a5764;font-size:11px;font-weight:normal;max-width:100%;text-decoration:none;margin:5px 0 0;text-transform:none; font-weight:normal;position:relative}.comment-menu {float: right;list-style:none;width:0;height:0} .comment_name a {font-size:11px;color:#666;text-decoration:none;font-family:'Roboto', Sans-Serif;font-weight:400} .comment_name a:hover {text-decoration:underline} .comment_body p{font-size:110%;line-height:1.4em;margin:0;padding:0 0 10px} .comment_body{padding:20px 20px 10px;position:relative;resize:none;min-width:3rem;max-width:35rem;background:#fff;color:#444;font-size:13px;border:1px solid #ddd;box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.07),0 1px 1px 0 rgba(0, 0, 0, 0.06);display:inline-block} .comment_body:after {content:"";width:0;height:0;position:absolute;top:0;right:100%;border-width:7px;border-style:solid;border-color:#fff #fff transparent transparent;display:block} .comment_body:before {content:"";width:0;height:0;position:absolute;top:-1px;left:-16px;border-width:8px;border-style:solid;border-color:#ddd #ddd transparent transparent;display:block} .no-comment {color:#fff;background:#FF0000;padding:10px;margin-top:10px;text-align:center;}.comment_intime {float:left;margin:10px 0;position:absolute;color:#aaa;bottom:0;left:5px} #comment_box{padding:0;background:none;position:relative;margin:20px 0} .comment-delete img{float:right;padding:7px;margin-left:5px;width:10px;margin-top:1px} .comment_date{color:#666;font-size:11px;line-height:25px;cursor:pointer;float:right} #comments .separate {color:#fff;font-size:15px;line-height:40px;padding-left:5px;padding-right:5px;}#comments .author-mark {background:#d2d2d2; color:white;border-radius:0;padding:2px 6px 2px 6px;font-size:15px;line-height:15px;}.comment-share{display:inline;}.comment-share li {display:inline;}.comment-share li.button a {background:#546472;color:white;padding:0 5px 2px 5px;border-radius:0;display:none;}.comment-share li.button:hover a {background:#272f37;}#comment_rep {margin-top:-27px;float:right;}.comment_child .comment_wrap {padding-left:40px} .comment_reply a{cursor:pointer;font-size:11px;line-height: 1.5em;font-weight: 400;padding:2px 14px;float:left;list-style:none;margin-right:20px;color:#aaa}.comment_reply a:hover{color:#000} .unneeded-paging-control{display:none}.comment-form {max-width:100%!important;margin-top:-15px !important}.comment_reply_form .comment-form {width:100%;}.comment_youtube{max-width:100%!important;width:400px;height:225px;display:block; padding-top:10px;padding-bottom:10px;}#respond {overflow:hidden;padding-left:10px;clear:both;}.comment_avatar * {max-width:100%!important;display:block;max-height:100%!important;width:50px!important;height:50px!important;margin-right:15px}.comment_child .comment_avatar, .comment_child .comment_avatar * {float:left;margin-right:15px;border-radius:100%}.comment_form a{ color:#2f6986;text-decoration:none}.comment_form a:hover {color:#2f6986;text-decoration:underline}.comment_author_flag {display:none} #showcommentmenu{font-size:20px;padding:10px 20px;border-radius:3px;color:#fff;float:right;margin:-8px -15px 0 0} #commentmenu{font-family:'Roboto',Arial;visibility:hidden;position:absolute;background:#fff;text-transform:none!important;list-style:none;right:35px;top:45px;padding:0;width:0;height:0;transition:all .5s cubic-bezier(0.07, 0.68, 0.35, 1.04);z-index:9;overflow:hidden;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)} #commentmenu li{width:100%} #commentmenu li a{padding:9px 15px;display:inline-block;width:100%;font-weight:400;color:#666!important;font-size:14px!important} #commentmenu li a:hover{background:#e1e1e1} #commentmenu.shows{visibility:visible;width:200px;height:79px} .bnm.shows{visibility:visible} .comment_admin .comment_author_flag{display:inline;background:none;font-size:11px;padding:0;margin-left:4px;color:#555;text-transform:uppercase} .menu-comment{background:#22A65A;overflow:hidden;margin-left:-20px;padding:0 20px;height:50px;line-height:50px;margin-right:-20px;border-bottom:2px solid #168947;box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 2px 2px 0 rgba(0,0,0,0.12)}.bnm{visibility:hidden}.comment_admin .comment_body:before{border-color:#ddd transparent transparent #ddd;right:-16px;left:initial!important}.comment_admin .comment_body:after{border-color:#fff transparent transparent #fff;left:100%}.comment_admin .comment_body{margin-left:0;margin-right:20px;float:right}.comment_admin .comment_avatar{float:right}.comment_admin .comment_date{float:left}.comment_admin .comment-delete img{float:left;margin:3px 0 0}.comment_admin .namamu{float:right;padding-right:15px}.comment_author_flag .fa{float:right;padding:4px}.comment_admin .comment_intime{float:right;right:5px;left:initial!important} #comment-editor{width:100% !important;margin-bottom:20px;position:relative;border:none} .comment-form{max-width:100%!important} .comment_arrow{display:block;position:relative;margin:0;padding:0} .comment_emo_list .item{float:left;width:40px;text-align:center;height:40px;margin:10px 10px 0 0} .comment_emo_list span{display:block;font-weight:bold;font-size:11px;letter-spacing:1px} .comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto} .comment_img {max-width:100%!important} .deleted-comment {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUvEaF-DB2KALpOGrMqBaI6emganH4iCwzz9KI781g4Ep-k1XkmNeX5rmDntyVHBSb4GJYo3UFirygFYicD_iTiTCIXlMaVVpn9cXMg0rSkPaIRbm0r59PBn00sa1kA4lOktscYoV3QM/s1600/tempat-sampah.png) no-repeat 2% 50%;color:#ccc;line-height: 22px;padding:8px 15px 8px 45px;margin:5px 0;display:block;border:1px solid #ddd;position:relative;font-size:13px} .comment-form p{position:relative;background:#fff;color:#333;margin-top:50px;font-size:14px;font-family:'Open Sans',Helvetica,Arial,sans-serif;line-height:1.5em;margin-bottom:20px;padding:15px;border:1px solid #ddd;transition:all .3s ease-out;} .comment-form p:after, .comment-form p:before{top:100%;left:9%;border:solid transparent; content:" ";height:0;width:0;position:absolute;pointer-events:none} .comment-form p:after{border-color:rgba(68,68,68,0);border-top-color:#fff;border-width:12px;margin-left:-12px} .comment-form p:before{border-color:rgba(221,221,221,0);border-top-color:#ddd;border-width:13px;margin-left:-13px;transition:all .3s ease-out} img.comment_emo{margin:0;padding:0;vertical-align:middle} #comments .pencet{color:#fff;margin-right:10px;padding:8px 15px;background-color:#2DCC70;font-size:12px;border-radius:3px;font-weight:400;text-transform:none;text-decoration:none;outline:none;font-family:'Roboto', Arial;cursor:pointer;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}#comments .pencet:hover{text-decoration:none;background-color:#22A65A}.comment_emo_list{display:none;clear:both;width:100%}img.comment_emo{margin:0;padding:0;vertical-align:middle;width:28px;height:28px}#postCommentSubmit {padding:10px!important}#allHolder{border:none!important}.small-button {color:#fff;margin-right:10px;padding:0;background:none;font-size:12px;font-weight:400;text-transform:none;transition:all .3s ease-in}.small-button a{color:#fff;margin-right:10px;padding:4px 15px;background-color:#009a5d;font-size:12px;font-weight:400;text-transform:none;border-radius:4px;text-decoration:none;outline:none;box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #3d4852;text-shadow:0px -1px 0px rgba(0,0,0,0.3);transition:all .3s ease-in}.small-button:hover {background:none;color:#fff;text-decoration:none}.small-button a:hover {background-color:#990000;color:#fff;text-decoration:none} @media screen and (max-width:684px){ .comment_child .comment_wrap{padding-left:0!important}.comment_body{width:70%!important}.comment_admin .comment_body{width:60%!important}} @media screen and (max-width:480px){ .comment_body{width:55%!important}.comment_admin .comment_body{width:50%!important}} </style> </b:if>

Nếu trong Blog của bạn có đoạn CSS nào của các hệ thống comment mà bạn đã thêm vào trước thì xóa hết đi nha!
Bước 3: Các bạn tìm đoạn code :  <b:includable id='comments' var='post'> , hãy thu gọn nó lại sẽ được đoạn code giống như vậy:  <b:includable id='comments' var='post'>...</includable> các bạn xóa hết cả đoạn này đi và thêm vào chỗ đó đoạn code sau:

<b:includable id='comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <div class='menu-comment'> <h3> <i class='fa fa-comments'/> <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if> </h3> <a class='ripple' href='javascript:;' id='showcommentmenu'><i class='fa fa-ellipsis-v'/></a> </div> <div id='commentmenu'> <li><a class='waves-effect' href='#comment-form' title='Add Comments'>Add Comments</a></li> <li><a class='showmore waves-effect' href='javascript:;' title='More Settings'>More Settings</a></li> </div> <b:if cond='data:post.allowComments'> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a> &#160; <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a> &#160; <data:post.commentRangeText/> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a> </span> </b:if> <div class='clear'/> <div id='comment_block'> <b:loop values='data:post.comments' var='comment'> <div data-level='0' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName'> <b:if cond='data:post.adminClass == data:comment.adminClass'> &lt;div class=&#39;comment_inner comment_admin&#39;&gt; <b:else/> &lt;div class=&#39;comment_inner&#39;&gt; </b:if> <b:if cond='data:comment.isDeleted'> <b:else/> <div id='comment_box'> <div class='comment_header'> <div class='comment_avatar'> <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/> </div> </div> <div class='comment_service'> <div class='comment_name'> <b:if cond='data:comment.authorUrl'> <a class='namamu' expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <b:if cond='data:comment.author == data:post.author'> <span class='comment_author_flag'><i class='fa fa-user'/></span> </b:if> </div> </div> <div class='comment_body'> <span class='comment_arrow'/> <p><data:comment.body/></p> <span class='bnm'> <a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'> <img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXTmSFmEKr1AVjoamLt8qGSi3kmV7fTnJwALUyU3-8oPXwiCkkLPFE5Er2ThyphenhyphenMBDRXLN1zxW2BpDV57JScEdJofBMF_syHqekzOWGsB2sClbJMTQQh6Sb_G1JButzN2ISbmqp3zguAEus/s1600/delete4.png' title='Delete Comment'/> </a> <a expr:href='data:comment.url' rel='nofollow' title='permalink'><span class='comment_date'><data:comment.timestamp/></span></a> </span> <div class='comment_intime'> <div class='comment_reply'> <a class='ripple' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>Reply</a></div> </div> <div class='clear'/> </div> <div class='clear'/> </div> </b:if> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'> <data:comment.body/> </span> </b:if> <div class='clear'/> &lt;/div&gt; <div class='clear'/> <div class='comment_child'/> <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/> </div> </b:loop> </div> <div class='clear'/> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a> &#160; <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a> &#160; <data:post.commentRangeText/> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a> </span> </b:if> <div class='clear'/> <div class='comment_form'> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='threaded-comment-form'/> <b:else/> <span class='no-comment'><data:post.noNewCommentsText/></span> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </div> </b:if> </div> <script type='text/javascript'> //<![CDATA[ if (typeof(jQuery) == 'undefined') { //output the script (load it from google api) document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>"); } //]]> </script> <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/> <script type='text/javascript'> <b:if cond='data:post.numComments != 0'> var Items = <data:post.commentJso/>; var Msgs = <data:post.commentMsgs/>; var Config = <data:post.commentConfig/>; <b:else/> var Items = {}; var Msgs = {}; var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;}; </b:if> //<![CDATA[ //Global setting Config.maxThreadDepth = 5;//How threaded level that you want Display_Emo = true;//Display emoticon or not? set "false" to no display Replace_Youtube_Link = true;//Auto replace youtube link to iframe embedded, choose "false" to disable Replace_Image_Link = true;//Auto replace an image link choose "false" to disable. Replace_Force_Tag = true;//Auto replace an virtual tag example: [pre] to <pre>, and [/pre] </pre>, If user input wrong , your layout will be gone. Then becare ful when enable this trap Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),only effect when Replace_Image_Link=true //Config emoticons declare Emo_List = [ ':)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx_LrB7VFHlPZ6-L4SdYJjNnZeFMwbRmLLvEfmZL8CjCMtr5Mgpc0uObcKTYGZkn8X88PWMHIx2MK-0g9lKMzm3vFUafc_vRaWTdcX2d6_OXbxbn14rF5afUJNoch30PIe9WSyP3G53RIo/h120/1.png', ':(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2H_zux1fOb6YBx3eGfcgLim3Qf4B9yvrQagkZweZiqg73FKczqTgUJuRuUweKYiqipgZvTlbp6Y3nHJOqAIO97ax-yuvPEsck1tn4GyybOXdP8h9OYpmOxMDZkVOx8Umm1E8_2farB4D_/h120/2.png', 'hihi' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioB5SC5XlsF-9o2MuZ6o_dKBR7Z16vgCIM3HQkLpVdqdl1Yhr_1iRmo9NhZfTVLrR1W6cViZOzBLLt_Nb-2cqn2lg6vVpY9Vl-tioB-az3ZDpDkAfcbM-a3sXNRcMs6cC9oyrOHcG6KouJ/h120/3.png', ':-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQyGvCdTVOtbdhCE8z2uIkQBdXEo718eP1QTZHs0XM8k-mIL0OSgJXtln7QWN3YrPsQaZjJP9qhzUcrGFmDR0wE2a21Lshjm4C-sCLjLbV6JNIOvIP-nAgQckFA6hUKOuoIG3Groq0zK9i/h120/4.png', ':D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLLavEu2F_pS2lUzrcUBfoIXqVEhAh-SX8zEu9L1DvmYl_61R5GPsl7Osjce2nk5QFgpf0qKTaBCBxglwk0njEMKsQhQG7gC7bk_9O_CApMX6yccwTKZ7XPH8Oquo5M11_L7YEq8Rg_X-I/h120/5.png', '=D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMiNgbHhfAX52WnJinWRzfy1lo1_2Mx151V2YL8wVpnMxM0Gxm9Y8Eq-rJu8-diIdBSmvyNWkAHHjX8_6ETEaNsVta85PRiYPa8ewwBibD0sO1IOdqAekLXWiHWKI8R79yZOR6gGGCMmye/h120/6.png', ':-d' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXD46cQ1FQjfHe7GfG0tR0OOLwmryExf-Fd-JQ61jbvxwUPF18RG5wpCPK9_4LmKD5qFtfZy8hEeVpMfUCsBDCeUMtYFXpCdouKMQ-v7k3MaaJpZYljqtOkGsr9-UtzgYf2Zkh-PSx_mHn/h120/7.png', ';(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5sE8X2qbclIQep6IVgUoU0wW-Bh0rx_8lodY493wB6y5xq5iqnSd9GppRPkUM18HK44-QhCbdfKoycIwu412a34xZ2qxyTDt5wpyZCUHro9q8ryUeyIuhKhpJcYKDrlipXh_4oOfQn5mP/h120/8.png', ';-(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixzp1hjpOmnDBEenCjG4iDTK8eCzFrOD8fCRL1vfSSRK6Wccgx4-WJkjyjIqU7JkZloNYGeNDQS9r8R4B4gFlm_qbLhnwP9WcRaG_2-rN-U6vwkC4YMaf2JncxLRPdpqnJumhf2Ircmv24/h120/9.png', '@-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO5u_R21LnrpZqIDULm5RZzYZDgO0oJr5zRN3RFvJoU8toxftC2Ow0lsCcRqYWxJ1NuZ066u0CUc0hw4BhnuERNFSwlVJRUrQaHEP0oUUcdvEULZ1BOydSTSzDNCOb70sj4uTIbZSTbrCf/h120/10.png', ':P' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUitQTscIXX5_BzDLa7Uj-828LTxHvH3dgwTyi8oPmLEZ03cEVtur-CqGeWlfjT_tya8uypGcF_S9jmE0ZhRb7aqfOcDwhbmYE5frjuXYa_uQ40P8cneU1bTe_rPcycRImwPQjc0eRF2KF/h120/11.png', ':o' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJHdiY6AFTm9Tlsry5QZ25SRRs7IUhBaPwbaHeSxVSUnWN0HtH0CLRlR5ozlHRo6qt7JLbgjZ-4Ovxx65q4_WTSFYGZl5Byhc0k0rkSKrKJXdMKwplE5yEQaSiBNF2ag1ICecyBlmI3LkN/h120/12.png', '-_-' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1hJ2k8lwDhbFEmn1hMioI7-bZMaf_Gi4E2_Ub-kuBWhyRHHhu9aGnJX6MGLguVFUCxTN8RKzJXkeKJN2-wlfhvE36CbwkK6kR9anZcCwqZCxZ0BwBKrJGu7d_BCX-04g-VOxwZ_RngdMB/h120/13.png', '(o)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUfymZU28Xha6rYP3Xfs0GiRdCxMYe5gfxKc3t8jP8opFwYvir3fSmppBNeKZpf-cuI3SI-UCFzmttoFdG-pP9B_wwMzayONnjGcMH73y_EkB_s4VFHfhNR2-RTmYxFoc6fw3zyyEYeScx/h120/14.png', '[-(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHuuT-DL89PK0YAuAfALx9MW9ntVrXwcMeS47iT3UtsiynQGftoims-FngaGPFImmx5pYJYOdBYadrxDd6CR6ecO1znuVorxrVSFVya4QAGAY9-Ko2zraHUPu2tKCGkcxVTtQgCuUpcJnf/h120/15.png', ':-?' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhFqe2ccF2arTatWrO8IQo5q6E8ZMOtvfDywu2JBKnVRP6zd8ZNOBpLd-rl6o7Cni2pkimNaP20zyyyna95Cy8_Q2_AuaMSvxqWGiIm2fX-NhvR_AIXlV3f5us_G1IYhWvrDhK6y9jEfx/h120/16.png', '(p)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFn5D_Bl__f827Ob3v2AzgPqs9bByyl74rfx5NJVzAI4PhsMyZNfO7YVLiSzSQWxGIkWIHlzAGgNdVm_f-hEzGmtWDy7ys0uoCOvfsNBLduvr4XydcV5MdJ77QshJIlM-Dl2nFe7xtwUdI/h120/17.png', ':-s' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD6XhKTsv0qM2P6txOOGaFZgEQCGE1fvxdk1l0Qjt9UZlMLdrMGiPpiyxsQyY9hzyNlkdmd4yJyRsjRt7LnaAR3OJ-PidXTzg7M-eOk0rqmXOI6-rJRzSBWdLy4e7uWpChLCr1JJxNaGBu/h120/18.png', '(m)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOenhAgcZqCSi61KeBB6sN0HE08lhz_6NS3dVPIK-GmSwp7nWununj6BRv56USQve_3fHPtX9XY7bUyYSoWuR5ZuqVOnNk5QiQFwrzZfOor2V6kZDnKMDmQnsJws4D1F-3tlKfKhSJ06eU/h120/19.png', '8-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU35CYoV5JmqHgWYsNwhoeO3JHYDu2ZIHZ4y3tmIMNds4tl5gqZJwE2hS8Cq9xv-WEHtv9g6W4O6r2qjaj4bhM2ivlcRbRIS0Wo0kXpjshxzH5iFSBSDofXGSwgu8aNGs7to6wuWOZXNi2/h120/20.png', ':-t' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQIZ31gznuMuulR-egFdiPOns_AnUQRYH3X6qxzqROHn82EfFnF3TNHsL59hx65HVYsc5AOpLBSM0qdmIWsqlJCM3WP7zyln13-NPIbclmVpfcf2YcbniTNVw6vaWIyBo0yaTC4rMFP2aV/h120/21.png', ':-b' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMSx-5ameBDb_m6Jyq0bNXxn2G6soIIM8Mj2iFYxi2rJhrhyphenhyphenQEHh_FzXOQSZkQfQOZP-NTU1jo0lZpyPU6js9CtVdxMWuLhqXARP3fPCwgXZ8BfbBi7Va2tPC-KwFQKVf_kUmXKvfEDvif/h120/22.png', 'b-(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDApqj7NMXGILQeK5sQ_JKITcFCdCsLoTBXVj5eCridvn3MC4neAOqjIOSee8V4QK24X2uGusn3oQli2NFEh1Mw50-doaBFCT_txTJXTeQg_5xyde_nIiZP01_5aXQVMbXLmxeAoMVmsO9/h120/23.png', ':-#' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixjUS9ZwD-xYTT06aTwhNwjubp-JlgBOUl0ZKRCRQXJvyoZ0FtjArInBhucCprEYATZguo0bjVJgs-DHxz62Z5a5bg6fFQL9SVAibFcgfprMtyO_ECXtF9Lxc2YOxyK5YOItXXdhDEE9kO/h120/24.png', '=p~' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibOIW8H3kqATAjGBJgHmCKpz2K0DpixFrMuesWncTiSVeCsArWTzv9xurJ4HwfGAl8xkUUroZ43d1v-hUHklvi_ktfaxEZAZcui-YCnIWkY-hkz8X4VFN6lRIAV8yTDU8504usx8sxIUcO/h120/25.png', '$-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWwB8hDjfTpFQsAmJ8SnkHdCnh_84iw8WGZ5CNmoQashYLKk5R7dpNNdLm9uQ4XkYxOKe1HAIxFyyFAY4ps_94bvHu5XlUdsVngFnnLk8v_QpGoDzxD4B7YdhGnOHn9b79I3lk5ulbTnMf/h120/26.png', '(y)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT-EUOvNndYDbJ3803fZlTdjR_FhRMDq9KWrGT-AsVkSKkyqogSyx8Yljm_R6Y1uQWJqIdQEhtxGE3CPtQW2BEmRm2zWIQCUECzQK-yNDhTVo6dZcauoalAYQs7DD8BMk56TT7WF1dFto5/h120/27.png', '(f)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKo49CgLefcSvMqdU0aionwcU0r-zbbfqj5OB24Ffl0wUMWz-ECdv9Oxm1WwxuDNaO_Qv1xn_ohnxXtcAp_F2bl64nrjUzaq25cIG_2xQlY0WNts1h78_8EuPtJPwfursIyMQvgQjiLi7Q/h120/28.png', 'x-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBRrJ4TK74sUsRWw6QYLWn7VVr-xH0edMIzcMJ5Reqd2xm0r2RUYNGscFZMCyd_Kc_IphnopXsOKKHaRxuxCoqoG6vveXF9Nm2ZqOibTgvzLRCgHDTytRdpAbTvubxSw9di0rH4uJSsn-k/h120/29.png', '(k)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj9OMAEmE2oT7YS4sY2xmQ-rPorPJmYSpcQQVU_2QjcE8IGZ1H3DCAU06gWyq8N9rFtkIEBHc7if_DMJTBxLS3ZvXkvZQPcjmuOIsFSrbxhYOo_d-nmXYBfadr98muquz8t_0kEsesMFuY/h120/30.png', '(h)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPQbYBuP4zfdZA-qddMhfjNe-uQcRctEcP2p89A8qe1kLvGqWRghUKam2IMJJTbbLB3eP_7zNZU-RTq7-MJGSQ91DYKd2SxGDLqQGk7-Y6sYma6HIpqiVjF3Fs42iycEqTpZ2_ig_hsfkk/h120/31.png', '(c)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7dmbp-WcODW4UwlrTyDeO-9ZPwZfWXf2Z6o1OP9YFkqzHpEvSY1RXFkDp210b2DxIoK5Ua2uIiIOwWwe8MvFDumo7CFjM73kqT0B_dHbkUfGYS4EQ8m1-5LERebz2X6Q_GPEq3MxBw75v/h120/32.png', 'cheer' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie6KUPstpFzXFZWqdYxJho7sG552z6n1Z-FUrlLSgOKcx3okwzsgNIxEZHxBfswjTVHW8sC29_06CUXk9KWlbSrdKi-8DXNXC0-_0jzdOKuoLKB1H-9L3W28nQSrm32eAo9pKuDjh9t7QC/h120/33.png', '(li)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqpWK_t4rOz0myIFnnl2_08dMdDz2XF_GVgWv7h5tgzbAQ255CQOBSkmXMJ5zV_2kvXuGtdLwrbJGJYFSinoPTKp_UKVg2x3FxM2OQ5egQe-WpBeZcFxfV4H2kd00sz-RN8XzuPJx-3sJG/h120/34.png', '(pl)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGN-nLMDmPs0wpQUr5GinmzS3JTW0l4c2jRIEqgE1qARO4M_24TzK7x855-6YNi88z9_l2dtZnOlRaHSgzd4tBhPhQVO8K0WRMNVK8a9BogMlj7VK8eX2fFOz_BAHvaeBsHRGBdVt1cLz/h120/35.png', ]; //Config Force tag list, define all in lower case Force_Tag = [ '[pre]','<pre>', '[/pre]','</pre>', '<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;', '</pre>','</code>' ]; eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 q=\'.W\';3 1a=$(\'#N-Y\').B(\'y\');u 1w(H){3 1h=\' \\n\\r\\t\\f\\2p\\1S\\1T\\1U\\24\\25\\26\\27\\2e\\2h\\2k\\2m\\2n\\2u\\2y\\2z\\2A\\2F\\1L\\1N\\1O\\1P\\1Q\';G(3 i=0;i<H.5;i++){b(1h.g(H.1V(i))!=-1){H=H.d(0,i);11}}C H}$(\'#28 .1B p\').k(u(D,7){b(2r){3 m=\'1g://13.Z.X/1t?v=\';3 8=7.g(m);F(8!=-1){1H=7.d(8);K=1w(1H);3 1c=K.g(\'&\');3 T=\'\';b(1c==-1){T=K.d(m.5)}1e{T=K.d(m.5,1c)}3 1j=\'<1k I="1W" y="1g://13.Z.X/1X/\'+T+\'?1Y=1" 20="0" 21></1k>\';7=7.d(0,8)+1j+7.d(8+K.5);8=7.g(m);b(8==-1){m=\'22://13.Z.X/1t?v=\';8=7.g(m)}}}b(23){3 1d=\'\';3 x=7;G(3 i=0;i<1z.5;i++){3 m=\'.\'+1z[i];3 o=x.E();3 8=o.g(m);F(8!=-1){l=x.d(0,8+m.5);o=l.E();3 w=\'2j://\';3 z=o.g(w);3 L=\'\';F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}w=\'1K://\';o=l.E();z=o.g(w);F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}b(L==\'\'||l.5<6){11}l=L+l;1d+=x.d(0,8+m.5-l.5)+\'<S y="\'+l+\'" I="2s"/>\';x=x.d(8+m.5);o=x.E();8=o.g(m)}}7=1d+x}b(1m){3 5=A.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';8=7.g(A[i]);F(8!=-1){7=7.d(0,8)+V+7.d(8+A[i].5);8=7.g(A[i])}}}b(2G){3 5=U.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){F(1){3 x=7.R();8=x.g(U[i]);b(8!=-1){7=7.d(0,8)+U[i+1]+7.d(8+U[i].5)}1e{11}}}}C 7});$(\'.1M\').k(u(D,7){b(1m){3 5=A.5;b(5%2==1){5--}3 15=\'\';G(3 i=0;i<5;i+=2){3 1C=\'<1F>\'+A[i]+\'</1F>\';3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';15+=\'<M I="1R">\'+V+1C+\'</M>\'}C 15}});$(\'.1f .1B p\').k(u(i,h){10=h.R();D=10.g(\'@<a 12="#c\');b(D!=-1){14=10.g(\'</a>\',D);b(14!=-1){h=h.d(0,D)+h.d(14+4)}}C h});u 1l(j){r=j.g(\'c\');b(r!=-1)j=j.d(r+1);C j}u 1n(j){j=\'&1Z=\'+j+\'#%1o\';1p=1a.1q(/#%1o/,j);C 1p}u 1r(){k=$(q).k();$(q).k(\'\');q=\'.W\';$(q).k(k);$(\'#N-Y\').B(\'y\',1a)}u 1s(e){j=$(e).B(\'16\');j=1l(j);k=$(q).k();b(q==\'.W\'){1u=\'<a 12="#1v" 29="1r()">\'+2a.2b+\'</a><a 2c="1v"/>\';$(q).k(1u)}1e{$(q).k(\'\')}q=\'#2d\'+j;$(q).k(k);$(\'#N-Y\').B(\'y\',1n(j))}17=2f.2g.12;18=\'#N-2i\';19=17.g(18);b(19!=-1){1y=17.d(19+18.5);1s(\'#2l\'+1y)}G(3 i=0;i<O.5;i++){b(\'1A\'2o O[i]){3 j=O[i].1A;3 1b=2q($(\'#c\'+j+\':P\').B(\'1D-1E\'));$(\'#c\'+j+\' .2t:P\').k(u(D,7){3 J=O[i].16;b(1b>=2v.2w){$(\'#c\'+J+\':P .2x\').1G()}3 Q=$(\'#c\'+J+\':P\').k();Q=\'<M I="1f" 16="c\'+J+\'" 1D-1E="\'+(1b+1)+\'">\'+Q+\'</M>\';$(\'#c\'+J).1G();C(7+Q)})}}3 1I=$("#2B");1I.2C(\'.2D S\').2E(u(){3 1J=$(1i).B(\'y\');$(1i).2H().B(\'y\',1J.1q(/\\/s[0-9]+(\\-c)?\\//,"/2I-c/"))});',62,169,'|||var||length||oldhtml|check_index|||if||substring|||indexOf|||par_id|html|img_src|search_key||upper_html||Cur_Cform_Hdr||||function||http_search|temp_html|src|find_http|Emo_List|attr|return|index|toUpperCase|while|for|str|class|child_id|yt_link|save_http|div|comment|Items|first|child_html|toLowerCase|img|yt_code|Force_Tag|img_html|comment_form|com|editor|youtube|temp|break|href|www|index_tail|newhtml|id|cur_url|search_formid|search_index|Cur_Cform_Url|par_level|yt_code_index|save_html|else|comment_wrap|http|whitespace|this|yt_video|iframe|Valid_Par_Id|Display_Emo|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|watch|reset_html|origin_cform|trim|comment_emo|ret_id|Replace_Image_Ext|parentId|comment_body|img_code|data|level|span|remove|ht|avatar|ava|HTTPS|u200a|comment_emo_list|u200b|u2028|u2029|u3000|item|x5d|x7c|x7d|charAt|comment_youtube|embed|autohide|parentID|frameborder|allowfullscreen|https|Replace_Image_Link|x3c|x3e|x0b|xa0|comment_block|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|u2001|form_|HTTP|u2002|rc|u2003|u2004|in|x5b|parseInt|Replace_Youtube_Link|comment_img|comment_child|u2005|Config|maxThreadDepth|comment_reply|u2006|u2007|u2008|comments|find|comment_avatar|each|u2009|Replace_Force_Tag|show|s45'.split('|'),0,{})) //]]> </script> </b:includable>

Bước 4:Các bạn tìm đoạn code :  <b:includable id='threaded-comment-form' var='post'> , hãy thu gọn nó lại sẽ được đoạn code giống như vậy:  <b:includable id='threaded-comment-form' var='post'>...</b:includable> các bạn xóa hết cả đoạn này đi và thêm vào chỗ đó đoạn code sau:

<b:includable id='threaded-comment-form' var='post'> <div class='comment-form' id='comment-form'> <b:if cond='data:mobile'> <p><data:blogCommentMessage/> <br/><br/><a class='tutup pencet' style='display:none'>Close Converter!</a><a class='show_emo pencet waves-effect waves-light'><i class='fa fa-smile-o'/> Emoticon</a></p> <script type='text/javascript'> $(document).ready(function() { $(&#39;.show_emo&#39;).click(function() { $(&#39;.comment_emo_list&#39;).toggle(&#39;slow&#39;); }); }); </script> <div class='comment_emo_list'/> <data:blogTeamBlogMessage/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/></b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/></b:if> <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor' style='display: none'/> <b:else/> <p><data:blogCommentMessage/>Biểu tượng mặt cười ( Copy &amp; paste xuống phần Comment )<br/> Hãy Luôn Comment Để Tạo Động Lực Cho Tác Giả <br/><br/><a class='tutup pencet' style='display:none'>Close Converter!</a><a class='show_emo pencet waves-effect waves-light'><i class='fa fa-smile-o'/> Emoticon</a></p> <script type='text/javascript'> $(document).ready(function() { $(&#39;.show_emo&#39;).click(function() { $(&#39;.comment_emo_list&#39;).toggle(&#39;slow&#39;); }); }); </script> <div class='comment_emo_list'/> <data:blogTeamBlogMessage/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/></b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/></b:if> <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/> </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>

Bước 5: Cuối cùng thêm đoạn javascript sau vào trước thẻ  </body> :

<script type='text/javascript'> $(document).ready(function(){$(&quot;.showmore&quot;).click(function(){$(&quot;.bnm&quot;).toggleClass(&quot;shows&quot;);});}); $(document).ready(function(){$(&quot;#showcommentmenu&quot;).click(function(){$(&quot;#commentmenu&quot;).toggleClass(&quot;shows&quot;);});}); </script>

Bước 6: Lưu mẫu và xem kết quả.

Hướng dẫn edit:

Thay đổi màu sắc: tìm đoạn mã màu  #22A65A và thay nó thành màu mà bạn yêu thích.
Bạn có thể vào đây để tìm mã màu nếu bạn thích.
Thay đổi màu viền bên dưới ngay cái thanh màu ở trên: tìm đoạn mã màu  #168947  và thay nó thành màu mà bạn yêu thích.
Thay đổi emoticon hoặc thêm emoticon vào: tìm icon bạn thích rồi tạo một danh sách và kèm theo link hình ảnh ứng với từng icon. Sau đó tìm đoạn code sau:  Emo_List = [ nó sẽ ra một list các emoticon của mình đã thêm từ trước, các bạn thay đổi hoặc thêm tùy ý nhé! Trong đó:

• Các kí hiệu đầu là các kí tự khi bạn comment để hình ảnh chèn lên nó.
• Còn các link sau là các hình ảnh sẽ thay thế kí tự chữ thành hình ảnh.

Chúc các bạn thành công!
Code lấy từ một blog bằng cách Ctrl + U
StarThảo-IT