Membuat Pesan Komentar Menggunakan Tombol Parse Di Blog

Cara Membuat Pesan Komentar Menggunakan Tombol Parse Terbaru | Memodifikasi template agar lebih rapi,unik.keren banyak di lakukan oleh setiap orang. semua ini di lakukan agar para pembaca postingan blog atau seorang pengunjung tidak merasakan bosa. nah kali ini saya akan membagikan tutorial yang mungkin bisa menjadikan blog kamu terlihat lebih keren dari sebelumnya.

Tertarik Untuk Membuatnya

Pertama masuk ke blogge>Template>Edit Html
Pada Edit Html Silahkan Copas code berikut tepat sebelum code </b:skin> atau</style>Untuk mempercepat pencarian silahkan kamu klik tombol

Ctrl

+

F

Pada Keyboard

/* Pesan Di Atas komentar */
.pesan-komentar{background:#fff;padding:0;width:auto;margin:10px auto 0 auto;line-height:normal;position:relative;font-weight:400;color:#888;box-shadow:inset 0 0 1px 0 #888;}
.pesan-komentar h5{font-size:14px;margin:0;background:#f8695f;color:#fff;padding:15px 20px;font-weight:700;position:relative;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: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:0;height:100px;width:100%;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:#151515;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;}

Selanjutnya silahkan kamu cari code</body> Lalu pastekan code berikut tepat di atas </body>

//<![CDATA[
// Pesan Komentar
$(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;};
//]]>

Terakhir silahkan kamu copas code di bawah ini lalu pastekan code tersebut tepat di bawah code <b:includable id="comments" var="post"></b:includable>

<div class='pesan-komentar'>
<h5>Penulisan markup di komentar</h5>
<ul>
<li>Untuk menulis huruf <b>bold</b> 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> 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> gunakan <code>&lt;u&gt;&lt;/u&gt;</code>.</li>
<li>Untuk menulis huruf <span class='strike'>strikethrought</span> gunakan <code>&lt;strike&gt;&lt;/strike&gt;</code>.</li>
<li>Untuk menulis kode HTML 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 silakan <b>parse</b> kode pada kotak parser di bawah ini.</li>
</ul>
<div class='parser'><i class='fa fa-code'></i></div>
<div class='clear'></div>
<div id='parser'>
<table><tbody>
<tr>
<td><textarea id='somewhere'></textarea><br/>
<input class='button-parse' contenteditable='true' onclick='convert();' type='button' value='Parse Script'/></td>
</tr>
</tbody></table>
</div>
</div>

Jika sudah selesai silahkan kamu save/simpan lalu pilih Pertinjau Untuk melihat hasil akhir

Pastikan Sebelum anda memasang Pesan Komentar Menggunakan Tombol Parse Terbaru Anda mem BackUp Templat, Guna mengantisipasi kegagalan

Artikel Terkait