Menambahkan pesan komentar Disqus dengan Parser Box pada Blog - Bagi tutorial lagi, kali ini saya membagikan cara menambahkan pesan komentar disqus dengan parser box, Pesan komentar ini menurut saya penting untuk dicantumkan dalam sebuah blog agar pembaca tahu dan mengerti pesan yang akan disampaikan penulis sebelum mereka mengomentari artikel yang ada dalam sebuah blog. dan juga bisa digunakan untuk komentar blog.meskipun kebanyakan menghiraukan pesan ini langsung saja daripada lama - lama lagi.
Cara Pemasangan :
1. Blogger > Template > Edit Html, masukkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>
.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;}
2. Masukkan kode dibawah ini , terserah ingin dimasukkan dimana saja.....<b:if cond='data:blog.pageType == "item"'>3. Simpan dan Lihat hasilnya......
<div class='pesan-komentar'>
<h5>Penulisan markup di komentar</h5>
<ul>
<li>Untuk menulis huruf <b>bold</b> silahkan gunakan <code>&lt;strong&gt;&lt;/strong&gt;</code> atau <code>&lt;b&gt;&lt;/b&gt;</code>.</li>
<li>Untuk menulis huruf <i>italic</i> silahkan gunakan <code>&lt;em&gt;&lt;/em&gt;</code> atau <code>&lt;i&gt;&lt;/i&gt;</code>.</li>
<li>Untuk menulis huruf <u>underline</u> silahkan gunakan <code>&lt;u&gt;&lt;/u&gt;</code>.</li>
<li>Untuk menulis huruf <span class='strike'>strikethrought</span> silahkan gunakan <code>&lt;strike&gt;&lt;/strike&gt;</code>.</li>
<li>Untuk menulis kode HTML silahkan gunakan <code>&lt;code&gt;&lt;/code&gt;</code> atau <code>&lt;pre&gt;&lt;/pre&gt;</code> atau <code>&lt;pre&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code>, dan silahkan <b>parse</b> dulu kodenya pada kotak parser di bawah ini.</li>
</ul>
<div class='parser' onclick='toggleNavPanel('parser')'><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>
<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, "&");replaced = replaced.replace(/</ig, "<");replaced = replaced.replace(/>/ig, ">");replaced = replaced.replace(/"/ig, """);replaced = replaced.replace(/±/ig, "±");replaced = replaced.replace(/©/ig, "©");replaced = replaced.replace(/®/ig, "®");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>
bagaimana berhasil ? kalo berhasil silahkan comment dibawah. itulah cara Menambahkan pesan komentar Disqus dengan Parser Box pada Blog. semoga bermanfaat..
