Installing Disqus Comments, Blogger, Facebook With Show Hide And Defer JS (other Blogger style)

Updated on May 07, 2016 - Post a Comment

This post is similiar with Installing Disqus Comments, Blogger, Facebook With Show Hide And Defer JS , but this time i'd changed blogger comment style which is more advantage:

Include Conversion tool, so you can post your code to Blogger comment easily
Include Cancel button: You can cancel your comment anytime
Comment form appear just below the comment which you want to reply

1. The CSS code

Please save this CSS code above the </head>. If you've previously installed blogger comments please remove the previous blogger comment CSS code.

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
#comments{clear:both;margin:0 auto;line-height:1em;padding:20px 0;font-family:Roboto,sans-serif}
.comments a{color:#4A4A4A}
.cf:before,.cf:after{content:"";display:table}
.cf:after{clear:both}
.cl{display:block;clear:both}
#comments h4, #comments2 h4{font-size:18px;font-weight:normal;}
.cm_wrap{margin-bottom:10px; border-bottom: 1px solid #ddd;}
.delete{ padding: 0 0 10px 10px;}
.avatar-image-container{border:nonewidth:35px;height:35px;float:left;}
.avatar-image-container img{width:35px;height:35px}
.avatar-image-container img[src$="blogblog.com/img/blank.gif"]{background:url('http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=35') no-repeat center center;}
.cm_reply,.cm_delete{padding:2px;text-align:center;text-decoration:none;font:14px/18px sans-serif;display:inline-block;;margin:3px 0 0;line-height:1;cursor:pointer;}
.cm_reply:hover,.cm_delete:hover{text-decoration:none!important;background-color:#fefefe}
a.cm_reply,a.cm_delete{color:#627AAD;font-weight: normal;}
.cm_body{padding:3px 10px; margin-left: 35px;overflow: hidden;}
.inner{padding:0;border:none}
.cm_header{padding:1px 0 3px; font-size: 16px;}
.cm_header a { color: #e8554e; text-decoration: none;}
.name{margin:0;padding:0;text-transform: capitalize;font-size: 100%;float:left}
.cm_text{margin:4px 0 0;font-size:15px;color:#333;line-height: 1.3em;}
.comment_author_flag {display:inline-block;color:#9E9E9E;font-size:14px;font-weight:600;padding:2px 5px; line-height: 1em;}
.cm_date{font-size:14px;color:#999;text-decoration:none;}
.cm_date a {color: #666!important;font-weight: 400;}
.cm_pagenavi{font-size:13px;text-transform:uppercase;color:#666;text-shadow:1px 1px white;font-weight:bold}
.cm_pagenavi a{color:#666;text-decoration:none;padding:10px}
.cm_pagenavi a:hover{text-decoration:underline}
.cm_pagenavi span{color:#888;background:white;padding:4px;border:1px solid #E0E0E0}
.comment-form iframe{width:100%;height:240px;}
.comment-form p{padding:10px;color:#000;line-height:18px;font-size:14px;border-radius:3px;position:relative;border:1px solid #ddd}
.comment-form p:before,.comment-form p:after{content:"";width:0;height:0;position:absolute;top:100%;left:15px;border-width:12px;border-image:none;border-style:solid;border-color:#ddd transparent transparent}
.comment-form p:after{left:17px;border-width:10px;border-color:#fff transparent transparent}
.loader{background-image:url('data:image/gif;base64,R0lGODlhKwALAPEAAP///2aZzLPM5WaZzCH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAKwALAAACMoSOCMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64oCAyTBUAACH5BAkKAAAALAAAAAArAAsAAAI9xI4IyyAPYWOxmoTHrHzzmGHe94xkmJifyqFKQ0pwLLgHa82xrekkDrIBZRQab1jyfY7KTtPimixiUsevAAAh+QQJCgAAACwAAAAAKwALAAACPYSOCMswD2FjqZpqW9xv4g8KE7d54XmMpNSgqLoOpgvC60xjNonnyc7p+VKamKw1zDCMR8rp8pksYlKorgAAIfkECQoAAAAsAAAAACsACwAAAkCEjgjLltnYmJS6Bxt+sfq5ZUyoNJ9HHlEqdCfFrqn7DrE2m7Wdj/2y45FkQ13t5itKdshFExC8YCLOEBX6AhQAADsAAAAAAAAAAAA=');background-repeat:no-repeat;background-position:50% 50%}
.batal{margin:0;padding:10px;font-size: 16px;border:1px solid #4B81AA;color:red!important;text-align:center;text-shadow:0 -1px 0 white;text-decoration:none;border-radius:2px;display:none;}
.emo{cursor: pointer;width:17px;height:16px;display:inline-block;background-image:url("data:image/png;base64,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");background-repeat:no-repeat;background-size:auto auto;vertical-align:middle}
.smile{background-position:0 -324px}
.sad{background-position:0 -103px}
.melet{background-position:0 -375px}
.mrangas{background-position:0 -154px}
.oo{background-position:0 -120px}
.ok{background-position:0 -426px}
.koco{background-position:0 -137px}
.kocoi{background-position:0 -358px}
.uu{background-position:0 -392px}
.nangis{background-position:0 -69px}
.jahat{background-position:0 -86px}
.apa{background-position:0 0}
.kiss{background-position:0 -222px}
.hati{background-position:0 -189px}
.imut{background-position:0 -205px}
.lha{background-position:0 -341px}
.ori{background-position:0 -52px}
.oka{background-position:0 -35px}
.sepet{background-position:0 -409px}
.pacman{background-position:0 -239px}
.wkwk{background-position:0 -18px}
.emotki{margin:20px 0}
.emone{text-align:center;float:left}
.texte{padding:0;text-align:center;margin:0 0 0 3px;letter-spacing:1px;width:2em;vertical-align:middle;border:1px solid #ddd;}
.batal:hover{text-decoration:none}
.cm_wrap .batal{display:block}
.cm_wrap[style*="margin-left:25%"] .cm_reply{display:none}
#comments2{clear:both;padding:10px 0;margin-top:0;font-family:Roboto,Arial,sans-serif}
#comments2 h3{margin:0;font-size:18px;font-weight:500;color:#666;padding-bottom:10px;border-bottom:1px solid #ddd}
#comment_block{padding-top:15px}
.blogger-box,.comment-form p,.disqus-box,.facebook-box{-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.blogger-bar,.comment-text,.disqus-bar,.facebook-bar{font-family:Roboto,Arial,sans-serif;font-weight:500;color:#555;font-size: 15px;}
iframe.blogger-iframe-colorize{max-height:250px}
.small-button a{color:#f1f1f1!important}
.small-button a:hover{color:#fff!important}
.blogger-bar,.disqus-bar,.facebook-bar{display:inline;float:right;padding:5px 10px;cursor:pointer;background:#eee}
.blogger-bar,.disqus-bar{margin-left:5px;margin-top:20px;border-radius:3px 3px 0 0;border:1px solid #ddd;border-bottom:none}
.facebook-bar{margin:20px 20px 0 5px;border-radius:3px 3px 0 0;border:1px solid #ddd;border-bottom:none}
.blogger-box,.disqus-box,.facebook-box{width:100%;padding:0;border-top:1px solid #ddd;box-sizing:border-box}
.blogger-box,.facebook-box{display:none}
.fb-comments,.fb_iframe_widget iframe,.fb_iframe_widget span{width:100%!important}
.fb-comments{padding:0!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.btncurrent{padding:5px 10px 6px;margin-bottom:-1px;background:#fff}
.comment-text{display:inline;float:left;padding:5px 10px 5px 0;margin-top:20px}
.comment-text:after{content:'\f061';font-family:FontAwesome;color:#555;margin-left:5px;}
/*]]>*/
</style>
</b:if>

2. HTML Code

In these steps we will replace HTML code comments blogger and save codes Disqus and Facebook comments, so I hope you carefully on this step so that the code runs fine. Please find below the code like this or like in the image below.

<b:includable id='comment-form' var='post'>...</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>...</b:includable>
<b:includable id='comment_count_picker' var='post'>...</b:includable>
<b:includable id='comment_picker' var='post'>...</b:includable>
<b:includable id='comments' var='post'>...</b:includable>

Then please replace all of the above code with the code below.

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<b:if cond='data:mobile'>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' expr:title='data:postCommentMsg' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='"https://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"https://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
</b:if>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<div id='threaded-comment-form'>
<p><data:blogCommentMessage/>
<span class='small-button'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='inline-block';document.getElementById('hide-emo').style.display='inline-block';document.getElementById('show-emo').style.display='none'' title='Show Emoticon'><i class='fa fa-smile-o'/></a></span><span id='hide-emo' style='display:none'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='none';document.getElementById('hide-emo').style.display='none';document.getElementById('show-emo').style.display='inline-block'' title='Hide Emoticon'><i class='fa fa-smile-o'/></a></span>
</span>
</p>
<div id='emo-box' style='display:none'>
<div class='comment_emo_list'/>
</div>
<data:blogTeamBlogMessage/>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='"https://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"https://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
</b:if>
</div>
</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>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<b:if cond='data:showCmtPopup'>
<div class='goog-toggle-button'>
<div class='goog-inline-block comment-action-icon'/>
</div>
<b:else/>
<a class='comment-delete' expr:href='"https://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:comment.id' title='delete comment'><i class='fa fa-trash'/></a>
</b:if>
</span>
</b:includable>
<b:includable id='comment_count_picker' var='post'>
<b:if cond='data:post.forceIframeComments'>
<span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'>
</span>
<b:else/>
<b:if cond='data:post.commentSource == 1'>
<span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'>
</span>
<b:else/>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>:
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.forceIframeComments'>
<b:include data='post' name='iframe_comments'/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
<b:else/>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<div class='facebook-bar commentbtn' onclick='toggleVisibility('facebook-box')'>
Facebook
</div>
<div class='blogger-bar commentbtn' onclick='toggleVisibility('blogger-box')'>
Blogger
</div>
<div class='disqus-bar commentbtn btncurrent' onclick='toggleVisibility('disqus-box')'>
Disqus
</div>
<div class='comment-text'>
Comment cho bài viết
</div>
<div class='clear'>
</div>
<div class='disqus-box' id='disqus-box'>
<div class='comments' id='comments'>
<b:include data='post' name='disqus-comment'/>
</div>
</div>
<div class='blogger-box' id='blogger-box'>
<div class='comments' id='comments2'>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>
1
</span>
comment
<b:else/>
<span id='cm_total'>
<data:post.numComments/>
</span>
comments
</b:if>
<b:else/>
Leave a comment
</b:if>
</h4>
<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'>
<b:if cond='data:comment.author == data:post.author'>
<div expr:id='"a" + data:comment.id'>
<div class='cm_wrap admin cl cf' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.isDeleted'>
<div class='delete'>
<data:comment.body/>
</div>
<b:else/>
<div class='avatar-image-container admin vcard'>
<img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc'/>
</div>
<div class='cm_body'>
<section class='inner'>
<header class='cm_header cf'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' 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'>(Admin)</span>
</b:if>
</header>
<div class='cm_text admin'>
<b:if cond='data:comment.inReplyTo'>
@<a expr:href='"#a" + data:comment.inReplyTo'>Reply</a>
</b:if>
<data:comment.body/>
</div>
</section>
<footer class='response'>
<a class='cm_reply' expr:href='"javascript:replyTo(&quot;" + data:comment.id + "&quot;);"'>
Reply,
</a>
<a class='cm_delete' expr:href='"http://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:comment.id' expr:title='data:top.deleteCommentMsg'>
Delete
</a>
<span>,</span>
<span class='cm_date'>
<a class='comment_tanggal' expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
<data:comment.timestamp/>
</a>
</span>
</footer>
</div>
</b:if>
</div>
</div>
<b:else/>
<div expr:id='"a" + data:comment.id'>
<div class='cm_wrap cl cf' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.isDeleted'>
<div class='delete'>
<data:comment.body/>
</div>
<b:else/>
<div class='avatar-image-container admin vcard'>
<img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc'/>
</div>
<div class='cm_body'>
<section class='inner'>
<header class='cm_header cf'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' 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'>(Admin)</span>
</b:if>
</header>
<div class='cm_text visitor'>
<b:if cond='data:comment.inReplyTo'>
@<a expr:href='"#a" + data:comment.inReplyTo'>Reply</a>
</b:if>
<data:comment.body/>
</div>
</section>
<footer class='response'>
<a class='cm_reply' expr:href='"javascript:replyTo(&quot;" + data:comment.id + "&quot;);"'>
Reply,
</a>
<a class='cm_delete' expr:href='"http://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:comment.id' expr:title='data:top.deleteCommentMsg'>
Delete
</a>
<span>,</span>
<span class='cm_date'>
<a class='comment_tanggal' expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
<data:comment.timestamp/>
</a>
</span>
</footer>
</div>
</b:if>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='clear'/>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container cl cf'>
<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' id='comment-form'>
<p>
<data:blogCommentMessage/>
To insert a link, use tag
<code>
[url=http://your_link]your-link[/url]
</code>
<br/>
To insert the code , use the tag
<code>
&lt;i rel="code"&gt;your-code&lt;/i&gt;
</code>
<br/>
The long code can use the tag
<code>
&lt;i rel="pre"&gt;your-long-code&lt;/i&gt;
</code>
<br/>
To insert an image , use the code
<code>
[img]URL Image[/img]
</code>
<br/>
To insert a title , use tag
<code>
&lt;b rel="h4"&gt;Your Title here...&lt;/b&gt;
</code>
<br/>
To creat Bold text
<code>
&lt;strong&gt;Your text here...&lt;/strong&gt;
</code>
<br/>
To create Italic text used tag
<code>
&lt;em&gt;Your text here...&lt;/em&gt;
</code>

</p>
<div class='emotki' id='emo_box'> :) :( :p :D :o ;) 8-) 8:) :/ :'( 3:) O:) :* &lt;3 ^_^ -_- o.O O.o >:o :v :3
</div>
<div class='pesan-blogger' id='pesan-blogger'>
<div class='tombol-pesan'>Use conversion tool if you want to add code .<span class='mata' id='tombol-open' onclick='toggleNavPanel5('konversi-pesan')'><i aria-hidden='true' class='fa fa-plus-square-o'/></span></div>
<div id='konversi-pesan'>
<textarea id='codes' placeholder=' Write / paste the code here and click 'Conversion'' spellcheck='false'/>
<span class='button-group'>
<button id='cvrt' onclick='cdConvert();this.disabled = true;'>Convert</button>
<button onclick='cdClear();'>Clear</button>
</span>
<span class='checkbox'>
& <input checked='' id='opt1' type='checkbox'/>' <input id='opt2' type='checkbox'/>" <input id='opt3' type='checkbox'/>< <input checked='' id='opt4' type='checkbox'/>> <input checked='' id='opt5' type='checkbox'/></span>
</div>
</div>
<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>
<div>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor' style='overflow:auto'/>
</div>
<a class='batal' href='javascript:replyTo("cancel");'>
Cancel
</a>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:if>
</div>
<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
!function(e,a){function s(){var e=-1;if("Microsoft Internet Explorer"==navigator.appName){var a=navigator.userAgent,s=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");null!=s.exec(a)&&(e=parseFloat(RegExp.$1))}return e}function l(e){var s=e.target.id,l=a.querySelector("#emo_box #"+s);l.parentNode.insertBefore(y,l.nextSibling),y.type="text",y.className="texte",y.value=l.title,y.select()}var r=(e.location.href,a.getElementById("comment_block")),t=r.innerHTML,n=[],o=[],i=[],c=0,p="",m="",d="",g=0,f=0,u=0,b=0,v="",h="",$="",x=a.getElementById("emo_box"),y=a.createElement("input"),k=a.getElementById("comment-editor").src.split("#");e.replaced=function(e,a){var s=a,s=s.replace(/^(<br ?\/?>| )+/i,"").replace(/(<br ?\/?>)+(:|;|\^|=)/gi,"<br> $2").replace(/^( |<br ?\/?>| <br ?\/?>)+/gi,"").replace(/\@<a href="\#c([0-9]+)\"( rel="nofollow")?>.*?<\/a>\:? ?/g,"").replace(/\s:\)+/g," <span class='emo smile' id='emo1' title=' :)'></span>").replace(/\s:$/g," <span class='emo sad' id='emo2' title=' :('></span>").replace(/\s;$/g," <span class='emo ok' id='emo3' title=' ;)'></span>").replace(/\s:p/gi," <span class='emo melet' id='emo4' title=' :p'></span>").replace(/\s:3/g," <span class='emo wkwk' id='emo5' title=' :3'></span>").replace(/\s:v/g," <span class='emo pacman' id='emo6' title=' :v'></span>").replace(/\s:D/g," <span class='emo mrangas' id='emo7' title=' :D'></span>").replace(/\so.O/g," <span class='emo ori' id='emo8' title=' o.O'></span>").replace(/\sO.o/g," <span class='emo oka' id='emo9' title=' O.o'></span>").replace(/\s:o/g," <span class='emo oo' id='emo10' title=' :o'></span>").replace(/\s:\//gi," <span class='emo uu' id='emo11' title=' :/'></span>").replace(/\s:'$/g," <span class='emo nangis' id='emo12' title=' :'('></span>").replace(/\s\^(\_|)\^/g," <span class='emo imut' id='emo13' title=' ^_^'></span>").replace(/\s\-(\_|)\-/g," <span class='emo lha' id='emo14' title=' -_-'></span>").replace(/\s>:o/gi," <span class='emo sepet' id='emo15' title=' >:o'></span>").replace(/\s<3/gi," <span class='emo hati' id='emo16' title=' <3'></span>").replace(/\s:\*/g," <span class='emo kiss' id='emo17' title=' :*'></span>").replace(/\sO:$/g," <span class='emo apa' id='emo18' title=' O:)'></span>").replace(/\s3:\)/g," <span class='emo jahat' id='emo19' title=' 3:)'></span>").replace(/\s8:\)/g," <span class='emo kocoi' id='emo20' title=' 8:)'></span>").replace(/\s8-\)/g," <span class='emo koco' id='emo21' title=' 8-)'></span>").replace(/\[note\](.*?)\[\/note\]/gi,"<div class='note'>$1</div>").replace(/\[(youtube|iframe)\](.*?)\[\/(youtube|iframe)\]/gi,"<div class='loader'><iframe class='video' src='$2' frameborder='0'></iframe></div>").replace(/<em rel="note">(.*?)<\/em>/gi,"<div class='note'>$1</div>").replace(/<b rel="quote">(.*?)<\/b>/gi,"<blockquote>$1</blockquote>").replace(/<i rel="pre">(.*?)<\/i>/gi,"<pre><code>$1</code></pre>").replace(/<i rel="code">(.*?)<\/i>/gi,"<code>$1</code>").replace(/<b rel="h([0-6])">(.*?)<\/b>/gi,"<h$1>$2</h$1>").replace(/<i rel="anchor">(.*?)<\/i>/gi,"<a class='allow' href='$1' rel='nofollow'>$1</a>").replace(/\[(link|url)\](.*?)\[\/(link|url)\]/gi,"<a class='allow' href='$2' rel='nofollow'>$2</a>").replace(/\[url\=('|")?(.*?)('|")?\](.*?)\[\/url\]/gi,"<a class='allow' href='$2' rel='nofollow'>$4</a>").replace(/(<i rel="image">|\[img\])(.*?)(<\/i>|\[\/img\])/gi,"<img class='center besar' src='$2' alt='Loading...'>").replace(/<\/h([0-6])>(<br ?\/?>)+/g,"</h$1>");e.innerHTML=s},e.replyTo=function(e){var s=a.getElementById("comment-editor"),l=a.getElementById("comment-form"),r=a.getElementById("cancel"!=e?"c"+e:"comments"),t=k;s.className+=" transparent",s.parentNode.className+=" loader",s.src="cancel"!=e?t[0]+"&parentID="+e+"#"+t[1]:t[0]+"#"+t[1],r.insertBefore(l,null),s.onload=function(){this.className=this.className.replace(/ transparent/g,""),this.parentNode.className=this.parentNode.className.replace(/ loader/g,"")}};var E=s();if(-1==E||E>=9){for(;-1!=t.indexOf('id="a');)g=t.indexOf('id="a'),t=t.substring(g+4),g=t.indexOf('"'),n[c]=t.substring(0,g),t=t.substring(g),o[c]=a.getElementById(n[c]).innerHTML,i[c]=0,c++;for(g=0;c-1>g;g++)for(f=g+1;c>f;f++)if(-1!=o[f].indexOf(n[g])){for(p=n[f],m=o[f],i[f]=i[g]+1,d=i[f],b=g+1;f>b&&!(i[b]<d);b++);for(u=f;u>b;u-=1)n[u]=n[u-1],o[u]=o[u-1],i[u]=i[u-1];n[b]=p,o[b]=m,i[b]=d}for(g=0;c>g;g++)f=o[g].indexOf('@<a href="#a'),-1!=f&&(h=o[g].substring(0,f),$=o[g].substring(f+1),f=$.indexOf("</a>"),$=$.substring(f+4),o[g]=h+$),f=o[g].indexOf('class="cm_wrap'),-1!=f&&(h=o[g].substring(0,f),$=o[g].substring(f),i[g]>6&&(i[g]=6),o[g]=h+'style="margin-left:'+(0+5*i[g])+'%" '+$),v+=o[g];replaced(r,v),replaced(x,x.innerHTML),r.style.display="block"}else replaced(r,"<h4><em>Old IE Suck!</em></h4>");for(var p=0;p<x.children.length;p++){var N=x.children[p];N.addEventListener("click",l,!1)}var O=[".texte"];e.addEventListener("mouseup",function(e){for(var s=0;s<O.length;s++){var l=a.querySelector(O[s]);e.target!=l&&e.target.parentNode!=l&&l.parentNode.removeChild(l)}})}(window,document);
//]]>
</script>
</div>
<div class='facebook-box' id='facebook-box'>
<div class='comments-fb'>
<b:include data='post' name='fb-comments'/>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = "<data:blog.url/>";
}
var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
</script>
</b:includable>

- Then find another code such as below or as shown below:

<b:includable id='threaded-comment-form' var='post'>...</b:includable>
<b:includable id='threaded_comment_js' var='post'>...</b:includable>

Then please replace all of the above code with the code below:

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<div id='form-wrapper'>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='"https://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"https://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
</b:if>
<b:else/>
<div id='threaded-comment-form'>
<p><data:blogCommentMessage/>
<span class='small-button'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='inline-block';document.getElementById('hide-emo').style.display='inline-block';document.getElementById('show-emo').style.display='none'' title='Show Emoticon'><i class='fa fa-smile-o'/></a></span><span id='hide-emo' style='display:none'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='none';document.getElementById('hide-emo').style.display='none';document.getElementById('show-emo').style.display='inline-block'' title='Hide Emoticon'><i class='fa fa-smile-o'/></a></span>
</span>
</p>
<div id='emo-box' style='display:none'>
<div class='comment_emo_list'/>
</div>
<data:blogTeamBlogMessage/>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='"https://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"https://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
</b:if>
</div>
</b:if>
</div>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe("<data:post.appRpcRelayPath/>", "<data:post.communityId/>");
</script>
</div>
</b:includable>
<b:includable id='threaded_comment_js' var='post'>
<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;
//<![CDATA[
function downloadJSAtOnload3(){var d=document.createElement("script");d.src="https://googledrive.com/host/0BxD7C648NH8cUWFROVlPNWlteGc/threaded-comment.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload3,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload3):window.onload=downloadJSAtOnload3; //]]>
</script>
</b:includable>

3. Javascript Code

Please save the javascript code below the above code </body>

<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
var disqus_shortname="USERNAME DISQUS";
var disqus_url = disqus_blogger_current_url;
(function () {
"use strict";
var get_comment_block = function () {
var block = document.getElementById('comments');
if (!block) {
block = document.getElementById('disqus-blogger-comment-block');
}
return block;
};
var comment_block = get_comment_block();
if (!!comment_block) {
var disqus_div = document.createElement('div');
disqus_div.id = 'disqus_thread';
comment_block.innerHTML = '';
comment_block.appendChild(disqus_div);
comment_block.style.display = 'block';
var dsq = document.createElement('script');
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.body).appendChild(dsq);
}
})();
!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");
var divs = ["disqus-box", "blogger-box", "facebook-box"];
var visibleDivId = null;
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
$(".commentbtn").click(function (e) {
$(this).addClass("btncurrent").siblings().removeClass("btncurrent");
});
//]]>
</script>
</b:if>

Please replace the code with the username USERNAME DISQUS Disqus blog. After that please hosting javascript code that exists between the code //<![CDATA[ and code //]]>. If you do not have your own hosting then you could use Google Drive to host javascript. After clicking hosting javascript, please use javascript defer so that the end result will be as shown below.

<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="URL HOSTING JAVASCRPT HERE",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>

Please replace the URL code HOSTING JAVASCRPT HERE with hosting javascript url earlier

Please be carefully assessed the steps above to correct its application and can run. But should the earlier you have to backup your template first so if there is an error can go back to the original code with ease. And on this comment icon using font awesome, so make sure you have installed fonts awesome on your blog. Good luck and hopefully useful.
Note: - If you just want to use Facebook and Blogger comment systems please delete all above yellow codes
- For who want to change default comment system from disqus tab to blogger tab:
+ change this CSS code .blogger-box,.facebook-box{display:none}
to .disqus-box,.facebook-box{display:none}

+ delete code btncurrent from this code

Disqus

</div>

+ And add code btncurrent to

Blogger

</div>

It will be like this:

Blogger

</div>