Membuat Show Hide Pesan Komentar Disqus

Membuat Show Hide Pesan Komentar Disqus

Bola Hero Gawai

Membuat Show Hide Pesan Komentar Disqus

Membuat Show Hide Pesan Komentar Disqus
Seperti biasa, postingan ini dibuat untuk menjawab pertanyaan sahabat Kompi untuk show hide pesan komentar Disqus yang digunakan di blog ini.

Sebenarnya cara membuat pesan komentar ini sudah pernah saya posting, namun belum menggunakan efek show hide.

Nah bagi yang ingin mencoba menggunakan pesan komentar seperti Kompi Ajaib atau seperti pada gambar animasi di atas, silahkan ikuti caranya di bawah ini.

1. Langkah Pertama
Silahkan cari kode berikut:


<b:includable id='comments' var='post'>...</b:includable>


Kemudian silahkan copy kode HTML di bawah ini dan simpan di bawah kode di atas (di bawah kode </b:includable>)


<b:includable id='pesan-komentar' var='post'>
<div class='pesan-komentar' id='pesan-komentar'>
  <div class='tombol-pesan'>How to style text in Disqus comments:<span class='mata' id='tombol-pesan' onclick='toggleNavPanel(&apos;isi-pesan&apos;)'><i aria-hidden='true' class='fa fa-plus-square-o'></i></span></div>
  <div id='isi-pesan'>
    <ul>
      <li>To write a <b>bold</b> letter please use <code>&amp;lt;strong&amp;gt;&amp;lt;/strong&amp;gt;</code> or <code>&amp;lt;b&amp;gt;&amp;lt;/b&amp;gt;</code>.</li>
      <li>To write a <i>italic</i> letter please use <code>&amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;</code> or <code>&amp;lt;i&amp;gt;&amp;lt;/i&amp;gt;</code>.</li>
      <li>To write a <u>underline</u> letter please use <code>&amp;lt;u&amp;gt;&amp;lt;/u&amp;gt;</code>.</li>
      <li>To write a <span class='strike'>strikethrought</span> letter please use <code>&amp;lt;strike&amp;gt;&amp;lt;/strike&amp;gt;</code>.</li>
      <li>To write HTML code, please use <code>&amp;lt;code&amp;gt;&amp;lt;/code&amp;gt;</code> or <code>&amp;lt;pre&amp;gt;&amp;lt;/pre&amp;gt;</code> or <code>&amp;lt;pre&amp;gt;&amp;lt;code&amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/pre&amp;gt;</code>, and please
        <b>parse</b> the code in the parser box below.</li>
    </ul>
    <div class='parser' onclick='toggleNavPanel2(&apos;parser&apos;)'><i aria-hidden='true' class='fa fa-code'></i> <span id='parser-button'>Show Parser Box</span></div>
    <div class='clear' />
    <div id='parser'>
      <table>
        <tbody>
          <tr>
            <td>
              <textarea id='somewhere' onClick='document.execCommand(&quot;selectAll&quot;,false,null)'></textarea>
              <br/>
              <input class='button-parse' contenteditable='true' onclick='convert();' type='button' value='Parse Script' />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
</b:includable>


2. Langkah Kedua
Silahkan simpan kode CSS di bawah ini di atas kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/*<![CDATA[*/
.pesan-komentar {
  position: relative;
  background: #fff;
  padding: 8px;
  width: auto;
  margin: 0 auto;
  line-height: 1.3em;
  font-weight: 300;
  font-size: 100%;
  color: #444;
}

.parser {
  background: #888;
  padding: 3px 6px;
  margin: 5px 0 5px 2px;
  display: inline-block;
  float: left;
  color: #fff;
  font-size: 100%;
  cursor: pointer;
}

#isi-pesan li,
#isi-pesan ul {
  list-style-type: disc!important
}

#isi-pesan ul {
  padding-left: 20px;
  margin-bottom: 5px;
}

#parser {
  padding: 0;
  margin: 5px 0;
  display: none
}

#parser table {
  margin: 0 auto;
  width: 100%
}

#parser 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 {
  border: 2px solid #e8554e;
  outline: 0
}

input.button-parse {
  padding: 5px;
}

.pesan-komentar .strike {
  text-decoration: line-through
}

.tombol-pesan {
  display: block;
  font-weight: 500;
  vertical-align: middle
}

.mata {
  float: right;
  padding-top: 1px;
  cursor: pointer;
}

#isi-pesan {
  display: none
}

.clear {
  clear: both;
  display: block;
}

.pesan-komentar code {
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  white-space: initial;
  word-spacing: normal;
  word-break: normal;
  hyphens: none;
  color: #BC587E;
  font-size: 80%;
  padding: 0;
  vertical-align: 1px;
  font-style: normal!important;
}
/*]]>*/
</style>
</b:if>


3. Langkah Ketiga
Silahkan simpan kode javascript di bawah ini di atas kode </body>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
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;
};

function toggleNavPanel(e) {
  var n = document.getElementById(e),
    l = document.getElementById("tombol-pesan"),
    t = "block";
  n.style.display == t ? (n.style.display = "none", l.innerHTML = "<i class='fa fa-plus-square-o'></i>") : (n.style.display = "block", l.innerHTML = "<i class='fa fa-minus-square-o'></i>")
};

function toggleNavPanel2(e) {
  var n = document.getElementById(e),
    l = document.getElementById("parser-button"),
    t = "block";
  n.style.display == t ? (n.style.display = "none", l.innerHTML = "Show Parser Box") : (n.style.display = "block", l.innerHTML = "Hide Parse Box")
};
//]]>
</script>
</b:if>


4. Langkah Keempat
Silahkan simpan kode di bawah ini di atas kode komentar Disqus untuk menampilkan pesan komentarnya.


<b:include data='post' name='pesan-komentar'/>


Dan pastikan blog Anda sudah menggunakan Font Awesome.

Selesai....

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

1 Comment

Kalo membuat tombol konversi kaya di blog ini gimana mas? :)

Balas
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!

×
×
×