Selamat datang agan
atau aganwati kali ini saya akan berbagi tips blogging yaitu cara memasang
komentar blogger, disqus, dan facebook dengan efek show hide, artikel ini saya
mendapat referensi dari blog +Kompi Ajaib , nah di tutorial ini saya hanya ingin
mengubah sedikit pada bagian komentar blogger default yang akan saya ubah
menjadi threaded comment blogger, nah langsung saja kita mulai tutorialnya;
Demo
Untuk Threaded Comment
Langkah
1. Login pada blog anda
masing-masing,
2. Setelah
itu pada menu dashboard pilih menu template lalu edit template,
3. Lalu cari
kode </head> setelah itu copy script di bawah ini,
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
#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:25px}
.comment-avatar { width : 42px; height : 42px; background : rgba(0, 0, 0, 0.4); box-shadow : 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2); padding : 5px; text-align : center; margin-bottom : 20px; }
#comments .avatar-image-container { float : left; margin : 0 10px 0 0; width : 42px; height : 42px; max-width : 42px; max-height : 42px; padding : 0; margin-bottom : 10px; }
#comments .avatar-image-container img { width : 42px; height : 42px; max-width : 42px; max-height : 42px; background : url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2BiMvewyC-Ts65ldN112EEXFw_ZxreyQ_SbkHWJKubZexpoHJsqyGRbmlh0Fg5GzCC6spKQbv90D7k0EHeyqzrB1powFAJOkC3BjA1Rb3gtgMecGcFFMcdNVYFt0FsaX5U-gR3f7SqFoE/s1600/anon.jpg') no-repeat; }
.comment_name a { font-family : "Oswald", Arial, Sans-serif; padding-bottom : 10px; font-size : 14px; text-decoration : none; font-weight : normal; }
.comment-admin .comment_name { font-family : "Oswald", Arial, Sans-serif; padding-bottom : 10px; font-size : 14px; text-decoration : none; font-weight : normal; }
.comment-admin .comment_name:after{ padding : 0; margin : 0 0 0 10px; }
.comment-admin .comment_date { font-weight : normal; font-size : 11px; }
.comment_name { font-family : "Oswald", Arial, Sans-serif; padding-bottom : 10px; font-size : 14px; font-weight : normal; position : relative; }
.comment_service { margin-top : 5px; }
.comment_date { color : #999; float : right; font-size : 11px; font-weight : normal; }
.comment_date a { color : #a9a9a9; float : right; font-size : 11px; font-weight : normal; }
.comment_date a:hover { color : #a9a9a9; text-decoration : none; }
.comment_body { margin-top : -72px; margin-left : 65px; background : #fff; border : #bdc3c7 solid 1px; padding : 15px; color : #555; }
div.comment-inner.comment-admin { background : #999; border-bottom:0;}
.comment_body p { line-height : 1.5em; margin : 5px 0 0 0; color : #666; font-size : 13px; overflow-wrap : break-word; padding-bottom : 10px; }
.comment-inner { padding : 15px; margin : 5px 0 5px 0; background-color : #666; border-bottom:0;} .comment_child .comment_wrap { padding-left : 5%; }
.comment_reply { display : inline-block; margin-top : 8px; margin-left : -5px; padding : 1px 12px; color : #fff !important ; text-align : center; text-decoration : none; border-radius : 2px; background : rgba(0, 0, 0, 0.3); box-shadow : 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2); font : 11px/18px sans-serif; transition : background-color 1s 0s ease-out; }
.comment_reply:hover { text-decoration : none !important ; background : rgba(0, 0, 0, 0.6); box-shadow : 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2); }
.unneeded-paging-control { display : none; }
#comment-editor { width : 100% !important ; background : url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGe3a_dn8U-ri7m-C_8mNeFQryXqOB-xraPOpNMunjrfOc7nnMq7-c0mSbB_UZcMDBZCGnBHGOcr_V36uCpeFDmhm0ONZrBYp1sYkfMAIWxnLZDBbyFRT4JMXiZoH7r0hikemTsQxFiQI/s200/load6.gif') 50% 30% no-repeat #e1e3e6; border-radius : 5px; margin-bottom : 20px; position : relative; }
.comment-form { max-width : 100% !important ; }
.comment_form a { text-decoration : none; text-transform : none; font-weight : bold; font-family : "trebucet ms", Helvetica, Garuda, sans-serif; font-size : 15px; }
.comment_form a:hover { text-decoration : underline; }
.comment_reply_form { padding : 0 0 0 70px; }
.comment_reply_form .comment-form { width : 99%; }
img.comment_emo { margin : 0; padding : 0; vertical-align : middle; }
.comment_emo_list { display : none; clear : both; width : 100%; }
.comment_emo_list .item { float : left; text-align : center; margin : 5px 5px 5px 5px; height : 40px; width : 55px; color : #fff; }
.comment_emo_list span { display : block; font-weight : normal; 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 ; }
.comment-header { width : 50px; } #respond { overflow : hidden; padding-left : 10px; clear : both; }
.avatar img { width : 42px; height : 42px; background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2BiMvewyC-Ts65ldN112EEXFw_ZxreyQ_SbkHWJKubZexpoHJsqyGRbmlh0Fg5GzCC6spKQbv90D7k0EHeyqzrB1powFAJOkC3BjA1Rb3gtgMecGcFFMcdNVYFt0FsaX5U-gR3f7SqFoE/s1600/anon.jpg) no-repeat; }
.comment-delete { display: block; background: rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4) inset, 0px 1px 0px rgba(255, 255, 255, 0.2); color: #fff !important; font: 11px/18px sans-serif; text-align: center; margin: 4px -4px 0px -5px; padding: 1px 0px; border-radius: 2px; transition: background-color 1s ease-out 0s; }
.comment-delete:hover { background: rgba(0, 0, 0, 0.6); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2); }
.deleted-comment { position: relative; display: block; background: url('https://scontent-sin.xx.fbcdn.net/hphotos-prn1/t39.1997-6/p128x128/851556_690521150961758_1331014687_n.png') 10px center no-repeat scroll #333; color: #fff; margin: 10px 0; padding: 45px 20px 45px 100px; border-radius: 5px; border-bottom: 1px solid rgba(0,0,0,.1); font-weight: bold; text-align: right; }
.comment-form p { background :#e1e3e6; padding : 15px 15px 14px 15px; margin : 5px 0 5px 0; color : #555; font-size : 13px; line-height : 20px; border-radius : 5px; position : relative; }
div.avatar img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] { content : url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3lcnbfHkkaBayLQfir7OpBsZUf7yIX1qG8IAUe0cLNeUbJMDjH9zMJIFEgLEUz5vzlkVdaL7DVp30Z8mZms6t4vgLodxUnLCekoP7RBPZ6-r5oh4vjZFw-EWcKph47cPrd6UWjzQydOs/s45-c/gravatar.png'); }
div:target .comment-inner { background : #e74c3c; border-bottom:3px solid #c0392b; transition : all 15s ease-out; }
div:target .comment_child .comment_wrap .comment-inner { background : #9b59b6; border-bottom:3px solid #8e44ad; transition : all 15s ease-out; }
iframe { border : none; overflow : hidden; }
.thanks {float: right; margin-top: -68px; margin-right: 15px; padding: 6px 12px; border: 1px solid #ddd; border-radius: 3px; position: relative; background: #f8f8f8; font-size: 13px; color: #000;}
.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}
iframe.blogger-iframe-colorize{max-height:250px}
.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>
4. Paste script tersebut tepat di
atas kode </head>,
5. Setelah
itu cari script seperti di bawah ini,
<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> 
6. Setelah itu ganti semua script yang sudah
anda cari dengan script di bawah ini,
<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'>
<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'>
Pilih Sistem Komentar Yang Anda Sukai
</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'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h3><b:if cond='data:post.numComments == 0'> 0 Comments </b:if><b:if cond='data:post.numComments == 1'> 1 Comments </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if></h3>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a class='Thumbtooltip' expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a class='Thumbtooltip' expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a class='Thumbtooltip' expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a class='Thumbtooltip' 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 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 cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == "true"'><data:label.name/></b:if></b:loop></b:if>'>
</b:if>
<div class='comment-header'>
<div class='comment-avatar'>
<div class='avatar'>
<img class='ThumbTooltip' expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
</div>
<a class='comment_reply' expr:href='"#r_"+data:comment.anchorName' expr:id='"r"+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Reply Comments'>Balas</a>
<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' title='Delete Comments'>Hapus</a>
</div>
<div class='clear'/>
</div>
<div class='comment_body'>
<div class='comment_name'>
<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>
<span class='comment_date'><data:comment.timestamp/></span>
</div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
<b:if cond='data:post.numComments == 1'> <div expr:class='"item-control " + data:comment.adminClass' style='margin-top:10px;margin-bottom:15px;border:1px solid #c94a36;background:#e55e48;padding:5px 10px;color:#FFF;border-radius:3px'>Selamat <b><data:comment.author/></b> Anda menjadi komentator pertama pada artikel ini, beri komentar terus agar jadi Top Komentator..!!!</div></b:if>
<div class='clear'/>
</b:if>
</div>
<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/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
</b:if>
</b:if>
</div>
</b:if>
</div>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<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 = 6;//Kedalaman tingkat threaded comment
Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan
Replace_Youtube_Link = true;//Embed video YouTube, ketik "false" untuk mendisable
Replace_Image_Link = false;//Auto replace link image, ketik "false" untuk mendisable.
Replace_Force_Tag = true;//Auto replace virtual tag contoh: [pre] menjadi <pre>, dan [/pre] menjadi </pre>, apabila salah menulis, tidak akan berfungsi
Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya berfungsi apabila Replace_Image_Link=true
//Pengaturan Emoticon
Emo_List = [
':thumbup' ,'https://googledrive.com/host/0B7H_GQEvKCj1SmIxOXhHalV2ZVE/jempol1.gif',
':2thumbup' ,'https://googledrive.com/host/0B7H_GQEvKCj1SmIxOXhHalV2ZVE/jempol2.gif',
':iloveindonesia' ,'https://googledrive.com/host/0B7H_GQEvKCj1SmIxOXhHalV2ZVE/I-Luv-Indonesia.gif',
':ilovekaskus' ,'https://googledrive.com/host/0B7H_GQEvKCj1SmIxOXhHalV2ZVE/s_sm_ilovekaskus.gif',
':nohope' ,'https://googledrive.com/host/0B7H_GQEvKCj1SmIxOXhHalV2ZVE/nohope.gif',
];
//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 o=\'.1c\';3 1b=$(\'#O-19\').G(\'A\');u 1l(F){3 1j=\' \\n\\r\\t\\f\\1D\\1G\\1F\\1E\\2l\\2k\\2i\\2f\\2c\\26\\25\\23\\1Y\\1S\\1N\\1L\\1H\\2v\\1M\\2p\\24\\22\\1R\';E(3 i=0;i<F.5;i++){9(1j.d(F.1Q(i))!=-1){F=F.b(0,i);11}}z F}$(\'#1P .1i p\').j(u(y,7){9(1J){3 l=\'1v://13.V.W/1y?v=\';3 8=7.d(l);D(8!=-1){1d=7.b(8);J=1l(1d);3 X=J.d(\'&\');3 N=\'\';9(X==-1){N=J.b(l.5)}Y{N=J.b(l.5,X)}3 1r=\'<1u B="1T" A="1v://13.V.W/1U/\'+N+\'?1V=1" 1W="0" 2w></1u>\';7=7.b(0,8)+1r+7.b(8+J.5);8=7.d(l);9(8==-1){l=\'1Z://13.V.W/1y?v=\';8=7.d(l)}}}9(21){3 Z=\'\';3 s=7;E(3 i=0;i<1w.5;i++){3 l=\'.\'+1w[i];3 m=s.C();3 8=m.d(l);D(8!=-1){k=s.b(0,8+l.5);m=k.C();3 q=\'2h://\';3 w=m.d(q);3 I=\'\';D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}q=\'2n://\';m=k.C();w=m.d(q);D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}9(I==\'\'||k.5<6){11}k=I+k;Z+=s.b(0,8+l.5-k.5)+\'<10 A="\'+k+\'" B="2r"/>\';s=s.b(8+l.5);m=s.C();8=m.d(l)}}7=Z+s}9(1A){3 5=x.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';8=7.d(x[i]);D(8!=-1){7=7.b(0,8)+S+7.b(8+x[i].5);8=7.d(x[i])}}}9(1I){3 5=R.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){D(1){3 s=7.M();8=s.d(R[i]);9(8!=-1){7=7.b(0,8)+R[i+1]+7.b(8+R[i].5)}Y{11}}}}z 7});$(\'.1K\').j(u(y,7){9(1A){3 5=x.5;9(5%2==1){5--}3 12=\'\';E(3 i=0;i<5;i+=2){3 1e=\'<1f>\'+x[i]+\'</1f>\';3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';12+=\'<Q B="1O">\'+S+1e+\'</Q>\'}z 12}});$(\'.1g .1i p\').j(u(i,h){T=h.M();y=T.d(\'@<a U="#c\');9(y!=-1){14=T.d(\'</a>\',y);9(14!=-1){h=h.b(0,y)+h.b(14+4)}}z h});u 1k(g){r=g.d(\'c\');9(r!=-1)g=g.b(r+1);z g}u 1m(g){g=\'&1X=\'+g+\'#%1n\';1o=1b.20(/#%1n/,g);z 1o}u 1p(){j=$(o).j();$(o).j(\'\');o=\'.1c\';$(o).j(j);$(\'#O-19\').G(\'A\',1b)}u 1q(e){g=$(e).G(\'15\');g=1k(g);j=$(o).j();9(o==\'.1c\'){1s=\'<a U="#1t" 27="1p()">\'+28.29+\'</a><a 2a="1t"/>\';$(o).j(1s)}Y{$(o).j(\'\')}o=\'#2b\'+g;$(o).j(j);$(\'#O-19\').G(\'A\',1m(g))}16=2d.2e.U;17=\'#O-2g\';18=16.d(17);9(18!=-1){1x=16.b(18+17.5);1q(\'#2j\'+1x)}E(3 i=0;i<P.5;i++){9(\'1z\'2m P[i]){3 g=P[i].1z;3 1a=2o($(\'#c\'+g+\':L\').G(\'1C\'));$(\'#c\'+g+\' .2q:L\').j(u(y,7){3 H=P[i].15;9(1a>=2s.2t){$(\'#c\'+H+\':L .2u\').1h()}3 K=$(\'#c\'+H+\':L\').j();K=\'<Q B="1g" 15="c\'+H+\'" 1C="\'+(1a+1)+\'">\'+K+\'</Q>\';$(\'#c\'+H).1h();z(7+K)})}}',62,157,'|||var||length||oldhtml|check_index|if||substring||indexOf|||par_id|||html|img_src|search_key|upper_html||Cur_Cform_Hdr||http_search||temp_html||function||find_http|Emo_List|index|return|src|class|toUpperCase|while|for|str|attr|child_id|save_http|yt_link|child_html|first|toLowerCase|yt_code|comment|Items|div|Force_Tag|img_html|temp|href|youtube|com|yt_code_index|else|save_html|img|break|newhtml|www|index_tail|id|cur_url|search_formid|search_index|editor|par_level|Cur_Cform_Url|comment_form|ht|img_code|span|comment_wrap|remove|comment_body|whitespace|Valid_Par_Id|trim|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|yt_video|reset_html|origin_cform|iframe|http|Replace_Image_Ext|ret_id|watch|parentId|Display_Emo|comment_emo|level|x5b|x7d|x7c|x5d|u2008|Replace_Force_Tag|Replace_Youtube_Link|comment_emo_list|u2007|u200a|u2006|item|comment_block|charAt|u3000|u2005|comment_youtube|embed|autohide|frameborder|parentID|u2004|https|replace|Replace_Image_Link|u2029|u2003|u2028|u2002|u2001|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|xa0|form_|HTTP|x0b|rc|x3e|x3c|in|HTTPS|parseInt|u200b|comment_child|comment_img|Config|maxThreadDepth|comment_reply|u2009|allowfullscreen'.split('|'),0,{}))
//]]>
</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>
7. Kemudian cari script di bawah ini,
<b:includable id='threaded-comment-form' var='post'>...</b:includable>
<b:includable id='threaded_comment_js' var='post'>...</b:includable> 
8. Setelah itu ganti semua script tersebut
dengan script di bawah ini,
<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'>
<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/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/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>
9. Setelah itu cari kode </body>,
lalu copy script di bawah ini
<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>
Ganti USERNAME DISQUS dengan username Disqus
anda!
Nah itu saja
dari saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar
anda, terima kasih
Referensi script http://www.kompiajaib.com/
Share this
Found an article helpful? Donate via Paypal
Cara style text di komentar Disqus dan Blogger:
- Untuk menulis huruf bold silahkan gunakan
<strong></strong>atau<b></b>. - Untuk menulis huruf italic silahkan gunakan
<em></em>atau<i></i>. - Untuk menulis huruf underline silahkan gunakan
<u></u>. - Untuk menulis huruf strikethrought silahkan gunakan
<strike></strike>. - Untuk menulis kode HTML silahkan gunakan
<code></code>atau<pre></pre>atau<pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini. - Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQEmotikon
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
|
Pilih Sistem Komentar Yang Anda Sukai
12 Comments
Renaldy Rizki Ramadani
29 June 2016 at 15:58
coba liat linknya :D
Renaldy Rizki Ramadani
24 September 2016 at 14:03
coba liat linknya gan
Renaldy Rizki Ramadani
20 January 2017 at 13:22
kayaknya templatenya ga support gan
Renaldy Rizki Ramadani
20 November 2017 at 20:36
Buat ngatur profilnya, edit css yang #comment .avatar gan
Aminnatul Widyana
13 April 2019 at 21:36
Pengen bisa kasih kolom komentar kayak gini di blogku. Bisa pake disqus & blogger
Renaldy Rizki Ramadani
23 July 2019 at 23:06
tinggal dihapus aja kak dibagian script facebooknya