Update Copy To Clipboard Parse Tool For Disqus Comments

Sebelumnya kita sudah mengupdate parse tool untuk komentar disqus AMP HTML dan parse tool untuk threaded comments hack, kini kita akan mengupdate lagi parse tool untuk komentar disqus pada template HTML5.

Updatenya masih sama yaitu penambahan fungsi copy to clipboard untuk memudahkan meng-copy kode hasil parse sehingga pengguna tidak perlu menekan tombol Ctrl + C di keyboard.

Untuk demonya bisa dilihat di gambar animasi gif di atas atau bisa Anda coba pada link demo di bawah ini.


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

Jika Anda ingin mencobanya di blog Anda silahkan copy kode-kode di bawah ini.

1. Kode CSS

Silahkan simpan kode CSS di bawah ini di CSS style blog Anda.


.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)}
}

2. Kode HTML

Silahkan simpan kode HTML di atas kode komentar Disqus blog Anda di edit HTML.


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

3. Kode Javascript

Silahkan simpan kode javascript 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>

Jika Anda menggunakan kedua komentar (Blogger dan Disqus), Anda bisa menggunakan update parse tool untuk masing-masing komentar karena saya sudah membedakan tag-tagnya agar tidak bentrok sehingga keduanya bisa berjalan aman.

Reactions:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser