Update Copy To Clipboard Parse Tool Untuk Threaded Comment Hack
Setelah kemarin kita update parse tool untuk komentar disqus pada blog AMP dengan menambahkan fungsi copy to clipboard untuk memudahkan meng-copy instruksi yang sudah di-parse, sekarang kita update juga parse tool untuk blogger threaded comment hack dengan menambahkan fungsi copy to clipboard. Parse tool ini tidak hanya mem-parse instruksi untuk ditambahkan di kolom komentar, namun juga untuk memudahkan menambahkan image di kolom komentar.Cara menyimpannya masih sama dengan cara sebelumnya, yang berubah hanya instruksi CSS, HTML, dan JavaScript.
Untuk demo dapat lihat pada animasi gif di atas atau silahkan coba di link demo di bawah ini.
Bagaimana, tertarik untuk mencobanya di blog Anda? Silahkan ikuti caranya di bawah ini (jika sebelumnya sudah memakai parse tool, silahkan hapus instruksi CSS, HTML, dan JavaScript yang lama).
1. Kode CSS
Silahkan copy instruksi CSS di bawah ini dan paste di style blog Anda. .checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;display:none}
#codes{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;}
#codes:active,#codes: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;}
#opt1,#opt2,#opt3,#opt4,#opt5,#opt6{display:inline-block;vertical-align:middle;border:none;outline:0;margin:0 10px 0 0}
.btn,.btn:active{background-image:none}
.btn,.parser{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,.parser:active:focus,.parser:focus{outline:0}
.btn:focus,.btn:hover,.parser:focus,.parser:hover{color:#333;text-decoration:none;outline:0}
.btn:active,.parser: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,.parser{color:#fff!important;background-color:#337ab7;border-color:#2e6da4}
.btn-primary:focus,.button-group button:disabled,.parser:focus{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:active,.btn-primary:hover,.parser:active,.parser: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}
#parser{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}
#btnInfo h4{margin:0}
#button-link,.parsebox #hide-parse{display:none}
.parsebox{margin:50px 30%}
.parse-box{overflow:hidden;}
.parsebox #show-parse,.parsebox #hide-parse{cursor:pointer}
.parsebox #show-parse{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 Javascript
Simpan javascript di bawah ini di atas instruksi</body> <script>
//<![CDATA[
function cdClear() {
var wtarea = document.getElementById('codes');
wtarea.value = '';
wtarea.focus();
var clears = document.querySelectorAll('#cvrt1, #cvrt2')
for (var i = 0; i < clears.length; i++)
{
clears[i].disabled = false,document.getElementById("btnInfo")
.style.display = "none",document.getElementById("button-link")
.style.display = "none"
}
}
function cdConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt1 = document.getElementById('opt1'),
opt2 = document.getElementById('opt2'),
opt3 = document.getElementById('opt3'),
opt4 = document.getElementById('opt4'),
opt5 = document.getElementById('opt5');
cv = cv.replace(/\t/g, " ");
if (opt1.checked) cv = cv.replace(/&/g, "&");
if (opt2.checked) cv = cv.replace(/'/g, "'");
if (opt3.checked) cv = cv.replace(/"/g, """);
if (opt4.checked) cv = cv.replace(/</g, "<");
if (opt5.checked) cv = cv.replace(/>/g, ">");
if (cv.lastIndexOf('\n') != -1 || cv.length > 40) {
cv = cv.replace(/^/, "<i rel=\"pre\">");
} else {
cv = cv.replace(/^/, "<i rel=\"code\">");
}
cv = cv.replace(/$/, "</i>");
ctarea.value = cv;
ctarea.focus();
document.getElementById("button-link")
.style.display = "inline-block";
};
function imgConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt6 = document.getElementById('opt6');
cv = cv.replace(/\t/g, " ");
if (opt6.checked){ cv = cv.replace(/^/, "<i rel=\"image\">");
cv = cv.replace(/$/, "</i>");
}
ctarea.value = cv;
ctarea.focus();
document.getElementById("button-link").style.display = "inline-block";
};
function showParser(){
document.getElementById("parser").style.display = "block";
document.getElementById("show-parse").style.display = "none";
document.getElementById("hide-parse").style.display = "inline-block";
}
function hideParser(){
document.getElementById("parser").style.display = "none";
document.getElementById("show-parse").style.display = "inline-block";
document.getElementById("hide-parse").style.display = "none";
}
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/kompi-js/eee82c58/clipboardjs_threadedcomments.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
3. Kode HTML
Simpan instruksi HTML ini persis di bawah instruksi ini. <div id='threaded-comment-form'>
<p><data:blogCommentMessage/>
</p>
Biasanya instruksi di atas ada dua buah, simpan di bawah kedua instruksi tersebut.
<div class='parsebox'>
<span class='btn btn-primary btn-xs' id='show-parse' onclick='showParser();'>Show Parse Tool</span>
<span class='btn btn-primary btn-xs' id='hide-parse' onclick='hideParser();'>Hide Parse Tool</span>
<div class='parse-box'>
<div id='parser'>
<textarea id='codes' placeholder='Tulis/paste instruksi di sini kemudian klik tombol Convert Codes.
Tulis/paste URL image di sini kemudian klik tombol Convert Image.' spellcheck='false'></textarea>
<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert'>
<button class='close close-copy' onclick='document.getElementById("btnInfo").style.display = "none";cdClear();' 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='cvrt1' onclick='cdConvert();this.disabled = true;'>Convert Codes</button>
<button class='btn btn-primary btn-xs' id='cvrt2' onclick='imgConvert();this.disabled = true;'>Convert Image</button><br/>
<button class='btn button-link btn-xs btn-info' id='button-link' data-clipboard-action='copy' data-clipboard-target='#codes' type='submit'>Copy codes to clipboard!</button> <button class='btn btn-danger btn-xs' onclick='cdClear();'>Bersihkan</button>
</span>
<span class='checkbox'>
<input checked='' id='opt1' type='checkbox'/>
<input id='opt2' type='checkbox'/>
<input id='opt3' type='checkbox'/>
<input checked='' id='opt4' type='checkbox'/>
<input checked='' id='opt5' type='checkbox'/>
<input checked='' id='opt6' type='checkbox'/>
</span>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
Sumber https://www.kompiajaib.com/
0 Response to "Update Copy To Clipboard Parse Tool Untuk Threaded Comment Hack"
Posting Komentar