Cara memasang 3 komentar disqus,blogger,facebook di blogger

Memasang 3 komentar - ok kali ini saya akan menjelaskan sekitar blogging,ane pernah pakai komentar disqus,blogger,facebook sekali gus dalam 1 blog,dan waktu itu saya pernah di chat orang 'mas gimana sih bikin komentar seperti blog mas' padahal sudah banyak yang berbagi tutorial tersebut tapi kali ini saya akan menjelaskan lagi dengan cara saya sendiri.

cara memasang 3 komentar disqus blogger facebook dengan mudah

apa sih keuntungan memasang 3 komentar di blog? biasanya kalau cuma memasang komentar disqus di blog pengunjung akan kesulitan untuk berkomentar,karena kalau mau berkometar di disqus anda harus memverifikasi gmail anda terlebih dahulu seperti gambar di bawah ini:

cara memasang 3 komentar disqus,blogger,facebook dengan mudah dan cepat

iya sih tidak lama untuk memverivikasi tapi kan pengunjung kesulitan dan bisa saja pengunjung langsung pergi karena ketidak nyamanan.

cara memasang 3 komentar disqus,blogger,facebook di blog

1. silakan anda klik menu tamplate di dasboar blog sobat dan cadangkan/unduh untuk berjaga-jaga,silakan anda ambil kode di bawah ini dan simpan lalu anda pasangkan kode tersebut di atas kode </head> .

<b:if cond='data:blog.pageType == "item"'>

/*<![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_header{margin-left:5px}

.comment_avatar{height:48px;width:48px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC3GJl5pw5KHNa5sLQ0IHgExfBwZkJ43U4BvZpbCxFcY-GzgmSzyMywSxfQQJEGN7D4aVo94CnuBd8YLQ38hL8RS3nrmWLfhISU_uxtunPbYuIhb_UiHBjYTbESWmkY-tsz2slNOg4wHw/s48/anon48.gif) center center no-repeat #F0F0F0;float:left;margin-top:-1px;margin-right:10px;margin-left:-5px;overflow:hidden;border-radius:3px}

.comment_admin .comment_author_flag,.comment_reply,a.comment-delete{border-radius:3px;text-decoration:none}

.comment_name{line-height:19.5px;display:inline-block;text-decoration:none;position:relative;margin-top:-3px}

.comment_name a{text-decoration:none;font-weight:500}

.comment_name a:hover{color:#0088b2;text-decoration:none}

.comment_service{margin-right:10px;margin-top:2px;position:relative;line-height:1em}

.comment_body p{font-size:16px;color:#444;line-height:1.3em;font-weight:300;margin:5px 0}

.comment_body p img{vertical-align:middle}

.comment_body{margin:-12px 0 10px 47px;padding:0 10px 10px;position:relative;z-index:1}

.comment_date{color:#999;font-style:italic;font-size:11px;line-height:1.2em;cursor:pointer;font-weight:400;margin-right:20px}

.comment-set{margin-bottom:30px}

.comment_child .comment_body{margin-top:-5px;margin-bottom:10px;margin-left:39px}

.comment_child .comment_wrap{padding-left:50px}

.comment_reply{cursor:pointer;color:#f1f1f1!important;font-size:12px;font-weight:500;margin-top:5px;margin-right:10px;padding:3px 5px;float:left;background:#666}

.comment_reply:hover,a.comment-delete:hover{text-decoration:none;background:#888!important}

.unneeded-paging-control{display:none}

.comment_reply_form{padding:0 0 0 48px}

.comment_reply_form .comment-form{width:100%}

.comment_reply,.comment_service a{display:inline-block}

.comment_avatar *{max-width:1000%!important;display:block;max-height:1000%!important;width:48px!important;height:48px!important;margin-right:10px}

.comment-form,.comment_img,.comment_youtube{max-width:100%!important}

.comment_child .comment_avatar,.comment_child .comment_avatar *{width:40px!important;height:40px!important;float:left;margin-right:10px}

.comment_form{margin-top:-20px}

.comment_form a{color:#444;text-decoration:none;font-size:16px;font-weight:700}

.comment_form a:hover{color:#fff}

.comment_author_flag{display:none}

.comment_admin .comment_author_flag{background-color:rgba(34,59,74,.3);display:inline-block;color:#fff;font-family:arial;font-size:10px;font-weight:700;padding:2px 5px;line-height:1em;position:absolute;top:2px;right:-51px}

a.comment-delete{color:#f1f1f1!important;font-size:12px;font-weight:500;margin:5px 0 0;padding:3px 5px;float:left;background:#666}

#comment-editor{width:100%!important;background:url(data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7) 50% 30% no-repeat #fff;margin-top:10px;border:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

.blogger-box,.comment-form p,.disqus-box,.facebook-box{-moz-box-sizing:border-box;-webkit-box-sizing:border-box}

.comment-form{margin-top:25px!important}

.comment_emo_list .item{float:left;text-align:center;height:40px;width:41px;margin:10px 0 0}

.comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#444}

.comment_youtube{width:400px;height:225px;display:block;margin:auto}

.comment-form p{background:#666;padding:10px 10px 5px;margin:5px 0;color:#eee;font-weight:300;font-size:16px;font-family:Roboto,sans-serif;line-height:1.3em;width:100%;border-radius:3px;position:relative;box-sizing:border-box}

.comment-form p:after{content:"";width:0;height:0;position:absolute;bottom:-15px;left:15px;border:8px solid transparent;border-color:#666 transparent transparent}

.deleted-comment{display:block;color:#efefef;font:italic 13px Arial;margin-top:-10px;background:#DB6161;padding:10px}

.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}

.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. Langkah selanjutnya anda harus fokus dan teliti agar tutorial ini berhasil di terapkan di blog sobat.

langsung anda cari kode 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>

dan kalau sudah anda ketemukan code seperti di atas anda hapus dan ganti kode tersebut dengan kode di bawah ini:

<b:includable id='comment-form' var='post'>

<b:if cond='data:mobile'>

<data:blogTeamBlogMessage/>

<b:if cond='data:blog.pageType == "static_page"'>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

</b:if>

<b:else/>

</span>

</p>

</div>

<data:blogTeamBlogMessage/>

<b:if cond='data:blog.pageType == "static_page"'>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

</b:if>

</div>

</b:if>

<data:post.friendConnectJs/>

<data:post.cmtfpIframe/>

BLOG_CMT_createIframe("<data:post.appRpcRelayPath/>", "<data:post.communityId/>");

</script>

</div>

</b:includable>

<b:includable id='commentDeleteIcon' var='comment'>

<b:if cond='data:showCmtPopup'>

</div>

<b:else/>

</b:if>

</span>

</b:includable>

<b:includable id='comment_count_picker' var='post'>

<b:if cond='data:post.forceIframeComments'>

</span>

<b:else/>

<b:if cond='data:post.commentSource == 1'>

</span>

<b:else/>

<data:post.commentLabelFull/>:

</a>

</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:includable>

<b:includable id='comments' var='post'>

<b:if cond='data:blog.pageType == "item"'>

Facebook

</div>

Blogger

</div>

Disqus

</div>

Pilih Sistem Komentar Yang Anda Sukai

</div>

</div>

<b:include data='post' name='disqus-comment'/>

</div>

<b:if cond='data:post.allowComments'>

<b:if cond='data:post.commentPagingRequired'>

<data:post.commentRangeText/>

</span>

</b:if>

<b:loop values='data:post.comments' var='comment'>

<b:if cond='data:post.adminClass == data:comment.adminClass'>

<b:else/>

</b:if>

</div>

<b:if cond='data:comment.authorUrl'>

<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>

</div>

<b:if cond='data:comment.isDeleted'>

<b:else/>

<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>

</b:if>

</div>

</div>

</div>

</div>

</b:loop>

</div>

<b:if cond='data:post.commentPagingRequired'>

<data:post.commentRangeText/>

</span>

</b:if>

<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'>

</b:if>

</div>

</b:if>

</div>

//<![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>

<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:include data='post' name='fb-comments'/>

</div>

</b:if>

</b:includable>

<b:includable id='disqus-comment' var='post'>

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'>

</b:includable>

3. dan selanjutnya anda harus mencari kode seperti di bawah ini:

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

<b:includable id='threaded_comment_js' var='post'>...</b:includable>

cara memasang 3 komentar disqus,blogger,facebook dengan mudah dan praktis

nah langsung anda hapus lalu ganti dengan kode di bawah ini

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

<b:if cond='data:mobile'>

<data:blogTeamBlogMessage/>

<b:if cond='data:blog.pageType == "static_page"'>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

</b:if>

<b:else/>

</span>

</p>

</div>

<data:blogTeamBlogMessage/>

<b:if cond='data:blog.pageType == "static_page"'>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

</b:if>

</div>

</b:if>

</div>

<data:post.friendConnectJs/>

<data:post.cmtfpIframe/>

BLOG_CMT_createIframe("<data:post.appRpcRelayPath/>", "<data:post.communityId/>");

</script>

</div>

</b:includable>

<b:includable id='threaded_comment_js' var='post'>

(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. simpan kode js di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType == "item"'>

//<![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 yang saya tadai hitam dengan username disqus sobat lalu klik simpan tamplate dan lihat hasilnya.

BACA JUGA: Keuntungan kenapa anda harus cari pacar anak blogger

silakan di coba tutorial cara memasang 3 komentar disqus.blogger.facebook dan jangan lupa share agar semua orang tahu.dan terima kasih atas kunjungan anda di blog sederhana ini.

Pages

Cara memasang 3 komentar disqus,blogger,facebook di blogger

0 Response to "Cara memasang 3 komentar disqus,blogger,facebook di blogger"