Make Parse Tool To Text Style On Disqus Comments

Updated on December 17, 2019 - Post a Comment
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.
Author: Adhy Suriady
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. 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}

#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:right;text-align:right;margin:-3px auto 0}

#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 check 'image' dan klik 'Konversi Img'" 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 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 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><br/>

<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>

<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 id="opt6" type="checkbox"/> <span>strong</span>

  <input id="opt7" type="checkbox"/> <span>em</span>

  <input id="opt8" type="checkbox"/> <span>u</span>

  <input id="opt9" type="checkbox"/> <span>strike</span><br/>

  <input id="opt10" type="checkbox"/> <span>pre</span>

  <input id="opt11" type="checkbox"/> <span>code</span>

  <input id="opt12" type="checkbox"/> <span>pre code</span>

  <input id="opt13" type="checkbox"/> <span>spoiler</span><br/>

  <input id="opt20" type="checkbox"/> <span>embed, http://disq.us/p/[ID DISQUS] - <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbV9nL38F-CvIWGmMUpQEjxN4XxKj9KSwffoEGE6PwXzl2SY46vK_k3MmG006Mg8UPDIZ0uhPsP0NZkP0br2eEWzoNG5Zm9dCTdKXnC0Nu8P0io_WOfqNx02onXQZD6FGme3t4H8nRiRuf/s1600/Animation2.gif" target="_blank" title="Lihat di sini" rel="nofollow">lihat di sini</a>.</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.

Selesai, selamat mencoba....
Share this: pinterest