Membuat Show Hide Pesan Komentar Disqus

Seperti biasa, postingan ini dibentuk untuk menjawab pertanyaan sahabat Kompi untuk show hide pesan komentar Disqus yang dipakai di blog ini.

Sebenarnya cara menciptakan pesan komentar ini sudah pernah aku posting, namun belum memakai dampak show hide.

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

1. Langkah Pertama
Silahkan cari isyarat berikut:

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

Kemudian silahkan copy isyarat HTML di bawah ini dan simpan di bawah isyarat di atas (di bawah isyarat </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 isyarat CSS di bawah ini di atas isyarat </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 isyarat javascript di bawah ini di atas isyarat </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 isyarat di bawah ini di atas isyarat komentar Disqus untuk menampilkan pesan komentarnya.

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

Dan pastikan blog Anda sudah memakai Font Awesome.

Selesai....
Sumber https://www.kompiajaib.com/

Share this post