Menambahkan Pesan Komentar Disqus Lengkap dengan Parser Box

Assalamu'alaikum sahabat awblog, sudah lama nggak posting dalam blog ini. Pada kesempatan kali ini kita akan belajar memanambahkan pesan komentar disqus yang dilengkapi dengan parser box. Penasaran bagaimana bentuknya? silakan lihat gambar di bawah ini :

Pesan komentar ini menurut saya penting di cantumkan dalam sebuah blog agar pembaca tahu dan mengerti pesan yang yang disampaikan penulis sebelum mereka mengomentari artikel yang ada dalam sebuah blog. Meskipun kebanyakan orang menghiraukan pesan komentar ini.

Oke langsung saja ke tutorianya :
1. Login ke blog sobat.
2. Plih bagian template >> Edit template
3. Masukkan CSS berikut ini.

.pesan-komentar{background:#fff;padding:0;width:auto;margin:20px;line-height:normal;position:relative;font-weight:400;color:#888;box-shadow:inset 0 0 1px 0 #aaa;}
.pesan-komentar h5{font-size:14px;margin:0;background:#f8695f;color:#fff;padding:15px 20px;font-weight:700;position:relative;font-family:'Open Sans',Arial,Sans-Serif;text-transform:uppercase;overflow:hidden;}
.pesan-komentar h5:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;background-color:#e85e54;color:#fff;top:0;right:0;padding:18px 20px;position:absolute}
.pesan-komentar .strike{text-decoration:line-through;display:inline;padding:0;}
.pesan-komentar ul{padding:20px}
.pesan-komentar ul li{list-style:none;padding:5px 0;}
.pesan-komentar ul li:first-child{padding:0 0 5px 0;}
.pesan-komentar ul li:last-child{padding:5px 0 0 0;}
.parser{background:#fff;border:1px solid #ddd;padding:3px 6px;margin:0 20px 20px;cursor:pointer;display:inline-block;float:left;text-align:center}
#parser{padding:0;margin:0 20px;display:none}
#parser table,#parser2 table{margin:0 auto;width:100%}
#parser textarea#somewhere,#parser2 textarea#somewhere{background:#fff;border:0;height:100px;width:98%;padding:10px;box-shadow:inset 0 0 0 1px #ddd;transition:all .6s}
#parser textarea#somewhere:active,#parser textarea#somewhere:focus,#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{color:#333;box-shadow:inset 0 0 0 1px #ccc;outline:0}
input.button-parse{padding:5px 8px;cursor:pointer;border:1px solid #e85e54;background:#f8695f;color:#fff;margin-bottom:20px;border-radius:2px;transition:all .3s}
input.button-parse:hover{background:#fff;border-color:#f8695f;color:#e85e54;}
.pesan-komentar ul li code{font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;hyphens:none;color:#888;}
.clear{clear:both;}

4. Letakkan code HTML berikut di tempat dimana agan akan memunculkan pensan komentarnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='pesan-komentar'>
<h5>Penulisan markup di komentar</h5>
<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' onclick='toggleNavPanel(&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>
</b:if>

5. Tambahkan script berikut agar parser boxnya berjalan

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

6. Simpan template dan lihat hasilnya

Sangat mudah kan sob, mungkin cukup sekian saja. Jika ada pertanyaan silakan bertanya, dan selamat mencoba.