Ditulis oleh: Ditulis pada: 1/23/2017
Setelah kemarin kita update parse tool untuk komentar disqus pada blog AMP dengan menambahkan fungsi copy to clipboard untuk memudahkan meng-copy kode yang sudah di-parse, kini kita update juga parse tool untuk blogger threaded comment hack dengan menambahkan fungsi copy to clipboard. Parse tool ini tidak hanya mem-parse kode untuk ditambahkan di kolom komentar, namun juga untuk memudahkan menambahkan image di kolom komentar.Cara menyimpannya masih sama dengan cara sebelumnya, yang berubah hanya kode CSS, HTML, dan JavaScript.
Untuk demo bisa 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 menggunakan parse tool, silahkan hapus kode CSS, HTML, dan JavaScript yang lama).
1. Kode CSS
Silahkan copy kode 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 kode</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 kode HTML ini persis di bawah kode ini.
<div id='threaded-comment-form'>
<p><data:blogCommentMessage/>
</p>
Biasanya kode di atas ada dua buah, simpan di bawah kedua kode 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 kode di sini lalu klik tombol Convert Codes.
Tulis/paste URL image di sini lalu 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>