Create HTML Parser Tool On Blogger
Blogger သမားများအတွက်အလွန်အသုံးဝင် သော Tool တခုဖြစ်သည်။အဘယ်ကြောင့်ဆိုသော်ဒီ Parser Tool သည် Code များစွာကို HTML Code အဖြစ်ခွဲခြမ်းစိတ်ဖြာပေးသောကိရိယာတခုဖြစ် သော ကြောင့်ပါ။အဓိကအားဖြင့် pre tag code box အသုံးပြု သောသူများအတွက်မရှိမဖြစ်လိုအပ် သော online tool တခုဖြစ်သည်။ထိုကြောင့် HTML Parser ကိုဖန်တီးရန် အောက်ပါပြုလုပ်နည်းများအတိုင်းပြုလုပ် ပေးဖို့လိုအပ်ပါတယ်။
No(1) မိမိ blog site ကို account အရင်ဝင်ပါ
No(2) dashboard ထဲက Pages ကိုနှိပ်
No(3) + အိုင်ကွန်ကိုနှိပ်
No(4) 🖍️ အိုင်ကွန်ကိုနှိပ်၍ < > HTML view ကိုရွေးချယ်၍နှိပ်ပါ
No(5) အောက်က code ကို copy ယူပြီးကူးထည့်ပေးပါ
No(6) save ကိုနှိပ်ပြီးပါပြီ
<style>
.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;cursor:pointer}
.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{background:rgba(255,255,255,.5);color:#fff}
.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-sm,.btn-xs{outline:none;background:rgba(255,255,255,.25);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:4px 5px;border:0;box-shadow:0 2px 6px -4px rgba(0,0,0,0.05);transition:all .3s}
#parser2{position:relative;display:block;clear:both;border-radius:4px;border:1px solid var(--sideBd-color);transition:all .6s}
#parser2 textarea#somewhere{width:100%;outline:none;height:240px;margin:0 auto;display:block;padding:20px;font-family:var(--fontCode);font-size:14px;border:0;border-radius:4px 4px 0 0;box-shadow:unset;resize: vertical; min-height: calc(100vh - 300px);background:transparent;color:var(--themeC)}
#parser2 .button-group{float:none;background:#ce2c90;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 4px 4px}
.collapse{display:none}
.alert-success{color:#3c763d;background-color:#dff0d8}
.alert{padding:10px;border:1px solid transparent;border-radius:4px;position:absolute;top:10px;right:10px;min-width:230px}
button.closes{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1;z-index:2}
.closes{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}
.closes:hover{opacity:1!important}
#btnInfo h4{margin:0}
#button-link,#btn_clear{display:none}
.btn-reset{padding:0;border:0;background:0 0;position:absolute;top:10px;right:15px;color:#ddd;font-size:34px;font-weight:lighter;cursor:pointer;line-height:1;display:none;z-index:1}
.btn-reset:hover{color:#555}
.btn-reset:focus{outline:0}
.clear{clear:both;display:block;margin-bottom:2px;}
</style>
<div id="parser2">
<textarea id="somewhere" onfocusin="focusFunction()" placeholder="Write/paste code here..."></textarea>
<div class="alert alert-success margin-bottom-20 collapse" id="btnInfo" role="alert">
<button class="closes close-copy" onclick="document.getElementById("btnInfo").style.display = "none";" type="button">
<span aria-hidden="true">×</span>
</button>
<h6>Copy successful!</h6>
</div>
<div class="button-group">
<button class="btn btn-primary btn-sm btn-parse" onclick="convert();textareaReplaceLineBreaks("#somewhere");" type="button">Code analysis</button>
<button class="btn button-link btn-xs btn-info" data-clipboard-action="copy" data-clipboard-target="#somewhere" id="button-link" type="submit">Copy code</button>
<button class="btn btn-danger btn-xs" id="btn_clear" onclick="cdClear2();">Cleanup</button>
</div>
</div>
<script src="https://cdn.giahuy.net/widget/js/clipboard.min.js"></script>
<script type="text/javascript">
function convert() {
var ele1 = document.getElementById("somewhere");
var replaced;
replaced = ele1.value;
replaced = replaced.replace(/&/ig, "&");
replaced = replaced.replace(/</ig, "<");
replaced = replaced.replace(/>/ig, ">");
replaced = replaced.replace(/"/ig, """);
replaced = replaced.replace(/'/ig, "'");
replaced = replaced.replace(/±/ig, "±");
replaced = replaced.replace(/©/ig, "©");
replaced = replaced.replace(/®/ig, "®");
replaced = replaced.replace(/ya'll/ig, "ya'll");
ele1.value = replaced;
document.getElementById("button-link")
.style.display = "inline-block";
document.getElementById("btn_clear")
.style.display = "inline-block";
document.getElementById("btn-reset")
.style.display = "none";
}
function cdClear() {
var wtarea = document.getElementById('somewhere');
wtarea.value = '';
document.getElementById("btnInfo")
.style.display = "none",document.getElementById("button-link")
.style.display = "none",document.getElementById("btn_clear")
.style.display = "none"
}
function cdClear2() {
var wtarea = document.getElementById('somewhere');
wtarea.value = '';
document.getElementById("btn-reset")
.style.display = "none";
}
function focusFunction() {
document.getElementById("btn-reset").style.display = "block";
}
</script>
<script>
//<![CDATA[
var clipboard = new Clipboard(".button-link");
clipboard.on("success", function (o) {
console.log(o), document.getElementById("btnInfo")
.style.display = "block", document.getElementById("button-link")
.style.display = "none", document.getElementById("btn-reset")
.style.display = "none", document.getElementById("somewhere")
.value = ""
}), clipboard.on("error", function (o) {
console.log(o)
});
//]]>
</script>
No(7) Write/paste code here... နေရာတွင်မိမိရဲ့ pre tag codebox တွင်ထည့်သွင်းအသုံးပြုမဲ့ code ကိုထည့်၍ Code analysis ကိုနှိပ်ပါ
No(8) ထိုသို့ Code analysis နှိပ်လိုက်လျှင် code များ ပြောင်းသွားပြီဆိုရင် Copy code နှိပ်၍ copy ယူပြီးမိမိရဲ့ pre tag codebox တွင်ထည့်သွင်းအသုံးပြုနိုင်သွားပါပြီ