Cara Membuat Show Hide Pesan Komentar Disqus di blogger Cara Membuat Show Hide Pesan Komentar Disqus di blogger - mizipediacom mizipediacom: Cara Membuat Show Hide Pesan Komentar Disqus di blogger

KATEGORI










LIVE TV

Iklan Semua Halaman

Cara Membuat Show Hide Pesan Komentar Disqus di blogger

Sunday, March 4, 2018




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.
Lihat Juga