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, sekarang 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 arahan hasil parse sehingga pengguna tidak perlu menekan tombol Ctrl + C di keyboard.
Untuk demonya dapat dilihat di gambar animasi gif di atas atau dapat Anda coba pada link demo di bawah ini.
Untuk clipboard.js sudah aku 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 arahan 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 arahan HTML di atas arahan 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 arahan atau teks di sini kemudian 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("btnInfo2").style.display = "none";cdClear2();' type='button'><span aria-hidden='true'>×</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/AVvXsEgYgxAcm1qKfTXyAIk9RTX5kV2ZFJGbCcNb1awoyOxw99H-8UIBnH3QwBp6ygG0Z_7wmnwswAJus563m1IvtHTe9rIllu2Q3al5KWZKve307n5Sp913qF2GcOvN2LjYoaoPHLVE2TdqXtez/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 arahan javascript di atas arahan</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, "&");
if (opt8.checked) cv = cv.replace(/'/g, "'");
if (opt9.checked) cv = cv.replace(/"/g, """);
if (opt10.checked) cv = cv.replace(/</g, "<");
if (opt11.checked) cv = cv.replace(/>/g, ">");
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, "&");
if (opt8.checked) cv = cv.replace(/'/g, "'");
if (opt9.checked) cv = cv.replace(/"/g, """);
if (opt10.checked) cv = cv.replace(/</g, "<");
if (opt11.checked) cv = cv.replace(/>/g, ">");
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, "&");
if (opt8.checked) cv = cv.replace(/'/g, "'");
if (opt9.checked) cv = cv.replace(/"/g, """);
if (opt10.checked) cv = cv.replace(/</g, "<");
if (opt11.checked) cv = cv.replace(/>/g, ">");
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 memakai kedua komentar (Blogger dan Disqus), Anda dapat memakai update parse tool untuk masing-masing komentar alasannya ialah aku sudah membedakan tag-tagnya semoga tidak bentrok sehingga keduanya dapat berjalan aman.
Sumber https://www.kompiajaib.com/
0 Response to "Update Copy To Clipboard Parse Tool For Disqus Comments"
Posting Komentar