COPY TO CLIPBOARD PRE TAG CODE BOX IN BLOGGER

Copy To Clipboard Pre Tag Code Box In Blogger

ဒါလေးက တော့မိမိ Blog Post မှာတင်ထားတဲ့အကြောင်းအရာ‌ တွေနှင့်သက်ဆိုင် သော HTML/CSS/JavaScript Code တွေကိုမိမိ Website ကိုလာရောက်လည်ပတ်တဲ့ Customer တွေအနေနဲ့အလွယ်တကူ Copy ယူနိုင်ရန် ခလုတ်တချက်နှိပ်ရုံနဲ့အဲဒီ Code တွေ Copy ယူလို့ရနိုင်အောင်ပြုလုပ်ထားတဲ့ Code Box လေးဖြစ်ပါတယ်။ဤ codebox တွင်ထူးခြားချက်များစွာပါရှိသည်။ထိုထူးခြားချက်များမှာအောက်ပါအတိုင်းခလုတ်များစွာပါရှိသောကြောင့်ဖြစ်သည်

(1) Code များအားလုံးကိုချဲ့၍ကြည့်လို့သောခလုတ်တခုပါရှိခြင်း

(2) download ခလုတ်တချက်နှိပ်ရုံဖြင့် Code များကို download ဆွဲလို့ရတဲ့ခလုတ်တခုပါရှိခြင်း

(3) Copy ခလုတ်တချက်နှိပ်ရုံဖြင့် Code များကို Copy ကူးယူပြီးသားဖြစ် အောင်ပြုလုပ် ပေးတဲ့ခလုတ်တခုပါရှိခြင်းစသည်ဖြင့်ထူးခြားချက်များစွာပါရှိသည်။ကြိုက်နှစ်သက်လို့အသုံးပြုချင်တယ်ဆိုရင်အောက်ကပြုလုပ်ပုံအဆင့်ဆင့်များကိုသေချာနားလည် အောင်ဖတ်၍လိုက်ပါပြုလုပ်ပေးပါ။

No(1) မိမိ blogsite ကို account အရင်ဝင်ပါ

No(2) dashboard ထဲက Theme ကိုနှိပ်

No(3) Customize ဘေးက 🔻ကိုနှိပ်

No(4) Edit HTML ကိုနှိပ်

No(5) ]]></b:skin> ကိုရှာ တွေ့ပြီဆိုရင် အောက်က code ကိုအဲဒီ ]]></b:skin>အပေါ်ကနေထည့်ပေးပါ။အဲလိုမှမထည့်ချင်ဘူးဆိုရင်အဲဒီ ]]></b:skin> အောက်က နေ <style><-- CSS Code --></style> အဲလိုထည့်ပေးလို့လဲရပါတယ်။မိမိနှစ်သက်သလိုထည့်သွင်းအသုံးပြုလို့ရပါတယ်။

/* Code Box */ .pre{background:#f6f6f6;color:#2f3337;direction: ltr;position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto} .pre pre{margin:0;color:inherit;background:inherit;display:block;position:relative;font-size:13px;line-height:1.6em;border-radius:3px;padding:30px 20px 20px;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none; overflow:auto;direction:ltr;white-space:pre} .pre.adv{border-radius:10px} .pre.adv::before{display:none} .pre:not(.str) .prCd{display:none} .pre.str .prTl{display:none;} .pre.adv pre{padding-top:60px} .preM{position:absolute;top:0;right:0;left:0;width:100%;background: rgba(0,0,0,.04);padding:10px 10px 10px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;z-index:2} .preT{font-size:12px;font-family: var(--fontC);line-height:1rem;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:10px;} .preA{display:flex;gap:8px;white-space:nowrap;} .preA button{outline:none;border:none;width:30px;height:30px;background:#d9d9d9;padding:0;margin:0;border-radius:50%;transition:border-radius .2s ease;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;} .preA button:hover{border-radius:40%;} .preA button >svg{width:18px;height:18px;stroke:none;fill:#2e2e2e;transition: all .5s ease;} .pre.cpd .prCp svg, .pre.pnd .prDl svg, .pre.dwn .prDl svg{animation: jiggle 1s} .pre.cpd .prCp svg .a,.pre:not(.cpd) .prCp svg .b{opacity:0} .pre.dwn .prDl svg .a, .pre.pnd .prDl svg .a,.pre:not(.pnd) .prDl svg .b,.pre:not(.dwn) .prDl svg .c{opacity:0} @keyframes jiggle{0%{transform:rotate(0)}20%{transform:rotate(26deg)}40%{transform:rotate(-26deg)}60%{transform:rotate(26deg)}80%{transform:rotate(-26deg)}100%{transform:rotate(0)}} @-webkit-keyframes jiggle{0%{transform:rotate(0)}20%{transform:rotate(26deg)}40%{transform:rotate(-26deg)}60%{transform:rotate(26deg)}80%{transform:rotate(-26deg)}100%{transform:rotate(0)}}

No(6) </body> ရှာ တွေ့ပြီဆိုရင်အောက်က code ကိုအဲဒီ </body>အပေါ်ကနေထည့်ပေးပါ။ထည့်ပြီးသွားပြီဆိုရင် save ကိုနှိပ်ပြီးပြီ။နောက်တဆင့်အ နေနဲ့မိမိ post တင်တဲ့နေရာကိုပြန်သွားရပါမယ်။

<script>/*<![CDATA[*/ 0<document.querySelectorAll('div.pre.gh').length&&(() => { let preD = document.querySelectorAll('div.pre.gh'); function saveDoc(x, d, n) { if (n = typeof n == 'string' ? n : 'text/plain', d = typeof d == 'string' ? d : 'File_' + (new Date).getTime() + '.txt', x) { n = new Blob([x], { type: n }); if (navigator.msSaveBlob) return navigator.msSaveBlob(n, d); { let x = window.URL.createObjectURL(n), c = document.createElement("a"); c.classList.add('hidden'), c.href = x, c.download = d, document.body.appendChild(c), c.click(), c.remove(), window.URL.revokeObjectURL(x) } } } for (let r = 0; r < preD.length; r++) { let b = preD[r]; b.classList.add('adv'); let x = b.dataset.text || 'File_' + (new Date).getTime(), e = b.dataset.file || x, _ = b.dataset.lang || '.txt', m = 'undefined' !== typeof b.dataset.time ? isNaN(Number(b.dataset.time)) ? 'false' === b.dataset.time ? 0 : 10 : Number(b.dataset.time) : 10, c = 'undefined' === typeof b.dataset.download || b.dataset.download == 'true', d = 'undefined' === typeof b.dataset.copy || b.dataset.copy == 'true', n = 'undefined' === typeof b.dataset.view || b.dataset.view == 'true', a = b.querySelector('pre'), t = a.innerText; b.insertAdjacentHTML('afterbegin', "<div class='preM'><div class='preT'><span class='prTl'>" + (null == x ? '</>' : x) + "</span><span class='prCd'></span></div><div class='preA'>" + (n ? '\x3C!--[ Prev' + "iew ]--><button class='prVw'><svg viewBox='0 0 24 24'><path d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'/></svg></button>" : "") + (c ? "\x3C!--[ Download ]--><button class='prDl'><svg viewBox='0 0 24 24'><path class='a' d='M8 17V15H16V17H8M16 10L12 14L8 10H10.5V6H13.5V10H16M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4Z'/><path class='b' d='M13,2.03C17.73,2.5 21.5,6.25 21.95,11C22.5,16.5 18.5,21.38 13,21.93V19.93C16.64,19.5 19.5,16.61 19.96,12.97C20.5,8.58 17.39,4.59 13,4.05V2.05L13,2.03M11,2.06V4.06C9.57,4.26 8.22,4.84 7.1,5.74L5.67,4.26C7.19,3 9.05,2.25 11,2.06M4.26,5.67L5.69,7.1C4.8,8.23 4.24,9.58 4.05,11H2.05C2.25,9.04 3,7.19 4.26,5.67M2.06,13H4.06C4.24,14.42 4.81,15.77 5.69,16.9L4.27,18.33C3.03,16.81 2.26,14.96 2.06,13M7.1,18.37C8.23,19.25 9.58,19.82 11,20V22C9.04,21.79 7.18,21 5.67,19.74L7.1,18.37M12,16.5L7.5,12H11V8H13V12H16.5L12,16.5Z'/><path class='c' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M7,15H17V17H7V15M10.3,11.2L8.4,9.3L7,10.7L10.3,14L17,7.3L15.6,5.9L10.3,11.2Z'/></svg></button>" : "") + (d ? "\x3C!--[ Copy ]--><button class='prCp'><svg viewBox='0 0 24 24'><path class='a' d='M20,16V4H8V16H20M22,16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H20A2,2 0 0,1 22,4V16M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z'/><path class='b' d='M20,16V10H22V16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H16V4H8V16H20M10.91,7.08L14,10.17L20.59,3.58L22,5L14,13L9.5,8.5L10.91,7.08M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z'/></svg></button>" : "") + '</div></di' + "v>"); let i = b.querySelector('.prVw'), l = b.querySelector('.prDl'), f = b.querySelector('.prCp'), W = b.querySelector('.prCd'); null !== i && i.addEventListener('click', () => { var x = '#252526'; x = '<!DOCTYPE html><html><head><title>' + e.replace(/\./g, "").replace(/ /g, "_") + _ + "</title><meta content='width=device-width,initial-scale=1,user-scalable=1,minimum-scale=1,maximum-scale=5' name='viewport'/><meta content='" + x + "' name='theme-color'/><meta content='" + x + "' name='msapplication-navbutton-color'/><meta content='" + x + "' name='apple-mobile-web-app-status-bar-style'/><link rel='shortcut icon' type='image/png' href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc9oGZQVmAguD-s0uCEmV6NlNfpOZLc75oruUa6_A9dAiWtOE9BjpcBPCZpzLfzWtUlxqNqLKcaDfWqOOsS7OZCjPNuXUqoJcge8ske8_Yk90jYn3aQqlv3nhBO795ri9bYlQtw5zV92uIvnyAg8fhyphenhyphenQrcKEiZnPu_nEWj47nMh5kI0Q/s0/logo.png'><style>body{min-height:100vh;background:#252526;color:#fff}*{margin:0;padding:0}html{line-height:1em;background:#1d1f21;color:#c5c8c6}pre{white-space:pre-wrap;word-wrap:break-word;word-break:break-all;padding:20px}pre i{font-style:normal}</style></head><body><div class='pre'>" + a.outerHTML + '</div></body></html>'; x = new Blob([x], { type: 'text/html' }); window.navigator.msSaveOrOpenBlob ? window.navigator.msSaveOrOpenBlob(blobObject, fileName) : (x = window.URL.createObjectURL(x), window.open(x, '_blank'), window.URL.revokeObjectURL(x)) }), null !== l && l.addEventListener('click', () => { l.disabled = !0; let c = m; b.classList.add('pnd', 'str'), W.innerHTML = 0 !== m ? 'Please wai' + "t " + c + 's...' : 'Please wai' + 't...'; let a = setInterval(() => { 0 !== m && --c, 0 !== m && (W.innerHTML = 'Please wait ' + c + 's...'), c <= 0 && (clearInterval(a), setTimeout(() => { W.innerHTML = 'Downloading...', setTimeout(() => { b.classList.remove('pnd'), b.classList.add('dwn'), saveDoc(t, e.replace(/\./g, "").replace(/ /g, "_") + '.' + _, 'text/plain'), W.innerHTML = 'Download started...', setTimeout(() => { b.classList.remove('dwn', 'str'), l.disabled = !1 }, 3e3) }, 2e3) }, 1e3)) }, 1e3) }), null !== f && f.addEventListener('click', () => { var x = getSelection(), c = document.createRange(); c.selectNodeContents(a), x.removeAllRanges(), x.addRange(c), document.execCommand('copy'), x.removeAllRanges(), f.disabled = !0, b.classList.add('cpd'), setTimeout(function() { b.classList.remove('cpd'), f.disabled = !1 }, 3e3) }) }})(); /*]]>*/</script>

No(7) မိမိ post တင်မဲ့နေရာမှာ 🖍️ အိုင်ကွန်နှိပ်၍ < > HTML view ကို‌ရွေးချယ်နှိပ်ပါ

No(8) အောက်က code တွေ copy ယူ၍ထည့်ပါ

<div class='pre gh' data-text='type_code' data-file='file_name' data-lang='file_format' data-time='true' data-download='true' data-copy='true' data-view='true'> <pre>Your_code_is_here</pre> </div>

No(9) မိမိထည့်သွင်းအသုံးပြုမဲ့ Code များကို HTML Parser Tool တွင်ပြောင်းလဲ ပေးပါ

1။HTML Parser Tool ကိုကိုယ်တိုင်ဖန်တီးပြုလုပ်ချင်ရင်ဒီ link ကိုနှိပ်ပါHTML Parser Tool

2။ပြုလုပ်ထားပြီးသား HTML Parser Tool ကိုအသုံးပြုမယ်ဆိုရင်ဒီ link ကိုနှိပ်ပါHTML Parser Tool

3။HTML Parser Tool တွင် Write/paste code here... နေရာ၌မိမိရဲ့ pre tag codebox တွင်ထည့်သွင်းအသုံးပြုမဲ့ code ကိုထည့်၍ Code analysis ကိုနှိပ်ပါ

4။ထိုသို့ Code analysis နှိပ်လိုက်လျှင် code များ ပြောင်းသွားပြီဆိုရင် Copy code နှိပ်၍ copy ယူပါ

No(10) Your_code_is_here နေရာ၌ HTML Parser Tool တွင်ပြောင်းလဲထား သော Code ကို Copy ယူ၍ထည့်သွင်းအသုံးပြုရမှာဖြစ်ပါတယ်

0

0

Loading...