Cara Pasang Pesan Komentar dengan Parse Kode

Pesan Komentar bonus Parse Kode

Komentar adalah fitur Blogger yang sangat penting, karena berpengaruh dengan search engine. Tapi, banyak komentator yang menyalahgunakan fitur ini untuk menyebarkan produk, beriklan dengan berlebihan / SPAM. Maka dari itu, ada baiknya para blogger memasang Pesan Komentar agar komentator tidak sembarangan saat berkomentar, dan juga terdapat Parse kode untuk memudahkan para komentator saat ingin berkomentar dalam bentuk HTML, misalnya berkomentar dengan style huruf yang beragam seperti Bold, Italic, Underline, Strikethrought, atau memasukkan kode HTML kedalam komentar. Jika berminat, silahkan lihat tutorial dibawah ini :

Tutorial :

1. Masuk Blogger > Template > HTML
2. Copy salin code CSS berikut ini, tepat diatas 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;}

3. Copy kode JavaScript berikut ini, tepat diatas 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>

4. Salin kode HTML berikut ini, tepat diatas kode </article></b:includable>

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

5. Save Template, silahkan dilihat hasilnya !

Sekian, terima kasih !
Jika ada kendala, silahkan komentar, dan harap terdapat JQuery dan Font Awesome di Template blog !

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