Cara Membuat Parse Tool For Disqus Comments Terbaru




Cara Membuat Parse Tool For Disqus Comments Terbaru
Cara Membuat Parse Tool For Disqus Comments Terbaru

Pada sore ini saya tidak panjang lebar untuk menjelaskan apa itu parse tool, berhubung saya baru siap kerja dan masih lelah hanya sedikit saja saya jelaskan, nah Parse Tool For Disqus Comments Terbaru ini hanya penambahan fungsi copy to clipboard agar dapat memudahkan meng-copy kode hasil parse sehingga pengguna tidak perlu menekan tombol CTRL + C di keyboard.

Nah bagi anda yang ingin melihat demonya bisa dilihat pada gambar animasi gif di atas 

 Untuk clipboard.js sudah saya buah defer sehingga tidak akan mengganggu loading blog.

Jika anda yang ingin mencobanya pada blog Anda boisa anda memgikutu tutorial cara nya di bawah ini.

Cara Membuat Parse Tool For Disqus Comments Terbaru

  1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
  2. Dan masuk pada bagian editor template , Untuk caranya pilih Menu Template -> Edit HTML.
  3. kode CSS, Lalu anda temukan kode  ]]></b:skin> Silahkan simpan kode CSS di bawah ini di atas kode yang bewarna merah tadi
    .checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;display:none}
    #codes2{border:1px solid #ddd;width:100%;height:150px;display:block;background-color:#efefef;border-radius:3px;font:400 12px 'Courier New',Monospace;margin:0 0 10px;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
    #codes2:active,#codes2:focus{background-color:#fff;color:#000;border:1px solid #ccc;outline:0}
    .button-group{float:left;text-align:left;margin:-3px auto 0}
    button{cursor:pointer}
    .button-group span{font-family:Roboto,Arial,sans-serif;font-size:12px;vertical-align:2px;line-height:1;vertical-align:-1px;color:#555;display:inline;}
    #opt7,#opt8,#opt9,#opt10,#opt11,#opt12,#opt13,#opt14,#opt15,#opt16,#opt17,#opt18,#opt19,#opt20{display:inline-block;vertical-align:middle;border:none;outline:0;margin:0}
    .checkbox span{font:14px Roboto,Arial,sans-serif;vertical-align:middle;line-height:1;color:#555;margin-right:10px}
    .btn,.btn:active{background-image:none}
    .btn{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;border-radius:4px}
    .btn:active:focus,.btn:focus{outline:0}
    .btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
    .btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
    .btn-primary{color:#fff!important;background-color:#337ab7;border-color:#2e6da4}
    .btn-primary:focus,.button-group button:disabled{color:#fff;background-color:#286090;border-color:#122b40}
    .btn-primary:active,.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}
    .btn-danger{color:#fff!important;background-color:#d9534f;border-color:#d43f3a}
    .btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}
    .btn-danger:active,.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}
    .btn-info{color:#fff!important;background-color:#5bc0de;border-color:#46b8da}
    .btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}
    .btn-info:active,.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}
    .btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
    .clear{clear:both;display:block}
    .collapse{display:none}
    #parser2{position:relative;display:none;-webkit-animation:slide-down .3s ease-out;-moz-animation:slide-down .3s ease-out;}
    .alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}
    .alert{padding:15px;border:1px solid transparent;border-radius:4px;position:absolute;top:10px;right:10px;min-width:230px}
    button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1}
    .close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}
    button.close:focus{outline:0}
    .close:hover{opacity:1!important}
    #btnInfo2 h4{margin:0}
    #button-link2,.parsebox #hide-parse2{display:none}
    .parsebox{margin:50px 30%}
    .parse-box{overflow:hidden;}
    .parsebox #show-parse2,.parsebox #hide-parse2{cursor:pointer}
    .parsebox #show-parse2{display:inline-block}
    @-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-100%)}
    100%{opacity:1;-webkit-transform:translateY(0)}
    }
    @-moz-keyframes slide-down{0%{opacity:0;-moz-transform:translateY(-100%)}
    100%{opacity:1;-moz-transform:translateY(0)}
    }
  4. Kode HTML Silahkan simpan kode HTML di atas kode komentar Disqus blog Anda di edit HTML. atau di bawah kode <data:post.body/> terserah di mana mau anda taruh kode di bawah in.

    <div class='parsebox'>
    <span class='btn btn-primary btn-xs' id='show-parse2' onclick='showParser2();'>Show Parse Tool</span>
    <span class='btn btn-primary btn-xs' id='hide-parse2' onclick='hideParser2();'>Hide Parse Tool</span>
    <div class='parse-box'>
    <div id='parser2'>
    <textarea id='codes2' placeholder='Tulis/paste kode atau teks di sini lalu klik tombol yang sesuai. Untuk embed komentar, ambil ID DISQUS dari URL tombol share komentar Disqus.' spellcheck='false'></textarea>
    <div class='alert alert-success margin-bottom-20 collapse' id='btnInfo2' role='alert'>
            <button class='close close-copy' onclick='document.getElementById(&quot;btnInfo2&quot;).style.display = &quot;none&quot;;cdClear2();' type='button'><span aria-hidden='true'>&#215;</span></button>
            <h4>Codes copied to clipboard!</h4>
          </div>
    <span class='button-group'>
    <button class='btn btn-primary btn-xs' id='cvrt3' onclick='strongConvert();this.disabled = true;'>strong</button>
    <button class='btn btn-primary btn-xs' id='cvrt4' onclick='emConvert();this.disabled = true;'>em</button>
    <button class='btn btn-primary btn-xs' id='cvrt4' onclick='uConvert();this.disabled = true;'>u</button>
    <button class='btn btn-primary btn-xs' id='cvrt5' onclick='strikeConvert();this.disabled = true;'>strike</button>
    <button class='btn btn-primary btn-xs' id='cvrt7' onclick='preConvert();this.disabled = true;'>pre</button>
    <button class='btn btn-primary btn-xs' id='cvrt8' onclick='codeConvert();this.disabled = true;'>code</button>
    <button class='btn btn-primary btn-xs' id='cvrt9' onclick='precodeConvert();this.disabled = true;'>pre code</button>
    <button class='btn btn-primary btn-xs' id='cvrt10' onclick='spoilerConvert();this.disabled = true;'>spoiler</button><br/>
    <button class='btn btn-primary btn-xs' id='cvrt11' onclick='embedConvert();this.disabled = true;'>embed</button> <span>How to get ID DISQUS - <a href='https://3.bp.blogspot.com/-5wJN6R18cZs/V8LMLmATPCI/AAAAAAAAnrk/j6xr9K2DPDMX7RNpb5qXttuHUwKQ7QK-wCLcB/s1600/Animation2.gif' rel='nofollow' target='_blank' title='Lihat di sini'>http://disq.us/p/[ID DISQUS]</a></span><br/>
    <button class='btn button-link2 btn-xs btn-info' id='button-link2' data-clipboard-action='copy' data-clipboard-target='#codes2' type='submit'>Copy codes to clipboard!</button> <button class='btn btn-danger btn-xs' onclick='cdClear2();'>Bersihkan</button>
    </span>
    <span class='checkbox'>
      <input checked='' id='opt7' type='checkbox'/>
      <input checked='' id='opt8' type='checkbox'/>
      <input checked='' id='opt9' type='checkbox'/>
      <input checked='' id='opt10' type='checkbox'/>
      <input checked='' id='opt11' type='checkbox'/><br/>
      <input checked='' id='opt12' type='checkbox'/> <span>strong</span>
      <input checked='' id='opt13' type='checkbox'/> <span>em</span>
      <input checked='' id='opt14' type='checkbox'/> <span>u</span>
      <input checked='' id='opt15' type='checkbox'/> <span>strike</span><br/>
      <input checked='' id='opt16' type='checkbox'/> <span>pre</span>
      <input checked='' id='opt17' type='checkbox'/> <span>code</span>
      <input checked='' id='opt18' type='checkbox'/> <span>pre code</span>
      <input checked='' id='opt19' type='checkbox'/> <span>spoiler</span><br/>
      <input checked='' id='opt20' type='checkbox'/> <span>embed</span>
      </span>
      <div class="clear"></div>
      </div>
      </div>
      <div class="clear"></div>
    </div>
  5. Kode Javascript Silahkan salin kode di bawah ini dan simpan kode javascript tersebut di atas kode </body>

    <script>
    //<![CDATA[
    function cdClear2() {
      var wtarea = document.getElementById('codes2');
      wtarea.value = '';
      wtarea.focus();
      var clears = document.querySelectorAll('#cvrt3, #cvrt4, #cvrt5, #cvrt6, #cvrt7, #cvrt8, #cvrt9, #cvrt10, #cvrt11')
      for (var i = 0; i < clears.length; i++)
    {
      clears[i].disabled = false,document.getElementById("btnInfo2")
            .style.display = "none",document.getElementById("button-link2")
            .style.display = "none"
    }
    }
    
    function preConvert() {
    var ctarea = document.getElementById('codes2'),
        cv = ctarea.value,
        opt7 = document.getElementById('opt7'),
        opt8 = document.getElementById('opt8'),
        opt9 = document.getElementById('opt9'),
        opt10 = document.getElementById('opt10'),
        opt11 = document.getElementById('opt11'),
        opt16 = document.getElementById('opt16');
      cv = cv.replace(/\t/g, "    ");
     if (opt16.checked) { if (opt7.checked) cv = cv.replace(/&/g, "&amp;");
      if (opt8.checked) cv = cv.replace(/'/g, "&#039;");
      if (opt9.checked) cv = cv.replace(/"/g, "&quot;");
      if (opt10.checked) cv = cv.replace(/</g, "&lt;");
      if (opt11.checked) cv = cv.replace(/>/g, "&gt;");
      cv = cv.replace(/^/, "<pre>");
          cv = cv.replace(/$/, "</pre>");
      ctarea.value = cv;
      ctarea.focus();
      document.getElementById("button-link2")
            .style.display = "inline-block"}
    };
    function codeConvert() {
    var ctarea = document.getElementById('codes2'),
        cv = ctarea.value,
        opt7 = document.getElementById('opt7'),
        opt8 = document.getElementById('opt8'),
        opt9 = document.getElementById('opt9'),
        opt10 = document.getElementById('opt10'),
        opt11 = document.getElementById('opt11'),
        opt17 = document.getElementById('opt17');
      cv = cv.replace(/\t/g, "    ");
      if (opt17.checked) { if (opt7.checked) cv = cv.replace(/&/g, "&amp;");
      if (opt8.checked) cv = cv.replace(/'/g, "&#039;");
      if (opt9.checked) cv = cv.replace(/"/g, "&quot;");
      if (opt10.checked) cv = cv.replace(/</g, "&lt;");
      if (opt11.checked) cv = cv.replace(/>/g, "&gt;");
      cv = cv.replace(/^/, "<code>");
          cv = cv.replace(/$/, "</code>");
      ctarea.value = cv;
      ctarea.focus();
      document.getElementById("button-link2")
            .style.display = "inline-block"}
    };
    function precodeConvert() {
    var ctarea = document.getElementById('codes2'),
        cv = ctarea.value,
        opt7 = document.getElementById('opt7'),
        opt8 = document.getElementById('opt8'),
        opt9 = document.getElementById('opt9'),
        opt10 = document.getElementById('opt10'),
        opt11 = document.getElementById('opt11'),
        opt18 = document.getElementById('opt18');
      cv = cv.replace(/\t/g, "    ");
      if (opt18.checked) { if (opt7.checked) cv = cv.replace(/&/g, "&amp;");
      if (opt8.checked) cv = cv.replace(/'/g, "&#039;");
      if (opt9.checked) cv = cv.replace(/"/g, "&quot;");
      if (opt10.checked) cv = cv.replace(/</g, "&lt;");
      if (opt11.checked) cv = cv.replace(/>/g, "&gt;");
      cv = cv.replace(/^/, "<pre><code>");
          cv = cv.replace(/$/, "</code></pre>");
      ctarea.value = cv;
      ctarea.focus();
      document.getElementById("button-link2")
            .style.display = "inline-block"}
    };
    function spoilerConvert() {
    var ctarea = document.getElementById('codes2'),
        cv = ctarea.value,
        opt19 = document.getElementById('opt19')
      cv = cv.replace(/\t/g, "    ");
        if (opt19.checked) {cv = cv.replace(/^/, "<spoiler>");
          cv = cv.replace(/$/, "</spoiler>");
      ctarea.value = cv;
      ctarea.focus();
      document.getElementById("button-link2")
            .style.display = "inline-block"}
    };
    function strongConvert() {
    var ctarea = document.getElementById('codes2'),
        cv = ctarea.value,
        opt12 = document.getElementById('opt12')
      cv = cv.replace(/\t/g, "    ");
        if (opt12.checked) {cv = cv.replace(/^/, "<strong>");
          cv = cv.replace(/$/, "</strong>");
      ctarea.value = cv;
      ctarea.focus();
      document.getElementById("button-link2")
            .style.display = "inline-block"}
    };
    function emConvert() {
    var ctarea = document.getElementById('codes2'),
        cv = ctarea.value,
        opt13 = document.getElementById('opt13')
      cv = cv.replace(/\t/g, "    ");
        if (opt13.checked) {cv = cv.replace(/^/, "<em>");
          cv = cv.replace(/$/, "</em>");
      ctarea.value = cv;
      ctarea.focus();
      document.getElementById("button-link2")
            .style.display = "inline-block"}
    };
    
    function uConvert() {
    var ctarea = document.getElementById('codes2'),
        cv = ctarea.value,
        opt14 = document.getElementById('opt14')
      cv = cv.replace(/\t/g, "    ");
        if (opt14.checked) {cv = cv.replace(/^/, "<u>");
          cv = cv.replace(/$/, "</u>");
      ctarea.value = cv;
      ctarea.focus();
      document.getElementById("button-link2")
            .style.display = "inline-block"}
    };
    function strikeConvert() {
    var ctarea = document.getElementById('codes2'),
        cv = ctarea.value,
        opt15 = document.getElementById('opt15')
      cv = cv.replace(/\t/g, "    ");
        if (opt15.checked) {cv = cv.replace(/^/, "<strike>");
          cv = cv.replace(/$/, "</strike>");
      ctarea.value = cv;
      ctarea.focus();
      document.getElementById("button-link2")
            .style.display = "inline-block"}
    };
    function embedConvert() {
    var ctarea = document.getElementById('codes2'),
        cv = ctarea.value,
        opt20 = document.getElementById('opt20')
      cv = cv.replace(/\t/g, "    ");
        if (opt20.checked){ cv = cv.replace(/^/, "<iframe src=\"https://embed.disqus.com/p/");
          cv = cv.replace(/$/, "\" style=\"border:0;width:100%;height:300px;\" seamless=\"seamless\" scrolling=\"no\" allowtransparency=\"true\"><\/iframe>");
      ctarea.value = cv;
      ctarea.focus();
      document.getElementById("button-link2")
            .style.display = "inline-block"}
    };
    function showParser2(){
      document.getElementById("parser2").style.display = "block";
      document.getElementById("show-parse2").style.display = "none";
      document.getElementById("hide-parse2").style.display = "inline-block";
    }
    function hideParser2(){
      document.getElementById("parser2").style.display = "none";
      document.getElementById("show-parse2").style.display = "inline-block";
      document.getElementById("hide-parse2").style.display = "none";
    }
    
    function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/kompi-js/c909b5ed/clipboardjs_disqus.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
    //]]>
    </script>
  6. Langkah terakhir anda bisa klik save tempalate , dan loihat hasilnya.
Apabila Anda menggunakan kedua komentar seperti Blogger dan Disqus, Anda dapat menggunakan update parse tool untuk masing-masing komentar, karena saya sudah membedakan tag-tagnya agar nanti kode tersebut tidak bentrok sehingga keduanya dapat berjalan dengan harapan kita.
Jika anda terdapat kendala bisa berkomentar di bawah ini, selamat mencoba, semoga berhasil

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 ==>


Join on this site

with Google Friend Connect