Cara Terbaru Membuat Tool Parse Komentar Disqus di Blog

Memasang komentar disqus dengan penambahan parser tool sudah pernah saya buat pada artikel sebelumnya tentang cara pasang kolom komentar dengan parser tool, yaitu pada postingan Membuat Pesan Komentar Dengan Parse Tool

Pada tutorial pertama, pemasangan parse tools berada diatas kotak komentar. Ada pembaharuan pada tutorial kali ini, yaitu pemasangan kolom komentar disqus dan tools parse dibuat berdampingan, atau model tab. Ini menjadikan tampilannya lebih menarik dan terlihat rapih.

cara pasang komentar disqus dengan parse tool

Apa fungsi dari parse tool ini?

Parse tool ini berfungsi untuk memberikan style pada tulisan yang nantinya bisa dimasukkan kedalam kolom komentar disqus. Selain itu, beberapa fungsi lain seperti penambahan <pre><code></code></pre> dan beberapa penambahan lain diantaranya yaitu

To write a bold letter please use or .
To write a italic letter please use or .
To write a underline letter please use .
To write a ~~strikethrought~~ letter please use <strike></strike>.
To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.

Pemasangan komentar disqus ini sudah saya kombinasikan dengan script click load agar tidak memberatkan loading blog. Dan tentunya ini berlaku juga apabila Anda sudah memiliki akun disqus. Namun jika belum punya dan tidak tahu cara membuatnya, Anda bisa membaca tutorial sebelumnya yaitu Cara Daftar dan Instal Widget Disqus di Blog

Cara Memasang Komentar Disqus dan Parse Tool

Berikut ini step by step pemasangan komentar disqus dengan parse tool. Silakan ikuti sampai tidak ada satupun kode yang tertinggal agar pemasangan ini bisa sukses diblog Anda.

Step 1. Kode CSS

Letakkan kode CSS berikut ini sebelum </head> atau </head>--></head>

<b:if cond='data:view.isPost'>
 <style type='text/css'>
/* Disqus Comments */
#comments{display:none;}
.post-comment-link{visibility:hidden;}
#disqus_thread{background:#fff;margin:auto;}
#disqusshow{background:#f24a4a;color:#fff;position:relative;overflow:hidden;display:block;padding:15px 20px;font-weight:500;font-size:16px;letter-spacing:.5px;cursor:pointer;margin:30px auto;text-align:center;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,0.05);transition:all .3s;}
#disqusshow:hover,#disqusshow:active{background:#e54444;color:#fff;box-shadow:0 4px 5px rgba(0,0,0,0.06),0 1px 1px rgba(0,0,0,0.09);}
.btncode,.mata,.parser{cursor:pointer;}
.checkbox{line-height:1.6em;color:#fff;display:none;}
#codes,#codes2{border:0;width:100%;height:150px;display:block;background-color:#fff;border-radius:3px;margin:0 auto 15px auto;padding:10px;font-size:14px;}
#opt1,#opt2,#opt3,#opt4,#opt5,.btncode,.parser{display:inline-block;vertical-align:middle;}
#codes:focus{background:#fff;color:#000;outline:0;}
.button-group{float:left;margin:5px auto;overflow:hidden;}
.button-group span{vertical-align:2px;line-height:1;color:#222;}
#opt1,#opt2,#opt3,#opt4,#opt5{border:none;outline:0;margin:0 10px 0 0;}
#opt10,#opt11,#opt12,#opt13,#opt14,#opt15,#opt16,#opt17,#opt18,#opt19,#opt20,#opt6,#opt7,#opt8,#opt9{display:inline-block;vertical-align:middle;border:none;outline:0;margin:0;}
.checkbox span{vertical-align:middle;line-height:1;color:#555;margin-right:10px;}
.btncode{position:relative;overflow:hidden;color:rgba(255,255,255,1);padding:6px 8px;margin-bottom:5px;font-size:13px;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;border-radius:3px;transition:all .3s;}
.btncode:active:focus,.btncode:focus,.btncode:focus,.btncode:hover{color:rgba(255,255,255,1);color:#fff;outline:0;}
.btncode:active{outline:0;}
.btn-primary{background:rgba(255,255,255,.35);}
.btn-primary:focus,.button-group button:disabled,.btn-primary:active,.btn-primary:hover{background:rgba(0,0,0,0.1);color:rgba(255,255,255,1);}
.btn-danger{background:rgba(255,255,255,.35);color:#fff;}
.btn-danger:focus,.btn-danger:active,.btn-danger:hover{background:rgba(0,0,0,0.1);color:#fff;}
.tombol-pesan{vertical-align:middle;display:block;}
.pesan-komentar{position:relative;text-align:center;background:#268fe0;padding:15px;width:100%;max-width:100%;display:block;margin:30px auto;line-height:normal;color:#fff;font-size:16px;letter-spacing:1px;font-weight:500;text-transform:uppercase;border-radius:3px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.05);transition:all .3s;}
.pesan-komentar:hover,.pesan-komentar:focus{color:#fff;box-shadow:0 4px 5px rgba(0,0,0,0.06),0 1px 1px rgba(0,0,0,0.09);}
#isi-pesan,#konversi-pesan,#parser{display:none;}
#isi-pesan{background:rgba(0,0,0,0.1);padding:15px;margin:15px auto;border-radius:3px;overflow:hidden;font-size:14px;font-weight:400;text-transform:none;text-align:left;}
#isi-pesan li,#isi-pesan ul{list-style-type:square;line-height:1.5;}
#isi-pesan ul{padding-left:20px;margin-bottom:5px;}
#isi-pesan .parser{display:inline-block;background:#fff;color:#747d8c;border-radius:3px;padding:5px 10px;font-size:13px;margin:10px 0 10px 18px;box-shadow:0 2px 8px rgba(0,0,0,0.05);transition:all .3s;}
#isi-pesan .parser:hover,#isi-pesan .parser:active{box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);}
#parser{padding:0;margin:5px 0;}
input.button-parse{padding:5px;}
.pesan-komentar .strike{text-decoration:line-through;}
.mata{position:absolute;font-size:24px;right:0;top:0;padding:10px 20px;z-index:2;}
#initab{position:relative;padding:0;margin:30px auto 0 auto;overflow:hidden;}
#initab section{display:none;padding:0;width:100%;}
#initab input{display:none;}
#initab label{text-align:center;background:#dfe0e0;padding:8px 14px;font-size:13px;display:inline-block;margin:5px 2px;color:#747d8c;border:1px solid #dfe0e0;border-radius:99em;transition:all .3s;}
#initab label:hover{background:#fff;color:#57606f;cursor:pointer;}
#initab input:checked + label{color:#57606f;}
#initab #tab1:checked ~ #content1,#initab #tab2:checked ~ #content2{display:inline-block;}
</style>
</b:if>

Step 2. HTML

Cari dan hapus semua kode ini beserta isinya <b:includable id='comments' var='post'>

Cara Terbaru Membuat Tool Parse Komentar Disqus di Blog

Lalu setelah semua terhapus, ganti dengan kode berikut ini.

<b:includable id='comments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='initab'>
<input checked='' id='tab1' name='tabs' type='radio'/>
<label for='tab1'>Disqus Comments</label>
<input id='tab2' name='tabs' type='radio'/>
<label for='tab2'>Disqus Code</label>
<section id='content1'>
<div class='ripplelink' id='disqusshow' onclick='load_Comments()'>Load comments</div>
<div id='disqus_thread'/>
</section>
<section id='content2'>
<div class='pesan-komentar' id='pesan-komentar'>
<div class='tombol-pesan'>Disqus Codes<span class='mata' id='tombol-pesan' onclick='toggleNavPanel(&apos;isi-pesan&apos;)'><i aria-hidden='true' class='fa fa-angle-down'/></span></div>
<div id='isi-pesan'>
<ul>
   <li>To write a <b>bold</b> letter please use <code>&amp;lt;strong&amp;gt;&amp;lt;/strong&amp;gt;</code> or <code>&amp;lt;b&amp;gt;&amp;lt;/b&amp;gt;</code>.</li>
   <li>To write a <i>italic</i> letter please use <code>&amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;</code> or <code>&amp;lt;i&amp;gt;&amp;lt;/i&amp;gt;</code>.</li>
   <li>To write a <u>underline</u> letter please use <code>&amp;lt;u&amp;gt;&amp;lt;/u&amp;gt;</code>.</li>
   <li>To write a <span class='strike'>strikethrought</span> letter please use <code>&amp;lt;strike&amp;gt;&amp;lt;/strike&amp;gt;</code>.</li>
   <li>To write HTML code, please use <code>&amp;lt;code&amp;gt;&amp;lt;/code&amp;gt;</code> or <code>&amp;lt;pre&amp;gt;&amp;lt;/pre&amp;gt;</code> or <code>&amp;lt;pre&amp;gt;&amp;lt;code&amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/pre&amp;gt;</code>.<br/>
And use <b>parse tool</b> below to easy get the style.</li>
  </ul>
<div class='parser' onclick='toggleNavPanel2(&apos;parser&apos;)'><i aria-hidden='true' class='fa fa-code'/>
<span id='parser-button'>Show Parse Box</span></div>
<div class='clear'/>
<div id='parser'>
<textarea id='codes' placeholder='Write / paste the code or text here then check the radio button click the appropriate button' spellcheck='false'/>
<span class='button-group'>
<button class='btncode btn-primary ripplelink' id='cvrt3' onclick='strongConvert();this.disabled = true;'>strong</button>
<button class='btncode btn-primary ripplelink' id='cvrt4' onclick='emConvert();this.disabled = true;'>em</button>
<button class='btncode btn-primary ripplelink' id='cvrt4' onclick='uConvert();this.disabled = true;'>u</button>
<button class='btncode btn-primary ripplelink' id='cvrt5' onclick='strikeConvert();this.disabled = true;'>strike</button>
<button class='btncode btn-primary ripplelink' id='cvrt7' onclick='preConvert();this.disabled = true;'>pre</button>
<button class='btncode btn-primary ripplelink' id='cvrt8' onclick='codeConvert();this.disabled = true;'>code</button>
<button class='btncode btn-primary ripplelink' id='cvrt9' onclick='precodeConvert();this.disabled = true;'>pre code</button>
<button class='btncode btn-primary ripplelink' id='cvrt10' onclick='spoilerConvert();this.disabled = true;'>spoiler</button>
<button class='btncode btn-danger ripplelink' onclick='cdClear();'>clean up</button>
</span>
<span class='checkbox'>
  <input checked='' id='opt1' type='checkbox'/>
  <input checked='' id='opt2' type='checkbox'/>
  <input checked='' id='opt3' type='checkbox'/>
  <input checked='' id='opt4' type='checkbox'/>
  <input checked='' id='opt5' type='checkbox'/><br/>
  <input checked='' id='opt6' type='checkbox'/> <span>strong</span>
  <input checked='' id='opt7' type='checkbox'/> <span>em</span>
  <input checked='' id='opt8' type='checkbox'/> <span>u</span>
  <input checked='' id='opt9' type='checkbox'/> <span>strike</span><br/>
  <input checked='' id='opt10' type='checkbox'/> <span>pre</span>
  <input checked='' id='opt11' type='checkbox'/> <span>code</span>
  <input checked='' id='opt12' type='checkbox'/> <span>pre code</span>
  <input checked='' id='opt13' type='checkbox'/> <span>spoiler</span><br/>
  <input checked='' id='opt20' type='checkbox'/> <span>embed</span>
</span>
</div>
</div>
<div class='clear'/></div>
</section>
</div>
            </b:if>
</b:includable>
    <b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
</script>
</b:includable>

Step 3. Script

Terakhir pasang kode js berikut sebelum </body> atau </body>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script>
//<![CDATA[
// Disqus Load
function load_Comments(){var e=document.getElementById("disqusshow");e.style.display="none";var t="dewaplokis";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()};
// Disqus Parse Tools
function cdClear(){var e=document.getElementById("codes");e.value="",e.focus();for(var t=document.querySelectorAll("#cvrt3, #cvrt4, #cvrt5, #cvrt6, #cvrt7, #cvrt8, #cvrt9, #cvrt10, #cvrt11"),c=0;c<t.length;c++)t[c].disabled=!1}function preConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),o=document.getElementById("opt3"),n=document.getElementById("opt4"),d=document.getElementById("opt5"),r=document.getElementById("opt10");t=t.replace(/\t/g,"    "),r.checked&&(c.checked&&(t=t.replace(/&/g,"&amp;")),l.checked&&(t=t.replace(/'/g,"&#039;")),o.checked&&(t=t.replace(/"/g,"&quot;")),n.checked&&(t=t.replace(/</g,"&lt;")),d.checked&&(t=t.replace(/>/g,"&gt;")),t=t.replace(/^/,"<pre>"),t=t.replace(/$/,"</pre>"),e.value=t,e.focus(),e.select())}function codeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),o=document.getElementById("opt3"),n=document.getElementById("opt4"),d=document.getElementById("opt5"),r=document.getElementById("opt11");t=t.replace(/\t/g,"    "),r.checked&&(c.checked&&(t=t.replace(/&/g,"&amp;")),l.checked&&(t=t.replace(/'/g,"&#039;")),o.checked&&(t=t.replace(/"/g,"&quot;")),n.checked&&(t=t.replace(/</g,"&lt;")),d.checked&&(t=t.replace(/>/g,"&gt;")),t=t.replace(/^/,"<code>"),t=t.replace(/$/,"</code>"),e.value=t,e.focus(),e.select())}function precodeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),o=document.getElementById("opt3"),n=document.getElementById("opt4"),d=document.getElementById("opt5"),r=document.getElementById("opt12");t=t.replace(/\t/g,"    "),r.checked&&(c.checked&&(t=t.replace(/&/g,"&amp;")),l.checked&&(t=t.replace(/'/g,"&#039;")),o.checked&&(t=t.replace(/"/g,"&quot;")),n.checked&&(t=t.replace(/</g,"&lt;")),d.checked&&(t=t.replace(/>/g,"&gt;")),t=t.replace(/^/,"<pre><code>"),t=t.replace(/$/,"</code></pre>"),e.value=t,e.focus(),e.select())}function spoilerConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt13");t=t.replace(/\t/g,"    "),c.checked&&(t=t.replace(/^/,"<spoiler>"),t=t.replace(/$/,"</spoiler>"),e.value=t,e.focus(),e.select())}function strongConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt6");t=t.replace(/\t/g,"    "),c.checked&&(t=t.replace(/^/,"<strong>"),t=t.replace(/$/,"</strong>"),e.value=t,e.focus(),e.select())}function emConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt7");t=t.replace(/\t/g,"    "),c.checked&&(t=t.replace(/^/,"<em>"),t=t.replace(/$/,"</em>"),e.value=t,e.focus(),e.select())}function uConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt8");t=t.replace(/\t/g,"    "),c.checked&&(t=t.replace(/^/,"<u>"),t=t.replace(/$/,"</u>"),e.value=t,e.focus(),e.select())}function strikeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt9");t=t.replace(/\t/g,"    "),c.checked&&(t=t.replace(/^/,"<strike>"),t=t.replace(/$/,"</strike>"),e.value=t,e.focus(),e.select())}function embedConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt20");t=t.replace(/\t/g,"    "),c.checked&&(t=t.replace(/^/,'<iframe src="https://embed.disqus.com/p/'),t=t.replace(/$/,'" style="border:0;width:100%;height:300px;" seamless="seamless" scrolling="no" allowtransparency="true"></iframe>'),e.value=t,e.focus(),e.select())}function toggleNavPanel(e){var t=document.getElementById(e),c=document.getElementById("tombol-pesan"),l="block";t.style.display==l?(t.style.display="none",c.innerHTML="<i class='fa fa-angle-down'></i>"):(t.style.display="block",c.innerHTML="<i class='fa fa-angle-up'></i>")}function toggleNavPanel2(e){var t=document.getElementById(e),c=document.getElementById("parser-button"),l="block";t.style.display==l?(t.style.display="none",c.innerHTML="Show Parser Box"):(t.style.display="block",c.innerHTML="Hide Parse Box")};
//]]>
</script>

Silakan ubah dewaplokis sesuai dengan nama akun disqus milik Anda. Hasil dari pemasangan ini bisa Anda lihat pada kotak komentar dibawah.

Demikian tutorial kali ini tentang cara terbaru memasang kotak komentar disqus dan parse tool. Jika menurut Anda tutorial ini bermanfaat, silakan dishare, dan jika ada yang kurang jelas, jangan sungkan untuk bertanya melalui kolom komentar dibawah