Pesan Komentar Dan Code Parser Untuk Komentar Disqus

Ditulis oleh: Adhy Suryadi

Ditulis pada: 5/19/2015

Kini sistem komentar Disqus telah banyak digunakan Blogger baik pengguna Blogspot maupun Wordpress. Fitur dan pengelolaan komentar yang user friendly membuat banyak Blogger kepincut menggunakan Disqus.

Namun masih banyak pengguna baik moderator maupun komentator yang belum mengetahui cara menggunakan style text ketika berkomentar seperti cara membuat tulisan bold, italic, underline, strike, atau memasukan kode-kode html pada kolom komentar. Khususnya untuk blog-blog tutorial Blogger, fitur syntax ini sangat berguna untuk memperindah input kode. Namun sayang, masih banyak pengguna yang belum memahami cara memasukan kode ke dalam komentar Disqus.

Untuk itu, sebagai pemilik blog, saya rasa perlu untuk memberikan pesan komentar tentang cara menggunakan style text. Dan untuk blog tutorial Blogger, sangat diperlukan tool code parser agar kode yang dimasukan tidak error, seperti 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 kode </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 kode 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 huruf <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 huruf <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 huruf <u>underline</u> silahkan gunakan <code>&amp;lt;u&amp;gt;&amp;lt;/u&amp;gt;</code>.</li>

   <li>Untuk menulis huruf <span class='strike'>strikethrought</span> silahkan gunakan <code>&amp;lt;strike&amp;gt;&amp;lt;/strike&amp;gt;</code>.</li>

   <li>Untuk menulis kode 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.