Thêm chỉ dẫn nhận xét và Code Parser cho Disqus Comments (Adhy Suryadi)

Now the Disqus comment system has been widely used both Blogger Blogspot or WordPress users. Features and management comments are user friendly making attracted many Bloggers using Disqus. But there are still many users of both moderators and commentators who do not know how to use a text style when writing comments such as how to create bold, italic, underline, strike, or enter a html code in the comments field. Especially for blogs Blogger tutorial, syntax feature is very useful to enhance the input code. But unfortunately, there are still many users who do not understand how to enter the code into the Disqus comment. For that, as the owner of the blog, I feel the need to leave a message comment on how to use text style. Bloggers and blog tutorials, indispensable tool parser code so that the code you entered did not error, such as the animated gif image above. How? You excited to try? Please copy the code below. The code below is valid HTML5 and responsive.

1. Add CSS

.message-comment{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;}
.message-comment .strike{text-decoration: line-through;}
.message-comment:before{content:"";width:0;height:0;position:absolute;bottom:-22px;left:14px;border:11px solid transparent;border-color:#ddd transparent transparent}
.message-comment: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;}
.btn-message{display:block;vertical-align:middle}.mata{float:right;padding-top:1px}#isi-pesan{display:none}

2. Copy code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='message-comment' id='message-comment'>
<div class='btn-message'>How to style text in Disqus comments:<span class='mata' id='btn-message' onclick='toggleNavPanel(&apos;isi-pesan&apos;)'><i 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>, and please <b>parse</b> the code in the parser box below.</li>
</ul>
<div class='parser' onclick='toggleNavPanel2(&apos;parser&apos;)'><i class='fa fa-code'/> <span id='parser-button'>Show Parser Box</span></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>
</div>
</b:if>

and paste it above code:

</article>
</b:includable>

3. Javascript
Add this JS above </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;};
function toggleNavPanel(e){var n=document.getElementById(e),l=document.getElementById("btn-message"),t="block";n.style.display==t?(n.style.display="none",l.innerHTML="<i class='fa fa-plus-square-o'></i>"):(n.style.display="block",l.innerHTML="<i class='fa fa-minus-square-o'></i>")};
function toggleNavPanel2(e){var n=document.getElementById(e),l=document.getElementById("parser-button"),t="block";n.style.display==t?(n.style.display="none",l.innerHTML="Show Parser Box"):(n.style.display="block",l.innerHTML="Hide Parse Box")};
//]]>
</script>

And make sure  you have saved  Jquery Library and Font Awesome in your template

Repost from http://www.kompiajaib.com/2015/05/pesan-komentar-dan-code-parser-untuk.html

and http://www.kompiajaib.com/2015/09/alternatif-lain-memasang-komentar.html (comment)