Tutorial Menambahkan Komentar Disquss, Facebook Dengan Benar Pada Blogger
Cara Pasang Komentar Facebook Disquss Dengan Benar Pada Blogger
1. Kalian bisa pergi ke themes > edit html > cari kode </head>. Setelah ketemu copy kan code 1 Di bawah ini di atas <head>.
Code 1
<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('http://2.bp.blogspot.com/-fjaZBtfvzac/UN1mw2tUamI/AAAAAAAADkc/XdKqt8hWZ6w/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('http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/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(http://2.bp.blogspot.com/-fjaZBtfvzac/UN1mw2tUamI/AAAAAAAADkc/XdKqt8hWZ6w/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('http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/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>
2. Kemudian Cari Script berikut 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>
Setelah ketemu hapus semua scipt diatas lalu ganti dengan code 2 di bawah ini
Code 2
<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')'>
</div>
<div class='blogger-bar commentbtn' onclick='toggleVisibility('blogger-box')'>
</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='facebook-box' id='facebook-box'>
<div class='comments-fb'>
<b:include data='post' name='fb-comments'/>
</div>
</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'>
<h3 id='total-comments'><data:post.commentLabelFull/></h3>
<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 class='data:comment.adminClass comment-set' data-level='0' 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>
<div class='comment_area'>
<div class='comment_header'>
<div class='comment_avatar'>
<img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
</div>
<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>
<b:if cond='data:comment.author == data:post.author'>
<span class='comment_author_flag'>Admin</span>
</b:if>
</div>
<div class='comment_service'>
<a expr:href='data:comment.url' rel='nofollow' title='permalink'><span class='comment_date'><data:comment.timestamp/></span></a>
</div>
<div class='clear'/>
</div>
<div class='comment_body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
<a class='comment_reply' expr:href='"#r_"+data:comment.anchorName' expr:id='"r"+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas'><i class='fa fa-reply'/> Balas</a>
<a class='comment-delete' expr:href='"https://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:comment.id' expr:title='data:top.deleteCommentMsg'><i class='fa fa-trash'/></a> <div class='clear'/>
</b:if>
</div>
<div class='clear'/>
</div>
<div class='clear'/>
</div>
<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' id='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'><data:postCommentMsg/></a>
</b:if>
</b:if>
</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'>
<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[
function downloadJSAtOnload2(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/js/master/comment-hack.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload2,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload2):window.onload=downloadJSAtOnload2; //]]>
</script>
</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>
<b:includable id='fb-comments' var='post'>
<div class='fb-comments' data-colorscheme='light' data-numposts='5' expr:data-href='data:post.url' id='fb-comment'/>
</b:includable>
3. Setelah itu cari lagi script ini
<b:includable id='threaded-comment-form' var='post'>...</b:includable>
<b:includable id='threaded_comment_js' var='post'>...</b:includable>
Setelah ketemu hapus script diatas lalu ganti dengan code 3 dibawah ini:
Code 3
<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://cdn.rawgit.com/KompiAjaib/js/master/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>
4. Dan langkah yang terakhir cari /body biasanya terdapat pada akhir template. Setelah ketemu tambahakan Code 4 dibawah ini, letakkan di atas /body. INGAT ganti username disquss kalian.
Code 4
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
var disqus_shortname="ostekno";
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>
NB: ganti Tulisan Merah dengan id Disquss kalian.
Jika masih bingung, kalian bisa simak video di bawah ini:
Demikian cara mudah pasang Komentar Disquss, Facebook Dengan Benar Pada Blogger. semoga bermanfaat.
fg
ReplyDelete