Mục Đích
- Với phong cách Material (Giao Diện Phẳng) rất đẹp tạo cuốn hút cho Blog
- Có nhiều Twitter Emoticon Đẹp để cho comment thêm xin đẹp.
- Phân biệt bình luận của tác giả với đọc giả (Bình luận của tác giả sẽ hiện bên phải còn của đọc giả sẽ ở bên trái.)
- Còn nhiều nữa....
Thực Hiện
1. Đăng Nhập Blogger >> Mẫu >> Chỉnh Sữa HTML2. Sau đó dán đoạn code sau vào trước thẻ đóng </head> hoặc sau thẻ đóng ]]></b:skin> hoặc sau thẻ đóng </style> nào đó
<b:if cond='data:blog.pageType != "index"'>
<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/AVvXsEgfLj0avqfoEVcQuJmv9c3anYY5pa0PXwGew-FhZNqBeAVoi4g1DOI-RMYeCuA4vP0QneLq1ts1HUPL9dsQUR71e6msd6l1WWZ_QNIlbaPs-UNnrvPuSlPXrtHNAfu6QLRYjmokJL4r2Xw/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/AVvXsEhG_oJ6o_Ej6lxy1uvRHaTBpeI0lSqnEYItnXJi9Mfykgp6u2ETerWbT54HzxD10MJVDbrzAPFQ7k6XML_qDyJupkTehySChZbX5T1D2vdG8B-fDO1sumKYxRG9pIWDz43k5C8kiZPEugY/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ác bạn đã có CSS của một hệ thống comment nào đó thì các bạn xóa toàn bộ code CSS của nó hết nha.3. Sau đó các bạn Ctrl + F tìm với từ khóa "<b:includable id='comments' var='post'>" . Sau đó các bạn thu gọn nó lại sẽ còn như hình dưới
4. Sau đó các bạn thay hết toàn bộ dòng "<b:includable id='comments' var='post'>...</includable>" bằng đoạn code bên dưới.
<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>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<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'>
<div class='comment_inner comment_admin'>
<b:else/>
<div class='comment_inner'>
</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='"http://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:comment.id' expr:title='data:top.deleteCommentMsg'>
<img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig3SywkEWi99hRd2BFaSg-FfBAc-OAC2vU2umjAcqpN7sVRsEb6Q_fgJOHG43BXJZhhru1tqsaOQMtphpX3-IAvgPROt143LwHiP3koAJXtrVXKq3ocyVYZ6P_JavklELLGsJTe4SMBsg/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='"#r_"+data:comment.anchorName' expr:id='"r"+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'/>
</div>
<div class='clear'/>
<div class='comment_child'/>
<div class='comment_reply_form' expr:id='"r_f_"+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>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<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 = {'maxThreadDepth':'0'};
</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/AVvXsEgpsb4VLHON8_O4tGS5VJXnvwBzez52RY68ixWD0BmdOSl5Us5cUCcAkQnA9qWsbh1pCi0xWQIvg0N65Atqr4M63pn3KL2-eIGJITiJY3KW5csW10B9Ck1wjXRZD49LeRxDD_5qJgOMU5rC/h120/1.png',
':(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtX6Vi_hBkZuwlZMdkvRNTAfv_tMOmrwOrQOKA61Ww4svqdAtBPmh3DP4D-i_rFgMF0HkocbFh34u5kX9K9ImVMwGqfimW8I8rXQQ94Egdzov5ErXQRYDaX_ECL6ZVaFOaqsvZed_3arB_/h120/2.png',
'hihi' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie4mZQO8kkP5kPYhMU5RDmjMRcXIkFnemVbLH1JFCDFLSlDwn05jMSXhArjlT8SP9CroWU7US_AGiaTvat3lBT1g3s-aijXm5j-LbQ4PkGV-5XpwZgGW4qAEi_cGJW_tFbhsr8OfeCzj2r/h120/3.png',
':-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqpsg-WhJe95WTpPYpDate9_Mq1boG-YP6HkOJrqY5nAXHM9InXEcuNB2R7MVUZwDfQwId3Xr2o594Bg1mry4jGjXg8XI60LE_u-Kqi0pGNLPPKjB0DZD-aIOVgrlfRwJdMN3hfi-OY_DZ/h120/4.png',
':D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRWEfczO4rbkaB7OCTVxuu6GFhJvxnnTkg0nNPT3oZO6eP1E-wSUrAyWhFeb5pGleY8MSMtB3P6LjjNAdZL_JU6gAH2ddSUmzM5o62p8jdDqhNQ6Qp6_lfxTF7HGC2Pgd3XijhWaQzMLJi/h120/5.png',
'=D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfxXNKy_FJ9iFNw2IQJmF70KJ4-xYSbVLn7BgvTdefNeWlixcgQNREJa7Nc3Y9pIubM5BdN2EF30p3ojYran9Y9A9C-ZUd4O4FPxcMoamefO0drOFB7x6gSaV3a9taEXP6CmtYS0O0K7HV/h120/6.png',
':-d' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg42wjAEUSmS9DQsq1f_-b56r8q7mAUL23eyj1FpTYP9y-ntOI-vx0iBu4fd3u9nvNqNOIt0FYnQodDZJLoqXinfd60Pb2F_YtFyXtD1mnQolEBlLJ3WENz9j0UhFAMwVdzYE0EfdO09n2-/h120/7.png',
';(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRrtNaedVfRGbkquDpq7Yl0MTTOG_ZbRBKiSDW4mdec_WKvGQsDBqUSbrOrhJi9jhvT-3yXsdLRJvtFFqDC8PdiBupWrS6CoSBzM6cGkqK0PeTtv-i2O9Rc1OR0xcxszwkw-7-wO9nYZ8B/h120/8.png',
';-(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQydkXB4Ozf2BuuKsL1QzrQ3oUXE0Kj8P58wjHbfXqR9iSfjj_07VwbtR6cYDODE2FDM8HVG96W-uuIRwfWkWGcYXn0ky2Se9TwIWgm8P7C1L9zu34nWAql3fX9aXLbNIGa-QVTdhV-sGT/h120/9.png',
'@-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdix2kHmbg8DIREc3Y-_ygDDTF9-gkRFr1d0YqQpSYrsujNtgES9p7WtYlGbo4fudg1ITJR9vwD3OyimZwPTfbGRV7_q2Xw7NH1dWdPTvSSCKRxObopvIAP1sT7qIzN6iluL1Qu4Z3QQwG/h120/10.png',
':P' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjInq5rkPTpV1fqPJgxB_ON08tk68xj5LoT8iP1ougjcscLEstOPGDUkyxGMk1ZmAcLbLwDtrvUiA9LmmO446RGj49DHe9g_Iab6U0Uny-FJIBJ_KS16gYH1BAfMw8shsR8I9OQ1BSlaqvb/h120/11.png',
':o' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaVhESPi25rXeawz4CufDx346HghDV8bW0B9LF9Ni9gqOdgeOVClhsPLyuCdaryb1O2exduSJ9UH08zCrE06AKZj0bCtzsXgvFGkkffiQcTvdhZkCD0v3MqPtxVzXOZOYuKPQ0bpYLK4N8/h120/12.png',
'-_-' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKm5bLwD718vZriVNFxTLML7Iorui7TznIID2S0WapjKueWKXkBi8icJ2s-ZZMXPQoisxtJGtsfP_1IkijqcNpamMukc34tla8iu_tdvUwn9CVNuqYLobTdQ_rSDkuv8Qtxbw-iddDBn8e/h120/13.png',
'(o)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdgRH1wCUnYr7VwRIynuzMuSSkFh23LB0-oPtdas4f4sBId-My2u9rXcsOCAh5rspLTldBOpBKdYjQoYQgpuffFFyoYgi0u58s9STkXC3ntA5fHyTUtGV6o-I4ajOZ6DJWhQS6Ar_MyNTm/h120/14.png',
'[-(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtKPPCZkM6-6LGjCI6mZa50bf8A0f4zBdWic-HQg1Sqkg1UEoqYHsAyKPv4jO3Vlbpn5szWkLcGN_FQ_KlL1jvzpIdeC43wgKjI3pCzLCiSdHLbbzhHQiJYDFRmopwVObEOrh7NEiWPnTN/h120/15.png',
':-?' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgImMF6wA_Hj0DCEcNBUNV4dY1S74jYYLmoIYPHVx6EOlcgV8s7oDT0DaBxzx7Z48dNX44Zz8xamDsko8jzA_RBYcK3LXg8na1SRTT9q5rMrGTxXYHZolmeJAZv65AVkXlVnTDdJKiyRk-i/h120/16.png',
'(p)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiViWAwFLexNHforZbi9btpZtTays19mjvY2LmZ1RzHM_0TjtIVn_VvUaEmUQa7fDLOcXzpsshL3G2vyrh38WMHSrkF4_MrT0o86P2kHGz5upKxU-IXiv_aW0Dg591usMZa09_Jtz7JJP4/h120/17.png',
':-s' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtuoAzuXSei16qUGIAMItH62VPFfk5pWj78R3TCyHFOnORji2NNb5n-wsSE5IpEDn6AsZRtlm3xkPm6TRzLl9IUcCj5c6ilp9_vyBLNVezHovNrMc_7kpEXT_TAM0aVrU_Ug2A1Y0vY-ny/h120/18.png',
'(m)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfw_2TJd1PFuRmNyLg6QrsoGtEhK-KXNwRrqN34zDuY4Z3sCb134EETY9zA3mpshWQTVjxnE3a2-VoWXDChDcQBo4GC_lZvQ_rd2fD4X9wA69h_a8M9F2JHX3rOF_5igcPzRvlCIrOiiho/h120/19.png',
'8-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6zN-a8zHpf75fn6JRqiaHlBbZDLE6Cliu14eBRIsy_t8nX_OWPGFIe4fiB6a8P_jo_g4zidVsGPTaXqDeILfyOifcZ1GR6rPrVFQpoA_o3Y1y_wkigmZEIZXMTwwQs5CawkjvMXs5eJfJ/h120/20.png',
':-t' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinRcHD0eX8ldYUjkkm0FrgBRB7FKBM60ftTMI1wqgDAlPd6SlEbXIhtkFMTPYy68v4ypscm60dB0RtrfPoD434S2X9eYjWdg-dOB783XVe8seTdfZnSl0iV7Jzv7LP4i2xg3LU8uMq9K2d/h120/21.png',
':-b' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyWB0PNlUOY_Zvx5EscvhqrQ30Gnfxhpd6-GXTMxfDRbaZTL9qHUyzttMyotsJR6ngzm9j-OZq7X32R1t34Rb9GOkCgKBoUjCI7KDs-KleUlSS8lqbpE26XOsIqsrmGjpwE5vY6qpGtBZQ/h120/22.png',
'b-(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdk7TSIVdfJlcaTLW_MTnYwfPf2KV5esoKd0bnKG5a9jaIsQ4esFxHcHkngb61TMZYF9ebA0czs7ylMDX3BOFK16Bq86yx7XTnrMBbV7-iCABDgFwfw_m8knSVTD9b2uXhmwLg_t8vmW-X/h120/23.png',
':-#' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibEiHBOBqUcxBYzkf_8tBkNjMmqWQ2e36H-afWPLKOqFo4RJWF36XtZn9atMzsMpIekMaOmQ0LWs0QimysHcqEP8L8vXIYucGcfxF-cu2HJ_RQTRq0gvg6I4WlcTU5NpzyvSrhQFBDcKyq/h120/24.png',
'=p~' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0NwSN1WhkAHrB5z9SEYmQ4K9psCmgC9slZXWDAbW82Y-w_LItobRdzKPVU7eD87F0JvH7aEbKyeVO303DpWDfX-w0tiCZuIicMw6Qf_dJthfr08Kbhl-YrHYsyHV2-kkuagKDHEoVeII/h120/25.png',
'$-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjYx56ApqEPiRyDfeWOhtRaqutLgDy471y2NGu236IHMdtVM7IAVOfPh8fgHh-Ou_w4GnkWm9vAzb3NyFsbjQ5fTyxcm3JnxpCdS6Mrc_H-cY6VOhD-zMrMlofFwLYzuywuTug2VA5h9D8/h120/26.png',
'(y)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi81tISMk-8NXAZ0bCg4zKmhDqyC_4SI2iXcou0X0bt79AQAgqAFVymqjl5uMroKP88BVazytSz8lwP1zRZEDZ-XO1h3cOWwAs3y2TMINDqebGtJCtfNd9KQFKr-9bDpyTqmI-g3u29T3bs/h120/27.png',
'(f)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZeGanP54dUIl4xzpOMwTlBwO9NyiH98YQfXsRrQ7VXUKUWW_3T5j1LdISpjT3H9zngBx5tZU-AJ02ulHY7cEOFj1tHEaTYHm221fxZMoFWzM9x4-jmbQPFyXMTYuj8ERwTEiLO9HmM-yW/h120/28.png',
'x-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMJ4-dfcB5f49SElDgp5wBsvnBZkIZN8XyBaF-Fg1Bi4bXu9KfL4bYU5B4boNmEasdJRmCzukib396xhL8_oVoCn3wWzDXandOMw3UwGJP3tgdyx324wF87VCpEfjI5nerDY2a035joPIL/h120/29.png',
'(k)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU-ATr6naOooz02fAvCRl2iJspEDkqFasOav7xEpw30H7wAylEePySgjfRUA1giiWO3j8Oz8OH-L0yL_U-nm9fKCkAE_FooNDHJzXF04eX0zdO7o0OH7mu5kGoS3L5h5v3U_cFlvZxRzKX/h120/30.png',
'(h)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQrOjXfuvZAQ5I8xsUETJ7rbuKIxuGv-dHXJ0hUpXFhT2wahPxeRYpcscr48nPVE_zXZbh8uJ9fqJZeRCGEMk3JzdxVP9eGft2vnVMN6UcSSQdAfJWotdZzOBS2MtmgaKDDyDBj1otT3eR/h120/31.png',
'(c)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOcJOKCVpg2cxU46EfHkY-jLpEt_Z58-j9Z640UxwwJlIuYTQgRmDWmUsEXHUAnrHWwtdTSMFps7L8wVspiKQVcJOku5z0Q0gN5uelmSJX0KgGd6Ipw2aQhqDD-KOh9eoLoyagFuXuuY2w/h120/32.png',
'cheer' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMRKCrcG4OjT7dQQOYy2QiqweIIVunlLUAAWka8EzoeiZI8k01IFIq0XwSZYUdol_IJ4mGBes7VDhyphenhyphenTF9Y8dVj9EpMmnH-mpGNWBcdr1aZGKtP3rsznOYJlWXptXclACpn9ZaBbd2L4ask/h120/33.png',
'(li)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitHq0yijjSgvOUa-eCdL-jDLZx7kSosQC2wsb1vYPeg3xBMFUzmeDXnh1_ioWCBbK0L5Pc-AoFJ6BEbjejX6YghjhAQDz69dUBD2fi621YK1gcHRgSewU1vJu1kT65IEqTO2sVQ4OIaLsL/h120/34.png',
'(pl)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi71n8HBo1lbPz9bDPNNS3g437SydRyVRWDe87bw46wWQSX__d96xGGPV-Xkdj4MTOCI9ZZMIyDvlsagVuYY1XGPs_r7gohyB5Iy-ryvhpgAJxs42KJv1eJkeyRItHbWQnI0m_VJaDy6r4i/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="">','<code>',
'</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: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() {
$('.show_emo').click(function() {
$('.comment_emo_list').toggle('slow');
});
});
</script>
<div class='comment_emo_list'/>
<data:blogTeamBlogMessage/>
<b:if cond='data:blog.pageType == "static_page"'><a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src'/></b:if>
<b:if cond='data:blog.pageType == "item"'><a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + 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 & 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() {
$('.show_emo').click(function() {
$('.comment_emo_list').toggle('slow');
});
});
</script>
<div class='comment_emo_list'/>
<data:blogTeamBlogMessage/>
<b:if cond='data:blog.pageType == "static_page"'><a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src'/></b:if>
<b:if cond='data:blog.pageType == "item"'><a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + 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('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable><script type='text/javascript'>
$(document).ready(function(){$(".showmore").click(function(){$(".bnm").toggleClass("shows");});});
$(document).ready(function(){$("#showcommentmenu").click(function(){$("#commentmenu").toggleClass("shows");});});
</script>Nâng Cao
Thay đổi Màu SắcTìm mã màu là #22A65A sau đó đổi lại thành mã màu của bạn.
Vào đây tìm mã màu
Thay đổi cái viền bên dưới ngay cái thanh màu ở trên.Tìm mả màu #168947 rồi thay thành mả mảu bạn thích.
Thay đổi Emoticon hoặc thêm Emoticon vô.Tìm icon bạn thích rồi lập một cái danh sách ra kèm theo link hình ảnh của nó. Sau đó tìm dòng với từ khóa "Emo_List = [" nó sẽ ra một list các Emoticon. bạn thay thế hoặc thêm vô tương ứng. Trong đó
- Các ký hiệu đầu là các hình bằng ký tự
- Còn link sau là link hình ảnh sẽ thay thế ký tự chữ bằng ảnh.
No comments