Skip to main content
Privacy • Sitemap
©2023 KOMPI AJAIB
HomeBloggerJavascriptTutorialWidgetMembuat Parse Tool Untuk Text Style Pada Komentar Disqus

Membuat Parse Tool Untuk Text Style Pada Komentar Disqus

Ditulis oleh: Adhy Suryadi
Ditulis pada: 8/28/2016

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNhKNL4L4j_aiHx-PCvK8Axd27OPz20NTA3u_cjDKoBRDcm052P8KAiSytDSoKwp6d4r7F_MqJp-iDgOGgbWyIrqzIwCky8aiIgeHHkz8YLq9LLgcw_1qsPdMxjTG-rTParn6b8JAe5c0x/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNhKNL4L4j_aiHx-PCvK8Axd27OPz20NTA3u_cjDKoBRDcm052P8KAiSytDSoKwp6d4r7F_MqJp-iDgOGgbWyIrqzIwCky8aiIgeHHkz8YLq9LLgcw_1qsPdMxjTG-rTParn6b8JAe5c0x/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....

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

slot gacor joker123 sultan69 panenslot panen77 Panengg panenslot slot gacor Panen138 kenzo123 panenslot panenslot login panen138 panen77 linuxmagazines.com panen77 sublimelody.com http://103.146.203.79/ https://panenslot.shop/ panenslot panen77 Dewi138 Panen99 sbobet casino online mahjong ways 2 jawatogel kpk88 slot gacor betgratis
Iklan oleh KompiAjaib

Privacy • Sitemap
©2021 KOMPI AJAIB