Membuat Parse Tool Untuk Text Style Pada Komentar Disqus

Membuat Parse Tool Untuk Text Style Pada Komentar Disqus

Bola Hero Gawai

Membuat Parse Tool Untuk Text Style Pada Komentar Disqus

Membuat Parse Tool Untuk Text Style Pada Komentar Disqus
Seperti telah kita ketahui bahwa pada kolom komentar Disqus kita dapat menggunakan <strong></strong>, <b></b>, <em></em>, <i></i>, <u></u>, <strike></strike>, <code></code>, <pre></pre>, <pre><code></code></pre> untuk gaya penulisan teks tebal, miring, garis bawah, coret, maupun penulisan syntax pada kode HTML.

Dan kini ditambah lagi dengan fitur baru yaitu penulisan <spoiler></spoiler> untuk show hide konten di kolom komentar maupun embed komentar Disqus di postingan blog.

Untuk itu saya mencoba membuat parse tool untuk mempermudah membuat text style untuk komentar Disqus. Pengguna tinggal mem-paste text ataupun kode di textarea lalu check radio button sesuai tag yang ingin digunakan kemudian klik tombol tag yang ingin digunakan. Untuk embed komentar, ambil ID DISQUS dari URL tombol share komentar Disqus lalu paste di textarea kemudian check radio button embed dan klik tombol embed untuk mendapatkan iframe embed komentarnya.


Parse tool text style Disqus ini saya modif dari parse tool untuk komentar blogger, jadi di sini saya satukan parse tool untuk Blogger dan Disqus. Untuk parse tool Blogger, saya juga menambahkan tombol untuk mempermudah membuat tag image untuk komentar Blogger. Yang ingin mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

Silahkan simpan kode CSS di bawah ini di atas kode </head>


<style type='text/css'>
/*<![CDATA[*/
.btn,.mata,.parser,button{cursor:pointer}
.checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;display:none}
#codes,#codes2{border:1px solid #ddd;width:100%;height:150px;display:block;background-color:#efefef;border-radius:3px;font:400 12px 'Courier New',Monospace;margin:7px 0 10px;padding:5px;box-sizing:border-box}
#opt1,#opt2,#opt3,#opt4,#opt5,.btn,.parser{display:inline-block;vertical-align:middle}
#codes:focus{background-color:#fff;color:#000;border:1px solid #ccc;outline:0}
.button-group{float:left;text-align:left;margin:-3px auto 0}
.button-group span{font:14px Tahoma,Verdana,Arial,Sans-Serif;vertical-align:2px;line-height:1;color:#555;}
#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{font:14px Tahoma,Verdana,Arial,Sans-Serif;vertical-align:middle;line-height:1;color:#555;margin-right:10px}
.btn,.btn:active{background-image:none}
.btn,.parser{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;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:1px solid transparent;border-radius:4px}
.btn:active:focus,.btn:focus,.parser:active:focus,.parser:focus{outline:0}
.btn:focus,.btn:hover,.parser:focus,.parser:hover{color:#333;text-decoration:none;outline:0}
.btn:active,.parser:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-primary,.parser{color:#fff!important;background-color:#337ab7;border-color:#2e6da4}
.btn-primary:focus,.button-group button:disabled,.parser:focus{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:active,.btn-primary:hover,.parser:active,.parser:hover{color:#fff;background-color:#286090;border-color:#204d74}
.btn-danger{color:#fff!important;background-color:#d9534f;border-color:#d43f3a}
.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}
.btn-danger:active,.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}
.btn-xs,.parser{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
.tombol-pesan{vertical-align:middle;display:block}
.pesan-komentar{position:relative}
.pesan-blogger,.pesan-komentar{background:#fff;padding:8px 10px;width:100%!important;max-width:706px!important;display:block!important;margin:0 auto;line-height:1.3em;font-weight:300;border:1px solid #ddd;font-size:100%;color:#444;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
#isi-pesan,#konversi-pesan,#parser{display:none}
#isi-pesan li,#isi-pesan ul{list-style-type:disc!important}
#isi-pesan ul{padding-left:20px;margin-bottom:5px}
#parser{padding:0;margin:5px 0}
input.button-parse{padding:5px}
.pesan-komentar .strike{text-decoration:line-through}
.tombol-pesan{font-weight:500}
.mata{float:right;padding-top:1px}
.clear{clear:both}
/*]]>*/
</style>

Kemudian silahkan cari kode seperti di bawah ini


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


Dan silahkan simpan kode di bawah ini tepat di bawah kode </b:includable> dari kode di atas.


              <b:includable id='pesan-blogger' var='post'>
<div class='pesan-blogger' id='pesan-blogger'>
  <div class='tombol-pesan'>Gunakan konversi tool jika ingin menyertakan kode atau gambar.<span class='mata' id='tombol-open' onclick='toggleNavPanel5(&apos;konversi-pesan&apos;)'><i aria-hidden='true' class='fa fa-plus-square-o'/></span></div>
  <div id='konversi-pesan'>
<textarea id="codes2" placeholder="Tulis/paste kode di sini lalu klik 'Konversi Kode' atau tulis/paste URL image di sini lalu klik 'Konversi Image'" spellcheck="false"></textarea>
<span class="button-group">
<button class="btn btn-primary btn-xs" id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi Kode</button>
<button class="btn btn-primary btn-xs" id="cvrt2" onclick="imgConvert();this.disabled = true;">Konversi Img</button><br />
<button class="btn btn-danger btn-xs" onclick="cdClear2();">Bersihkan</button>
</span>
<span class="checkbox">
  <input checked="" id="opt14" type="checkbox"/>
  <input id="opt15" type="checkbox"/>
  <input id="opt16" type="checkbox"/>
  <input checked="" id="opt17" type="checkbox"/>
  <input checked="" id="opt18" type="checkbox"/><br />
  <input checked="" id="opt19" type="checkbox"/> <span>image</span></span>
  </div><div class='clear'></div>
</div>
</b:includable>
              <b:includable id='pesan-komentar' var='post'>
<div class='pesan-komentar' id='pesan-komentar'>
  <div class='tombol-pesan'>How to style text in Disqus comments:<span class='mata' id='tombol-pesan' onclick='toggleNavPanel(&apos;isi-pesan&apos;)'><i aria-hidden='true' class='fa fa-plus-square-o'/></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 Parser Box</span></div>
<div class='clear'/>
<div id='parser'>
<textarea id="codes" placeholder="Tulis/paste kode atau teks di sini lalu klik tombol yang sesuai. Untuk embed komentar, ambil ID DISQUS dari URL tombol share komentar Disqus." spellcheck="false"></textarea>
<span class="button-group">
<button class="btn btn-primary btn-xs" id="cvrt3" onclick="strongConvert();this.disabled = true;">strong</button>
<button class="btn btn-primary btn-xs" id="cvrt4" onclick="emConvert();this.disabled = true;">em</button>
<button class="btn btn-primary btn-xs" id="cvrt4" onclick="uConvert();this.disabled = true;">u</button>
<button class="btn btn-primary btn-xs" id="cvrt5" onclick="strikeConvert();this.disabled = true;">strike</button>
<button class="btn btn-primary btn-xs" id="cvrt7" onclick="preConvert();this.disabled = true;">pre</button>
<button class="btn btn-primary btn-xs" id="cvrt8" onclick="codeConvert();this.disabled = true;">code</button>
<button class="btn btn-primary btn-xs" id="cvrt9" onclick="precodeConvert();this.disabled = true;">pre code</button>
<button class="btn btn-primary btn-xs" id="cvrt10" onclick="spoilerConvert();this.disabled = true;">spoiler</button><br />
<button class="btn btn-primary btn-xs" id="cvrt11" onclick="embedConvert();this.disabled = true;">embed</button> <span>- http://disq.us/p/[ID DISQUS] - <a href="https://3.bp.blogspot.com/-5wJN6R18cZs/V8LMLmATPCI/AAAAAAAAnrk/j6xr9K2DPDMX7RNpb5qXttuHUwKQ7QK-wCLcB/s1600/Animation2.gif" target="_blank" title="Lihat di sini" rel="nofollow">lihat di sini</a>.</span><br />
<button class="btn btn-danger btn-xs" onclick="cdClear();">Bersihkan</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>
</b:includable>

Kemudian silahkan copy kode di bawah ini untuk menampilkan parse tool untuk komentar Blogger.


<b:include data='post' name='pesan-blogger'/>

Dan simpan di atas kode di bawah ini (biasanya ada 4 buah)


<data:blogTeamBlogMessage/>

Kemudian silahkan copy kode di bawah ini untuk menampilkan parse tool untuk komentar Disqus.


<b:include data='post' name='pesan-komentar'/>

Dan silahkan simpan di atas kode yang menampilkan komentar Disqus.

Terakhir silahkan simpan kode javascript di bawah ini di atas kode </body>


<script type='text/javascript'>
//<![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 cdClear2(){var e=document.getElementById("codes2");e.value="",e.focus();for(var t=document.querySelectorAll("#cvrt, #cvrt2"),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"),a=document.getElementById("opt10");t=t.replace(/\t/g,"    "),a.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"),a=document.getElementById("opt11");t=t.replace(/\t/g,"    "),a.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"),a=document.getElementById("opt12");t=t.replace(/\t/g,"    "),a.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 cdConvert(){var e=document.getElementById("codes2"),t=e.value,c=document.getElementById("opt14"),l=document.getElementById("opt15"),o=document.getElementById("opt16"),n=document.getElementById("opt17"),d=document.getElementById("opt18");t=t.replace(/\t/g,"    "),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=-1!=t.lastIndexOf("\n")||t.length>40?t.replace(/^/,'<i rel="pre">'):t.replace(/^/,'<i rel="code">'),t=t.replace(/$/,"</i>"),e.value=t,e.focus(),e.select()}function imgConvert(){var e=document.getElementById("codes2"),t=e.value,c=document.getElementById("opt19");t=t.replace(/\t/g,"    "),c.checked&&(t=t.replace(/^/,'<i rel="image">'),t=t.replace(/$/,"</i>"),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-plus-square-o'></i>"):(t.style.display="block",c.innerHTML="<i class='fa fa-minus-square-o'></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")}function toggleNavPanel5(e){var t=document.getElementById(e),c=document.getElementById("tombol-open"),l="block";t.style.display==l?(t.style.display="none",c.innerHTML="<i class='fa fa-plus-square-o'></i>"):(t.style.display="block",c.innerHTML="<i class='fa fa-minus-square-o'></i>")}
//]]>
</script>

Dan pastikan bahwa Anda sudah memasang Font Awesome pada blog Anda. Dan jika sebelumnya pernah memasang parse tool untuk komentar Blogger yang mirip-mirip seperti di atas, silahkan hapus semua kode-kodenya.

Untuk demo bisa dilihat di kolom komentar blog ini atau Demo JsFiddle.

UPDATE:
Untuk yang ingin menggunakan HANYA Parse tool untuk komentar Disqus saja, silahkan ikuti langkahnya di bawah ini.

Untuk kode CSS silahkan gunakan kode CSS di atas, penyimpanannya pun sama seperti di atas. Untuk kode HTML gunakan kode di bawah ini namun penyimpanannya sama dengan di atas.


              <b:includable id='pesan-komentar' var='post'>
<div class='pesan-komentar' id='pesan-komentar'>
  <div class='tombol-pesan'>How to style text in Disqus comments:<span class='mata' id='tombol-pesan' onclick='toggleNavPanel(&apos;isi-pesan&apos;)'><i aria-hidden='true' class='fa fa-plus-square-o'/></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 Parser Box</span></div>
<div class='clear'/>
<div id='parser'>
<textarea id="codes" placeholder="Tulis/paste kode atau teks di sini lalu check radio button klik tombol yang sesuai. Untuk embed komentar, ambil ID DISQUS dari URL tombol share komentar Disqus." spellcheck="false"></textarea>
<span class="button-group">
<button class="btn btn-primary btn-xs" id="cvrt3" onclick="strongConvert();this.disabled = true;">strong</button>
<button class="btn btn-primary btn-xs" id="cvrt4" onclick="emConvert();this.disabled = true;">em</button>
<button class="btn btn-primary btn-xs" id="cvrt4" onclick="uConvert();this.disabled = true;">u</button>
<button class="btn btn-primary btn-xs" id="cvrt5" onclick="strikeConvert();this.disabled = true;">strike</button>
<button class="btn btn-primary btn-xs" id="cvrt7" onclick="preConvert();this.disabled = true;">pre</button>
<button class="btn btn-primary btn-xs" id="cvrt8" onclick="codeConvert();this.disabled = true;">code</button>
<button class="btn btn-primary btn-xs" id="cvrt9" onclick="precodeConvert();this.disabled = true;">pre code</button>
<button class="btn btn-primary btn-xs" id="cvrt10" onclick="spoilerConvert();this.disabled = true;">spoiler</button><br />
<button class="btn btn-primary btn-xs" id="cvrt11" onclick="embedConvert();this.disabled = true;">embed</button> <span>- http://disq.us/p/[ID DISQUS] - <a href="https://3.bp.blogspot.com/-5wJN6R18cZs/V8LMLmATPCI/AAAAAAAAnrk/j6xr9K2DPDMX7RNpb5qXttuHUwKQ7QK-wCLcB/s1600/Animation2.gif" target="_blank" title="Lihat di sini" rel="nofollow">lihat di sini</a>.</span><br />
<button class="btn btn-danger btn-xs" onclick="cdClear();">Bersihkan</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>
</b:includable>

Kemudian silahkan copy kode di bawah ini untuk menampilkan parse tool untuk komentar Disqus.


<b:include data='post' name='pesan-komentar'/>

Dan silahkan simpan di atas kode yang menampilkan komentar Disqus.

Terakhir silahkan simpan kode javascript di bawah ini di atas kode </body>


<script type='text/javascript'>
//<![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-plus-square-o'></i>"):(t.style.display="block",c.innerHTML="<i class='fa fa-minus-square-o'></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>

UPDATE KEDUA:
Untuk tool parse ini sudah saya update lagi jadi tidak perlu centang radio button, tinggal langsung klik tombol yang sesuai yang ingin digunakan. Yang sudah pasang tinggal copy ulang kode CSS dan kode HTML saja, untuk kode javascript tidak perlu diganti lagi.

Selesai, selamat mencoba....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

5 Comments Add Comment

nah buat yang menggunakan form komentar discus ini kang adhy sudah membagikan triknya sepaya lebih keren

Balas

Hehehe biar lebih mudah nulis komentar dengan menyertakan kode-kode mas :)

Balas

Kang masih binggung taruh code
<b:include data='post' name='pesan-komentar'/>
dimana? udah nyari tapi nggak muncul

Balas

Coba simpan di bawah kode
<div class='comments' id='comments'>

Balas

kang adhy mau tanya lagi sorry oot
kalau mau nambahin gambar dikomentar gimana ya?

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×