Cara Membuat Show Hide Pesan Komentar Disqus di blogger




 Cara Membuat Show Hide Pesan Komentar Disqus di blogger

Pada pagi ini saya akan menjelaskan cara membuat show hide pesan komentar disqus di blogger: Cara membuat nya pun cukup mudah sekli tinggal mengikuti langkah- langkah di bawah ini, namun jika anda masih pemula atau newbie mungkin saya rasa anda akan mengalami kesulitan untuk menerapkan cara membuat show hide pesan komentar pada blog anda.

Karena ini sudah tentu berhubungan dengan kode css, js dn html sehingga anda akan kebingungan sedikit lah. Agar nantinya anda bisa mudah untuk menerapkan langkah- langkah untuk membuatnya, maka sebaiknya anda paham betul dari penjelasan di bawah ini, agar ada nantinya tidak mengalami keselahan dalam penerapan kode- kode tersebut pada template blog anda.

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

Show Hide Pesan Komentar Disqus

  1. Pertama , pastikan sobat udah masuk di dasbhor sobat sendiri
  2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Anda Temukan kode dibawah ini :
    <b:includable id='comments' var='post'>...</b:includable>
  4. 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>
  5. Anda Copas di bawah ini dan 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>
  6. Selanjutnya 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>
  7. Silahkan anda simpan kode di bawah ini di atas kode komentar Disqus untuk menampilkan pesan komentarnya.
    <b:include data='post' name='pesan-komentar'/>
  8. Dan pastikan blog Anda sudah menggunakan Font Awesome.
  9. Jika sudah anda klik Save Template dan lihat hasilnya. 
Demikian penjelsan pada pagi ini, selamat mencoba dan semoga bermanfaat.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect