Skip to main content
Privacy • Sitemap
©2023 KOMPI AJAIB
HomeBloggerCSS3HTML5JavascriptTutorialWidgetUpdate Copy To Clipboard Parse Tool For Disqus Comments

Update Copy To Clipboard Parse Tool For Disqus Comments

Ditulis oleh: Adhy Suryadi
Ditulis pada: 1/24/2017

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.

DEMO

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNhKNL4L4j_aiHx-PCvK8Axd27OPz20NTA3u_cjDKoBRDcm052P8KAiSytDSoKwp6d4r7F_MqJp-iDgOGgbWyIrqzIwCky8aiIgeHHkz8YLq9LLgcw_1qsPdMxjTG-rTParn6b8JAe5c0x/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.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


Mamibetjp panen77 Panengg panenslot Panen77 slot online Panen138 slot138 panen138 login mamibetjp slot slot online slot gacor Panen138 Panen77 panenslot panenslot login agen slot slot thailand panen138 panen77 linuxmagazines.com panen77 sublimelody.com http://103.146.203.79/ https://panenslot.shop/ panenslot panen77 Dewi138
Iklan oleh KompiAjaib

Privacy • Sitemap
©2021 KOMPI AJAIB