Skip to content Skip to sidebar Skip to footer
Membuat Pesan Komentar Dengan Parse Tool

Membuat Pesan Komentar Dengan Parse Tool

Membuat pesan komentar dengan menambahkan kotak parse tool diatas kolom komentar.
Pernahkah Anda ingin berkomentar pada sebuah blog yang dengan niche design blog atau niche yang lain lalu Anda menemukan sebuah pesan diatas kolom komentar. Pesan paling umum pada sebuah blog biasanya berbuni "Silahkan Berikan Komentar sesuai Postingan", "Dilarang Menautkan Link Aktif", "Komentar Anda Mencerminkan Kepribadian Anda" dll.

Mungkin Anda ingin memasukkan kode HTML untuk berkomentar seputar masalah pada template blog Anda yang mengharuskan untuk memasukkan contoh HTML pada kolom komentar untuk memperjelas pertanyaan Anda.

membuat parse tool pada pesan komentar

Sebahagian Admin blogger tidak memperbolehkan kode HTML masuk kedalam kolom komentar. Komentar tidak akan di publish atau di approve. Sebagian dari Admin blogger tersebut menyuruh untuk melakukan parse HTML terlebih dahulu sebelum memasukkan komentar yang mengandung kode tersebut jika komentarnya inging di publish.

Pesan komentar yang terpasang diatas kolom komentar biasanya berisi tentang penulisan style huruf "bold", "italic", underline, penulisan huruf strikethrought dan penulisan<pre></pre> untuk HTLM dan menyuruh untuk melakukan parse sebelum memasang pesan yang menagdung kode HTML tersebut. Pesan komentar seperti ini sangat menarik dan membuat tampilan blog jadi semakin keren.

Lantas bagaima cara membuat pesan komentar tersebut?. di tutorial kali ini, saya akan membagikan caranya. Cara ini bisa diterapkan disemua jenis sitem komentar, baik itu komentar blogger maupun kometar Disqus Kecuali kolom komentar facebook. Silahkan disimak baik-baik.

Cara Membuat Pesan Komentar Dengan Parse Tool

1. Salin kode css berikut sebelum atau diatas </head>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style type='text/css'>
/* Pesan Komentar Dewa plokis */
.pesan-komentar{
background:#fff;
padding:0;
width:auto;
margin:20px 0;
line-height:normal;
position:relative;
font-weight:400;
color:#888;
border:1px solid #e9e9e9;
box-shadow:inset 0 0 1px 0 #aaa;
}
.pesan-komentar h5{
font-size:14px;margin:0;
background:#4f97cc;
color:#fff;
padding:15px 20px;
font-weight:700;
position:relative;
font-family:'Roboto',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:#4480ad;
color:#fff;
top:0;
right:0;
padding:15px 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:none;
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
}
@media screen and (max-width:480px){
#comment-editor{
border:none
}
.pesan-komentar ul,#comments{
padding:10px
}
</style>
</b:if>

2. Untuk kode HTML, copy dan pastekan kode dibawah ini dibawah </article>. Jika dibawah kode tersebut terdapat kode HTML yang lain silahkan letakkan dibawahnya atau sebelum </b:includable>
 <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>

Anda bisa mengganti isi pesan pada kode <h5></h5> sesuai dengan keinginan Anda. Misalnya saja Anda ingin menambahkan isi pesan komentarnya menjadi "Cara Penulisan Style Komentar" atau Cara Penulisan Style Komentar Disqus.

3. Terkhir, pasang kode javascriptnya untuk parse toolnya diatas </body> atau &lt;!--</body>--&gt;
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".parser").click(function()
{$("#parser").slideToggle("fast")})});
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>

Save Template And kemudian lihat hasilnya

Demikianlah tutorial kali ini tentang membuat pesan komentar dengan parse tool
Load Comments
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Box

strong em u strike
pre code pre code spoiler
embed