 |
| How to make copy to clipboard using html css & javascript |
In this article we will show you that is how to make copy to clipboard using html css & javascript.
How to make copy to clipboard using html css & javascript
if your are a blogger then you have must be learn how to make copy to clipboard using html css & javascript. There are more blogger help related article are have in this site. Let's go the topic.Which is how to make copy to clipboard using html css & javascript.
This article is for those who have no idea or knowledge about HTML code. In this article I will show you how to embed copy to clipboard in blogger website. Working on a blog website often requires using the keyboard between posts or pages.
There is HTML code to create many stylish copy to clipboard. We have provided a lot of HTML code in this article. Which will be very useful to use in your blogging posts.
why copy to clipboard is necessary for blog post
Those of us who use the blogger platform, usually don't know HTML or programming languages very well. So we have given a lot of code to use copy to clipboard in this article. Copy to clipboard will be required when you provide any code in writing your blog post. You can copy the codes of copy to clipboard from this article and use them on your blog site.
Many codes are given at the bottom of this article, you can copy and use the one you like. If there is any problem in copying the codes and using them on your block side, please contact us on the contact page .
Some Codes for How to make copy to clipboard using html
There Are Some code is given below:
Style No.# 01
YOUR CODE PAST HERE
Use for any blogger Site please copy it from this Box
<!-----Best Code For Copy to clipboard For Singal Code Use Only-------> <!--[ Code Box 1 ]--> <div class='K2_CBox'> <div class='CB_Heading'> <span>HTML</span> <button id='copy1' class='C_box_main' onclick="copyC('copy1','code1')"> <i class='CBox_icn'></i> </button> </div> <!--Add Your Parse HTML code Here--> <div id='code1'> <pre>YOUR CODE PAST HERE</pre> </div> </div> <style> .K2_CBox{position:relative;background:#fff;width:100%;border-radius:6px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;padding:10px;margin:30px 0 30px} .K2_CBox .CB_Heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px} .K2_CBox .CB_Heading span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem} .K2_CBox .C_box_main{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#004cbd;transition:all .3s ease;-webkit-transition:all .3s ease}.K2_CBox .C_box_main:hover{opacity:.8}.K2_CBox .C_box_main .CBox_icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'/><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'/></svg>");background-size:cover;background-repeat:no-repeat;background-position:center} .K2_CBox .C_box_main.copied{background:#2dcda7} .K2_CBox .C_box_main.copied .CBox_icn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'/><polyline points='23 3 12 14 9 11'/></svg>")} .K2_CBox pre{margin:0;background:#f6f6f6;padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:monospace;overflow:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch; white-space: pre-wrap;} .K2_CBox pre::before, .K2_CBox pre::after{content:''} .dark-Mode .K2_CBox{background:#2d2d30}.dark-Mode .K2_CBox pre{background:#252526;color:#fffdfc} .tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards} @media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}} @keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}} @-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}} .darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)} </style> <div id='toastNotif' class='tNtf'></div> <script>/*<![CDATA[*/ function copyC(e,t){var o=document.getElementById(e),n=document.getElementById(t),e=getSelection(),t=document.createRange();e.removeAllRanges(),t.selectNodeContents(n),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),o.classList.add("copied"),document.getElementById("toastNotif").innerHTML="<span>Copied to Clipboard!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)} /*]]>*/</script>
FAQ: How to make copy to clipboard using html
Conclusion:
In this article, you can easily use the codes for copy to
clip board in your blog website. The Bangabad website is completely built
around the blogger platform. Google's platform blogger is a website CMS
platform. Always visit bangabad site for
all tips and trips about blogger.Get in touch with us on our contact page today
to get help with any Blogger issue.
Read More:
How to make Code Box On any website blogpost
How to add custom fonts in blogger site
How to add custom Domain in Blogger (Easy Method)