Komentar Blogger dan Disqus Berdampingan pada Template Igniplex - Erend Elektronik

Komentar Blogger dan Disqus Berdampingan pada Template Igniplex - Igniplex adalah template premium blogger hasil karya Igniel com. Di template Igniplex ini kolom untuk berinteraksi admin dengan pengunjung hanya ada kolom komentar blogger. Sedangkan bila kita membeli template Igniplex ini untuk blog yang sudah lama memakai kolom komentar Disqus maka tentunya kita harus menambahkan kolom komentar Disqus tsb.

Jadi masalah ketika kolom Komentar Blogger dan Disqus ingin ada dua-duanya pada template Igniplex ini. Apalagi bila kedua kolom komentar ini pingin tampil indah plus valid HTML5 dengan tombol yang bisa di-open dan close/buka-tutup (model Tab). Ada banyak bahasan mengenai (kolom) komentar Disqus ini pada postingan saya terdahulu. Silahkan anda baca pada Artikel;

- Membuat Tutup Buka Komentar Disqus
- Cara Memasang Komentar Disqus di Blog 2019
- Cara Pasang dan Daftar Untuk Mendapatkan Akun Disqus
- Cara Memasang Disqus Ringan dan Valid HTML5

Keterangan sebelum melanjutkan bahasan;

Tutorial Cara Membuat Kolom Komentar Blogger dan Disqus Berdampingan ini dikhusukan bagi pemakai template Igniplex versi 2.5 atau 2.6. Untuk selain pengguna template diatas itu maka mungkin saja tutornya bisa bekerja asalkan kita bisa mencari kode-kode CSS atu HTML yang akan kita ubah dengan kode yang seidentik.

Template Igniplex yang saya pakai sekarang adalah Igniplex V 2.5 meski sudah keterima update-an versi terbarunya V2.6. Namun saya lebih tertarik dengan versi 2.5 ini karena mudah diotak-atiknya (dimodifikasi) meski sekedar modifikasi kolom komentarnya.

Ya Gan, pada blog terdahulu saya menggunakan kolom komentar Disqus sehingga sayang bila meniadakan Disqus ini. Banyak plus minusnya kolom komentar Disqus, misal dalam hal segi loading blog. Banyak orang mengatakan bahwa kolom komentar Disqus memberatkan loading blog. Namun menurut saya tidak berarti besar, karena kecepatan blog saya masih 96 pada tampilan Mobile dan 100 pada tampilan Desktop, diukur menggunakan Tool PageSpeed Insights.

Komentar Blogger dan Disqus Berdampingan pada Template Igniplex ini sebenarnya bukan kolom komentarnya yang berdampingan, namun cuma tombol hide/show-nya saja (Buka Tutup Kolom Komentar). Sedangkan kolom komentarnya masih tampil secara individual. Cara membuatnyapun sangat mudah asal sobat betul-betul menggunakan template yang sama dengan tutor ini. Berikut adalah langkah yang perlu anda lakukan.

1. Login ke Akun Blogger 

2. Klik Rancangan lanjutkan dengan klik Edit HTML 

3. Baiknya sebelum melakukan perubahan, download template anda terlebih dahulu untuk menghindari kesalahan.

4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget 

5. Bila sudah, cari kode ]]></b:skin> (gunakan tombol ctrl + f untuk mempermudah pencarian) 

6. Kalau sudah dapat maka masukkan kode style berikut dibawah ini di atas kode ]]></b:skin> tadi.

/* Tombol Komen Rapi */
.comment-label{text-align:center;padding:20px;display:block}
#comment-loader{margin:15px 0 0;padding:20px 0}
#comment-loader b{background-color:#009688;color:#fff;cursor:pointer;font-weight:600;text-transform:uppercase;text-align:center;padding:10px 20px;margin:15px;margin-top:15px;border-radius:3px;}
.tombolkomen{display: block;margin:0 auto;width: 100%;}
.buttonkomenrapi{float:left;margin: 0 0 10px;border:none;color:#fff;font-weight:700;padding:10px;width:50%;}
.buttonkomenrapi:hover{opacity:.6;cursor:pointer}
.disqus{background:#2e9fff}
.blogger{background:#ff7043}
#comments{width:100%}
#disqus_thread{padding:20px}
#comment-holder .loadmore{display:none}

7. Langkah selanjutnya adalah menempatkan Tombol Buka Tutup Komentar. Silahkan anda cari kode <b:includable id='commentPicker' var='post'> atau yang seidentik dengan id='commentPicker' tadi. Contohnya seperti berikut ini;

<b:includable id='commentPicker' var='post'>
  <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threadedComments'/>
  <b:else/>
    <b:include data='post' name='comments'/>
  </b:if>
</b:includable>

Ganti semua kode tadi dengan kode berikut;

<b:includable id='commentPicker' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='comment-loader'>
    <b id='buka' onclick='bukakomentar()'>Buka Komentar</b>
    <b id='tutup' onclick='tutupkomentar()' style='display:none'>Tutup Komentar</b>
<script>//<![CDATA[
  function bukakomentar() {
    document.getElementById("buka").style.display="none";
    document.getElementById("tutup").style.display="block";
    document.getElementById("tombolkomen").style.display="block";
  }
  function tutupkomentar() {
    document.getElementById("buka").style.display="block";
    document.getElementById("tutup").style.display="none";
    document.getElementById("tombolkomen").style.display="none";
    document.getElementById("comments").style.display="none";
    document.getElementById("disqus_thread").style.display="none";
  }
setTimeout(function() {
    $('#comments').hide();
}, 1000);
//]]></script>
    <div class='tombolkomen' id='tombolkomen' style='display:none'>
     <button class='buttonkomenrapi disqus' onclick='$.ajaxSetup({cache:true});$.getScript(&quot;https://IDDISQUS.disqus.com/embed.js&quot;);$.ajaxSetup({cache:false}); document.getElementById(&apos;comments&apos;).style.display=&apos;none&apos;; document.getElementById(&apos;disqus_thread&apos;).style.display=&apos;block&apos;;'>Disqus</button>
     <button class='buttonkomenrapi blogger' onclick=' document.getElementById(&apos;comments&apos;).style.display=&apos;inline-block&apos;; document.getElementById(&apos;disqus_thread&apos;).style.display=&apos;none&apos;;'>Blogger</button>
    </div>
   </div>
   <div id='disqus_thread' style='display:none'/>
  </b:if>
<div id='comments-box'>
<b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threadedComments'/>
  <b:else/>
    <b:include data='post' name='comments'/>
  </b:if>
</div>
</b:includable>

8. Misi berikutnya adalah menempatkan kode dibawah diatas kode tag penutup body </body> atau seperti ini &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var disqus_shortname="https-www-rapiserui-com";
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);}
})();
 var divs = ["disqus-box", "blogger-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>

9. Langkah penutup sebagai langkah terakhir adalah mengganti var disqus_shortname="https-www-rapiserui-com"; dengan id disqus anda. Ganti tulisan berwarna merah dengan Id Disqus anda.

Tempatkan kode javascript berikut pada Tag Meta sobat, jika sudah ada abaikan saja karena bila memaksakan akan menjadi JQUERY yang double.

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

10. Save Template !

Artikel Terkait