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 <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • 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 &lt;/head&gt;--&gt;&lt;/head&gt;
<b:if cond='data:view.isPost'>
 <style type='text/css'>
/* Disqus */
.tutup-komen{background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:15px 20px;text-align:center;font-weight:500;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;margin:30px auto;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.05);transition:all .3s}
#comments{display:none}
.post-comment-link{visibility:hidden}
#disqus_thread{background:#fff;margin:auto}
#dewaplokisDisqus{background:#e93d3d;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}
#dewaplokisDisqus:hover,button#dewaplokisDisqus: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;;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

Pasang kode berikut ini setelah kode <b:includable id='comments' var='post'>

Cara Terbaru Membuat Tool Parse Komentar Disqus di Blog

<b:if cond='data:view.isPost'>
 <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='comments' id='comments'/>
<div class='disqus-blogger-comment-block'/>
<div class='buka-komen' id='dewaplokisDisqus' onclick='document.getElementById(&quot;disqus_thread&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;dewaplokisDisqus&quot;).style.display=&quot;none&quot;' role='button' tabindex='0'>Load Comments</div>
<div class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById(&quot;disqus_thread&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;dewaplokisDisqus&quot;).style.display=&quot;block&quot;' role='button' tabindex='0'>Tutup Komentar</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='cvrt5' onclick='uConvert();this.disabled = true;'>u</button>
<button class='btncode btn-primary ripplelink' id='cvrt6' 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>


Step 3. Script

Terakhir pasang kode js berikut sebelum </body> atau  &lt;!--</body>--&gt;&lt;/body&gt;
<script>
//<![CDATA[
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)}()};
//]]>
</script>

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

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 <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • 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 &lt;/head&gt;--&gt;&lt;/head&gt;
<b:if cond='data:view.isPost'>
 <style type='text/css'>
/* Disqus */
.tutup-komen{background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:15px 20px;text-align:center;font-weight:500;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;margin:30px auto;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.05);transition:all .3s}
#comments{display:none}
.post-comment-link{visibility:hidden}
#disqus_thread{background:#fff;margin:auto}
#dewaplokisDisqus{background:#e93d3d;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}
#dewaplokisDisqus:hover,button#dewaplokisDisqus: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;;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

Pasang kode berikut ini setelah kode <b:includable id='comments' var='post'>

Cara Terbaru Membuat Tool Parse Komentar Disqus di Blog

<b:if cond='data:view.isPost'>
 <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='comments' id='comments'/>
<div class='disqus-blogger-comment-block'/>
<div class='buka-komen' id='dewaplokisDisqus' onclick='document.getElementById(&quot;disqus_thread&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;dewaplokisDisqus&quot;).style.display=&quot;none&quot;' role='button' tabindex='0'>Load Comments</div>
<div class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById(&quot;disqus_thread&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;dewaplokisDisqus&quot;).style.display=&quot;block&quot;' role='button' tabindex='0'>Tutup Komentar</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='cvrt5' onclick='uConvert();this.disabled = true;'>u</button>
<button class='btncode btn-primary ripplelink' id='cvrt6' 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>


Step 3. Script

Terakhir pasang kode js berikut sebelum </body> atau  &lt;!--</body>--&gt;&lt;/body&gt;
<script>
//<![CDATA[
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)}()};
//]]>
</script>

<script>
//<![CDATA[
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
Load Comments
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • 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>.
    And use parse tool below to easy get the style.
Show Parse Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter