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 isyarat HTML untuk berkomentar seputar problem pada template blog Anda yang mengharuskan untuk memasukkan pola HTML pada kolom komentar untuk memperjelas pertanyaan Anda.
Sebahagian Admin blogger tidak memperbolehkan isyarat 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 isyarat tersebut jikalau komentarnya inging di publish.
Pesan komentar yang terpasang diatas kolom komentar biasanya berisi perihal penulisan style abjad "bold", "italic", underline, penulisan abjadstrikethrought dan penulisan<pre></pre> untuk HTLM dan menyuruh untuk melaksanakan parse sebelum memasang pesan yang menagdung isyarat 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 isyarat HTML, copy dan pastekan isyarat dibawah ini dibawah </article>. Jika dibawah isyarat tersebut terdapat isyarat HTML yang lain silahkan letakkan dibawahnya atau sebelum </b:includable>
Anda sanggup mengganti isi pesan pada isyarat <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 isyarat HTML untuk berkomentar seputar problem pada template blog Anda yang mengharuskan untuk memasukkan pola HTML pada kolom komentar untuk memperjelas pertanyaan Anda.
Sebahagian Admin blogger tidak memperbolehkan isyarat 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 isyarat tersebut jikalau komentarnya inging di publish.
Pesan komentar yang terpasang diatas kolom komentar biasanya berisi perihal penulisan style abjad "bold", "italic", underline, penulisan abjad
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 isyarat 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 isyarat HTML, copy dan pastekan isyarat dibawah ini dibawah </article>. Jika dibawah isyarat tersebut terdapat isyarat 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 abjad <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 abjad <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 abjad <u>underline</u> silahkan gunakan <code>&lt;u&gt;&lt;/u&gt;</code> . </li> <li>Untuk menulis abjad <span class='strike'>strikethrought</span> silahkan gunakan <code>&lt;strike&gt;&lt;/strike&gt;</code> . </li> <li>Untuk menulis isyarat 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 isyarat <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 isyarat 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 perihal menciptakan pesan komentar dengan parse tool
Sumber https://dewaplokis.blogspot.com/