› › › ›

Membuat Parse Tool Untuk Text Style Pada Komentar Disqus

Senin, 03 September 2018 Add Comment Edit
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 aba-aba HTML.

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

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


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

Silahkan simpan aba-aba CSS di bawah ini di atas aba-aba </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 aba-aba ibarat di bawah ini

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


Dan silahkan simpan aba-aba di bawah ini sempurna di bawah aba-aba </b:includable> dari aba-aba di atas.

               <b:includable id='pesan-blogger' var='post'>
 <div class='pesan-blogger' id='pesan-blogger'>
   <div class='tombol-pesan'>Gunakan konversi tool kalau ingin menyertakan aba-aba 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 aba-aba di sini kemudian klik 'Konversi Kode' atau tulis/paste URL image di sini kemudian 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 aba-aba atau teks di sini kemudian 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/AVvXsEgYgxAcm1qKfTXyAIk9RTX5kV2ZFJGbCcNb1awoyOxw99H-8UIBnH3QwBp6ygG0Z_7wmnwswAJus563m1IvtHTe9rIllu2Q3al5KWZKve307n5Sp913qF2GcOvN2LjYoaoPHLVE2TdqXtez/s1600/Animation2.gif" target="_blank" title="Membuat Parse Tool Untuk Text Style Pada Komentar Disqus" 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 aba-aba di bawah ini untuk menampilkan parse tool untuk komentar Blogger.

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

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

 <data:blogTeamBlogMessage/>

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

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

Dan silahkan simpan di atas aba-aba yang menampilkan komentar Disqus.

Terakhir silahkan simpan aba-aba javascript di bawah ini di atas aba-aba </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 kalau sebelumnya pernah memasang parse tool untuk komentar Blogger yang mirip-mirip ibarat di atas, silahkan hapus semua kode-kodenya.

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

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

Untuk aba-aba CSS silahkan gunakan aba-aba CSS di atas, penyimpanannya pun sama ibarat di atas. Untuk aba-aba HTML gunakan aba-aba 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 aba-aba atau teks di sini kemudian 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/AVvXsEgYgxAcm1qKfTXyAIk9RTX5kV2ZFJGbCcNb1awoyOxw99H-8UIBnH3QwBp6ygG0Z_7wmnwswAJus563m1IvtHTe9rIllu2Q3al5KWZKve307n5Sp913qF2GcOvN2LjYoaoPHLVE2TdqXtez/s1600/Animation2.gif" target="_blank" title="Membuat Parse Tool Untuk Text Style Pada Komentar Disqus" 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 aba-aba di bawah ini untuk menampilkan parse tool untuk komentar Disqus.

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

Dan silahkan simpan di atas aba-aba yang menampilkan komentar Disqus.

Terakhir silahkan simpan aba-aba javascript di bawah ini di atas aba-aba </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 aku update lagi jadi tidak perlu centang radio button, tinggal pribadi klik tombol yang sesuai yang ingin digunakan. Yang sudah pasang tinggal copy ulang aba-aba CSS dan aba-aba HTML saja, untuk aba-aba javascript tidak perlu diganti lagi.

Selesai, selamat mencoba....
Sumber https://www.kompiajaib.com/

0 Response to "Membuat Parse Tool Untuk Text Style Pada Komentar Disqus"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel