Cara Memasang Disqus Ringan dan Valid HTML5 sekaligus dengan Tutup Buka Komentarnya - Yang saya rasakan dalam memasang kotak komentar di blog ini, tak ada perbedaan yang signifikan dalam hal kecepatan loading blog, bahkan ketika saya test di Google PageSpeed Insights tidak ada sama sekali perbedaan yang mencolok dengan kotak komentar bawaan blogger.
Banyak rekan blogger yang bilang bahwa memasang komentar Disqus ini memberatkan loading blog, untuk sesi ini saya bantah karena di template yang saya pakai sekarang sama sekali tidak berefek demikian. Alasan tidak saya pasang karena sudah tanggung ada komentar-komentar di kotak komentar bawaan blogger.
Bahkan saya tidak hanya memasang kotak komentar disqus-nya saja, malah sekalian dengan kotak Comment Policy dan Tombol Tutup Buka Komentar. Selain kode-kode dibawah ini Valid HTML5 ternyata sangat ringan untuk kecepatan loading blognya, dengan artian tidak memberatkan blog.
Bahkan saya tidak hanya memasang kotak komentar disqus-nya saja, malah sekalian dengan kotak Comment Policy dan Tombol Tutup Buka Komentar. Selain kode-kode dibawah ini Valid HTML5 ternyata sangat ringan untuk kecepatan loading blognya, dengan artian tidak memberatkan blog.
Anda terdampar pada postingan inipun saya tidak akan tahu alasan apa, yang pasti bila memang anda perlu untuk memasang kotak komentar Disqus pada website atau blog anda silahkan ikuti langkah berikut ini. Langkah awal adalah copy kode style dibawah dan pastekan diatas kode ]]></b:skin>
/* Comment Button */
.buka-komen,.tutup-komen{background-color:#fff;color:#0a0a0a;font-size:16px;line-height:1.3em;padding:10px;display:block;min-width:54px;text-align:center;font-weight:500;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05)}
.buka-komen{margin:20px 0;cursor:pointer;}
.tutup-komen{margin:20px 0 0 0;cursor:pointer;border-bottom:1px solid #ddd;-webkit-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;display:none}
/* Menyembunyikan Kotak Comments Bawaan Blogger */
.comments{margin:0 0 20px 0;padding:20px 20px 0;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05);display:none}
#comments {display:none;}
.post-comment-link { visibility: hidden; }
/* Disclaimer Box Comment Policy */
.disclaimer_box{margin:0;padding:2px;border-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05)}
.disclaimer_box .content{background-color:#fff;color:#0a0a0a;padding:8px 12px;font-size:95%;border-radius:4px;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.disclaimer_box .content p{margin:0;padding:0}
Lalu langkah berikutnya mencari kode berikut <b:includable id='comments' var='post'> , mudah-mudah sama. Kalaupun tidak sama, seidentik untuk kode kotak komentar. (Anda pun bisa memakai kode dibawah ini untuk memasang Tombol Tutup Buka Kotak Komentar bawaan blogger).
<b:includable id='comments' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<section class='empty' id='comments'>
<b:if cond='data:post.allowComments'>
<b:include name='commentsTitle'/>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<b:include cond='data:post.comments' data='post.comments' name='commentList'/>
</div>
<b:if cond='data:post.commentPagingRequired'>
<div class='paging-control-container'>
<b:if cond='data:post.hasOlderLinks'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:messages.oldest/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:messages.older/>
</a>
</b:if>
<span class='comment-range-text'>
<data:post.commentRangeText/>
</span>
<b:if cond='data:post.hasNewerLinks'>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:messages.newer/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:messages.newest/>
</a>
</b:if>
</div>
</b:if>
<div class='disclaimer_box'>
<div class='content'>
<b>Comment Policy :</b> Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
</div>
</div>
<div class='footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='commentForm'/>
<b:else/>
<p><data:post.noNewCommentsText/></p>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='addComments'/>
</b:if>
</b:if>
</div>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
</section>
</b:if>
</b:includable>
Ganti semua kode <b:includable id='comments' var='post'> sampai </b:includable> sama kode kotak komentar Disqus berikut :
<b:includable id='comments' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<div aria-label='Buka Komentar' class='buka-komen' id='buka-komen' onclick='document.getElementById("comments").style.display="block";document.getElementById("tutup-komen").style.display="block";document.getElementById("buka-komen").style.display="none";jump("open-comment")' role='button' tabindex='0'>Buka Komentar</div>
<div aria-label='Tutup Komentar' class='tutup-komen' id='tutup-komen' onclick='document.getElementById("comments").style.display="none";document.getElementById("tutup-komen").style.display="none";document.getElementById("buka-komen").style.display="block";jump("close-comment")' role='button' tabindex='0'>Tutup Komentar</div>
<div id='open-comment'/>
<div class='disclaimer_box'>
<div class='content'>
<b>Comment Policy :</b> Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
</div>
</div>
<section expr:class='"comments" + (data:post.embedCommentForm ? " embed" : "")' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<a name='comments'/>
<div id='disqus_thread'/>
<script>
var disqus_config = function () {
this.page.url = "<data:blog.canonicalUrl/>"; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = ""; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
this.page.title = "<data:blog.pageName/>";
};
</script>
<noscript>Please enable JavaScript to view the <a href='https://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>
</section>
</b:if>
</b:includable>
<b:includable id='commentsTitle'>
<h3 class='title'>
<b:if cond='data:post.numberOfComments > 0'>
<b:message name='messages.numberOfComments'>
<b:param expr:value='data:post.numberOfComments' name='numComments'/>
</b:message>
<b:else/>
<data:messages.postAComment/>
</b:if>
</h3>
</b:includable>
Yang terakhir simpan kode dibawah ini diatas tag penutup body </body>
atau <!--</body>--></body> dan ganti https-www-rapiserui-com dengan Shortname Disqus anda.
<b:if cond='data:blog.pageType in {"item"}'>
<script>
//<![CDATA[
var shortname = "https-www-rapiserui-com";
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/BlogKangErend/rapiseruijs/homern1.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>
Simpan template dan lihat hasilnya !
Artikel lainnya Tentang Disqus bisa anda buka pada :
- Tutup Buka Komentar Disqus
- Cara Memasang Komentar Disqus di Blog
