COPY TO CLIPBOARD TEXTAREA TAG CODE BOX IN BLOGGER

Copy To Clipboard Textarea Tag Code Box In Blogger

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

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

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

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

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

No(5) </head> ကိုရှာ တွေ့ပြီဆိုရင် အောက်က code ကိုအဲဒီ </head>အပေါ်ကနေထည့်ပေးပါ

   
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://clipboardjs.com/dist/clipboard.min.js'></script>

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

 
    .copyarea {
        display: flex;
        position: relative;
        width: 100%;
        height: auto;
    }
    
    
    .copyarea textarea {
        width: 100%;
        box-sizing: border-box;
        border: none;
        padding-top: 34px;
        padding-bottom: 34px;
        padding-right: 11px;
        padding-left: 11px;
        background: #f5f6f7;
    }
    
    
    .copyarea textarea:focus-visible {
        outline: -webkit-focus-ring-color auto 0px;
    }
    
    
    button.ClickToCopyButton {
       width: 30%;
       height: auto;
       position: absolute;
       top: 0;
       right: 0;
       border: none;
       padding-top: 5px;
       padding-bottom: 5px;
       color: #fff;    
       background: #0066ff;
    }
    
    
    button.ClickToCopyButton:hover {
       background: #000;
    }
    
    
    @media screen and (max-width: 500px)
         {button.ClickToCopyButton {
              width: 100%;
    }}

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

 
<script>
 $(function() {
        var clipboard = new ClipboardJS('.ClickToCopyButton');
        $(".ClickToCopyButton").click(function() {
            $(this).html('Copied!!');
             var that = $(this);
             var intrvrl =  setInterval(function(){
             that.html('Click to Copy');
             clearInterval(intrvrl); },
            2000);
         });
});
</script>  

No(8) post တင်တဲ့နေရာမှာအ‌ ‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ရှေ့ဆုံးကခဲတံပုံကိုနှိပ်၍ <  > HTML view ကိုနှိပ်ပါ။

No(9) မိမိတင်ထားသမျှ post တွေထဲက HTML/CSS/JavaScript code တွေတင်ထားတဲ့ post တိုင်းကိုအောက်က code ကိုထည့်၍အောက်ကနမူနာအတိုင်း number စဉ်တပ်၍ထည့်သွင်းအသုံးပြုပေးဖို့လိုအပ်ပါတယ်။ rows="5" နေရာတွင် "5" သည် height ဖြစ်၍လိုအပ်သလိုချိန်ညှီနိုင်သည်။အောက်ကနမူနာများတွင်မိမိထည့်သွင်းအသုံးပြုမဲ့ code အမျိုးအစားအရေအတွက်ပေါ်မူတည်၍

textarea id="Add-Unique-Tags1" ဆိုရင် အောက်က clipboard-target="#Add-Unique-Tags1" ပေါ့။နောက်ထပ်တခုထပ်လုပ်မယ်ဆိုလဲ

textarea id="Add-Unique-Tags2"ဆိုရင် အောက်က clipboard-target="#Add-Unique-Tags2" စသည်ဖြင့် 1 to 10 မိမိထည့်သွင်းမဲ့အ ရေအတွက်အတိုင်းအဲဒီနေရာများတွင် number စဉ်တပ်၍ထည့်သွင်းအသုံးပြုပေးပါ။

<div class="copyarea">
<textarea id="Add-Unique-Tags" rows="5" width="100%">Add-Text-or-Codes</textarea>
<button class="ClickToCopyButton" data-clipboard-target="#Add-Unique-Tags">Click to Copy</button>
</div>