Pesan Komentar Dan Code Parser Untuk Komentar Disqus

Kini sistem komentar Disqus telah banyak dipakai Blogger baik pengguna Blogspot maupun Wordpress. Fitur dan pengelolaan komentar yang user friendly menciptakan banyak Blogger kepincut memakai Disqus.

Namun masih banyak pengguna baik moderator maupun komentator yang belum mengetahui cara memakai style text dikala berkomentar menyerupai cara menciptakan goresan pena bold, italic, underline, strike, atau memasukan kode-kode html pada kolom komentar. Khususnya untuk blog-blog tutorial Blogger, fitur syntax ini sangat mempunyai kegunaan untuk memperindah input kode. Namun sayang, masih banyak pengguna yang belum memahami cara memasukan isyarat ke dalam komentar Disqus.

Untuk itu, sebagai pemilik blog, aku rasa perlu untuk memperlihatkan pesan komentar perihal cara memakai style text. Dan untuk blog tutorial Blogger, sangat dibutuhkan tool code parser biar isyarat yang dimasukan tidak error, menyerupai pada gambar animasi gif di atas tadi.

Bagaimana? Anda tertarik untuk mencobanya? Silahkan copy kode-kode di bawah ini. Kode di bawah ini sudah valid html5 dan responsive.

Kode CSS
Simpan di atas kode ]]></b:skin> atau </style>

 .pesan-komentar{background:#efefef;padding:5px 10px 10px;width:auto;margin:15 auto 0;line-height:1.3em;position:relative;font-weight:400;border:1px solid #ddd;font-size:14px;color:#444}
 .parser{background:#888;padding:3px 6px;margin:0;cursor:pointer;display:inline-block;float:left;text-align:center;color:#fff;}
 #parser{padding:0;margin:10px 0 0;display:none}
 #parser table,#parser2 table{margin:0 auto;width:100%}
 #parser textarea#somewhere,#parser2 textarea#somewhere{background:#f8f8f8;border:1px solid #ccc;height:100px;width:100%;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
 #parser textarea#somewhere:active,#parser textarea#somewhere:focus,#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{border:2px solid #e8554e;outline:0}
 input.button-parse{padding: 5px;}
 .pesan-komentar .strike{text-decoration: line-through;}
 .pesan-komentar:before{content:"";width:0;height:0;position:absolute;bottom:-22px;left:14px;border:11px solid transparent;border-color:#ddd transparent transparent}
 .pesan-komentar:after{content:"";width:0;height:0;position:absolute;bottom:-20px;left:15px;border:10px solid transparent;border-color:#efefef transparent transparent}
 code{font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;hyphens:none;color:#000}
 .clear{clear:both;}

Kode Javascript
Simpan di atas isyarat </body>

 <script type='text/javascript'>
 //<![CDATA[
 $(document).ready(function(){$(".parser").click(function(){$("#parser").slideToggle("slow")})});
 function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;};
 //]]>
 </script>

Kemudian silahkan simpan isyarat HTML di atas kode

 </article>
 </b:includable>

Kode HTML

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='pesan-komentar'>
   <b>Cara style text di komentar Disqus:</b><br/>
 <ul>
    <li>Untuk menulis aksara <b>bold</b> silahkan gunakan <code>&amp;lt;strong&amp;gt;&amp;lt;/strong&amp;gt;</code> atau <code>&amp;lt;b&amp;gt;&amp;lt;/b&amp;gt;</code>.</li>
    <li>Untuk menulis aksara <i>italic</i> silahkan gunakan <code>&amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;</code> atau <code>&amp;lt;i&amp;gt;&amp;lt;/i&amp;gt;</code>.</li>
    <li>Untuk menulis aksara <u>underline</u> silahkan gunakan <code>&amp;lt;u&amp;gt;&amp;lt;/u&amp;gt;</code>.</li>
    <li>Untuk menulis aksara <span class='strike'>strikethrought</span> silahkan gunakan <code>&amp;lt;strike&amp;gt;&amp;lt;/strike&amp;gt;</code>.</li>
    <li>Untuk menulis isyarat HTML silahkan gunakan <code>&amp;lt;code&amp;gt;&amp;lt;/code&amp;gt;</code> atau <code>&amp;lt;pre&amp;gt;&amp;lt;/pre&amp;gt;</code> atau <code>&amp;lt;pre&amp;gt;&amp;lt;code&amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/pre&amp;gt;</code>, dan silahkan <b>parse</b> dulu kodenya pada kotak parser di bawah ini.</li>
   </ul>
 <div class='parser'><i class='fa fa-code'/></div>
 <div class='clear'/>
 <div id='parser'>
 <table><tbody>
 <tr> <td><textarea id='somewhere'/><br/>
 <input class='button-parse' contenteditable='true' onclick='convert();' type='button' value='Parse Script'/></td> </tr>
 </tbody></table>
 </div>
 </div>
 </b:if>

Dan pastikan Anda sudah menyimpan Jquery Library dan Font Awesome di blog Anda.
Sumber https://www.kompiajaib.com/

Share this post