Pesan Komentar Dan Code Parser Untuk Komentar Disqus

Pesan Komentar Dan Code Parser Untuk Komentar Disqus

Bola Hero Gawai

Pesan Komentar Dan Code Parser Untuk Komentar Disqus

Pesan Komentar Dan Code Parser Untuk Komentar Disqus
Kini sistem komentar Disqus telah banyak digunakan Blogger baik pengguna Blogspot maupun Wordpress. Fitur dan pengelolaan komentar yang user friendly membuat banyak Blogger kepincut menggunakan Disqus.

Namun masih banyak pengguna baik moderator maupun komentator yang belum mengetahui cara menggunakan style text ketika berkomentar seperti cara membuat tulisan bold, italic, underline, strike, atau memasukan kode-kode html pada kolom komentar. Khususnya untuk blog-blog tutorial Blogger, fitur syntax ini sangat berguna untuk memperindah input kode. Namun sayang, masih banyak pengguna yang belum memahami cara memasukan kode ke dalam komentar Disqus.

Untuk itu, sebagai pemilik blog, saya rasa perlu untuk memberikan pesan komentar tentang cara menggunakan style text. Dan untuk blog tutorial Blogger, sangat diperlukan tool code parser agar kode yang dimasukan tidak error, seperti pada gambar animasi gif di atas tadi.

Bagaimana? Anda tertarik untuk mencobanya? Silahkan copy kode-kode di bawah ini. Kode di bawah ini sudah valid html5 dan responsive.

Kode CSS
Simpan di atas kode ]]></b:skin> atau </style>


.pesan-komentar{background:#efefef;padding:5px 10px 10px;width:auto;margin:15 auto 0;line-height:1.3em;position:relative;font-weight:400;border:1px solid #ddd;font-size:14px;color:#444}
.parser{background:#888;padding:3px 6px;margin:0;cursor:pointer;display:inline-block;float:left;text-align:center;color:#fff;}
#parser{padding:0;margin:10px 0 0;display:none}
#parser table,#parser2 table{margin:0 auto;width:100%}
#parser textarea#somewhere,#parser2 textarea#somewhere{background:#f8f8f8;border:1px solid #ccc;height:100px;width:100%;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#parser textarea#somewhere:active,#parser textarea#somewhere:focus,#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{border:2px solid #e8554e;outline:0}
input.button-parse{padding: 5px;}
.pesan-komentar .strike{text-decoration: line-through;}
.pesan-komentar:before{content:"";width:0;height:0;position:absolute;bottom:-22px;left:14px;border:11px solid transparent;border-color:#ddd transparent transparent}
.pesan-komentar:after{content:"";width:0;height:0;position:absolute;bottom:-20px;left:15px;border:10px solid transparent;border-color:#efefef transparent transparent}
code{font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;hyphens:none;color:#000}
.clear{clear:both;}

Kode Javascript
Simpan di atas kode </body>


<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, "&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>

Kemudian silahkan simpan kode HTML di atas kode


</article>
</b:includable>

Kode HTML


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='pesan-komentar'>
  <b>Cara style text di komentar Disqus:</b><br/>
<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'><i class='fa fa-code'/></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>

Dan pastikan Anda sudah menyimpan Jquery Library dan Font Awesome di blog Anda.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

2 Comments Add Comment

Mas, punya saya hasilnya ada di bawah artikel tepat. Supaya seperti milik bang Adhy apa yang perlu dibenai?

Balas
This comment has been removed by the author.
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×