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 kemudian 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 instruksi HTML untuk berkomentar seputar duduk masalah pada template blog Anda yang mengharuskan untuk memasukkan pola HTML pada kolom komentar untuk memperjelas pertanyaan Anda.
Sebahagian Admin blogger tidak memperbolehkan instruksi HTML masuk kedalam kolom komentar. Komentar tidak akan di publish atau di approve. Sebagian dari Admin blogger tersebut menyuruh untuk melaksanakan parse HTML terlebih dahulu sebelum memasukkan komentar yang mengandung instruksi tersebut jikalau komentarnya inging di publish.
Pesan komentar yang terpasang diatas kolom komentar biasanya berisi wacana penulisan style aksara "bold", "italic", underline, penulisan aksarastrikethrought dan penulisan<pre></pre> untuk HTLM dan menyuruh untuk melaksanakan parse sebelum memasang pesan yang menagdung instruksi HTML tersebut. Pesan komentar menyerupai ini sangat menarik dan menciptakan tampilan blog jadi semakin keren.
Lantas bagaima cara menciptakan pesan komentar tersebut?. di tutorial kali ini, aku akan membagikan caranya. Cara ini sanggup diterapkan disemua jenis sitem komentar, baik itu komentar blogger maupun kometar Disqus Kecuali kolom komentar facebook. Silahkan disimak baik-baik.
2. Untuk instruksi HTML, copy dan pastekan instruksi dibawah ini dibawah </article>. Jika dibawah instruksi tersebut terdapat instruksi HTML yang lain silahkan letakkan dibawahnya atau sebelum </b:includable>
Anda sanggup mengganti isi pesan pada instruksi <h5></h5> sesuai dengan impian Anda. Misalnya saja Anda ingin menambahkan isi pesan komentarnya menjadi "Cara Penulisan Style Komentar" atau Cara Penulisan Style Komentar Disqus.
Pernahkah Anda ingin berkomentar pada sebuah blog yang dengan niche design blog atau niche yang lain kemudian 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 instruksi HTML untuk berkomentar seputar duduk masalah pada template blog Anda yang mengharuskan untuk memasukkan pola HTML pada kolom komentar untuk memperjelas pertanyaan Anda.
Sebahagian Admin blogger tidak memperbolehkan instruksi HTML masuk kedalam kolom komentar. Komentar tidak akan di publish atau di approve. Sebagian dari Admin blogger tersebut menyuruh untuk melaksanakan parse HTML terlebih dahulu sebelum memasukkan komentar yang mengandung instruksi tersebut jikalau komentarnya inging di publish.
Pesan komentar yang terpasang diatas kolom komentar biasanya berisi wacana penulisan style aksara "bold", "italic", underline, penulisan aksara
Lantas bagaima cara menciptakan pesan komentar tersebut?. di tutorial kali ini, aku akan membagikan caranya. Cara ini sanggup 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 instruksi css berikut sebelum atau diatas </head>
<b:if cond='data:blog.pageType == "item"'> <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 instruksi HTML, copy dan pastekan instruksi dibawah ini dibawah </article>. Jika dibawah instruksi tersebut terdapat instruksi HTML yang lain silahkan letakkan dibawahnya atau sebelum </b:includable>
<b:if cond='data:blog.pageType == "item"'> <div class='pesan-komentar'> <h5>Penulisan markup di komentar</h5> <ul><li>Untuk menulis aksara <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 aksara <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 aksara <u>underline</u> silahkan gunakan <code>&lt;u&gt;&lt;/u&gt;</code> . </li> <li>Untuk menulis aksara <span class='strike'>strikethrought</span> silahkan gunakan <code>&lt;strike&gt;&lt;/strike&gt;</code> . </li> <li>Untuk menulis instruksi 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>Anda sanggup mengganti isi pesan pada instruksi <h5></h5> sesuai dengan impian Anda. Misalnya saja Anda ingin menambahkan isi pesan komentarnya menjadi "Cara Penulisan Style Komentar" atau Cara Penulisan Style Komentar Disqus.
3. Terkhir, pasang instruksi javascriptnya untuk parse toolnya diatas </body> atau <!--</body>-->
<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, "&"); 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;}; //]]> </script> Save Template And kemudian lihat hasilnya
Demikianlah tutorial kali ini wacana menciptakan pesan komentar dengan parse tool
Sumber https://dewaplokis.blogspot.com/