Home
Script

How to Add Code Box With Copy Button in your Blog - Post

Hey Guys! Welcome back to Techly Series website.

Assuming You are observing the Code Box With Copy Button Script on blogger. This is the Right Place to you. Since You can get this Script for free.

Today, in this article, I will Discuss with you about How to Add Code Box With Copy Button in Your Blog Post.

How to Add

So, to add Code Box With Copy Button on blogger you need to follow the following process below precisely.

What's more, with the help of these steps, you can easily add this feature in your blogger website.

Once you click on the following codes, it will be copied

Step 1

  • You will go to your - Blogger Dashboard
  • Go to Theme
  • Go to - Edit HTML
  • Search - </head> or &lt;/head&gt;
  • Copy this CSS Code below and Paste on top of </head> or &lt;/head&gt;
<style>
.Tcode{position:relative;background:#fff;width:100%;border:1px solid #000;padding:10px;margin:30px 0 auto 0;border-radius:5px}
.Tcode b{background:#fff;color:#000;font-size:13px;font-weight:600;position:absolute;top:-18px;left:3%;padding:4px 18px;border:1px solid #000;border-radius:10px}
.Tcode code{display:block;background:transparent;outline:0;color:#000;border:0;width:100%;font-size:14px;font-family:var(--font-code);line-height:1.5;overflow:hidden}
.Tcode .Cbutton{color:#fff;background:linear-gradient(to right,#f81894,#0000ff);border:0;border-radius:5px 0 3.7px 0;font-size:12px;font-weight:500;position:absolute;bottom:0;right:0;padding:8px 15px}
</style>

Step 2

  • After Paste CSS Code
  • Search - </body> or &lt;/body&gt;
  • Copy this Javascript below and Paste on top of - </body> or &lt;/body&gt;
  • Save theme
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script src='https://clipboardjs.com/dist/clipboard.min.js'></script>
<script>$(function(){var clipboard=new ClipboardJS(".Cbutton");$(".Cbutton").click(function(){$(this).html("Code Copied");var that=$(this);var intrvrl=setInterval(function(){that.html("Copy Code");clearInterval(intrvrl);},1500);});})</script>

Step 3

  • After Save Theme
  • Copy this HTML Code and Paste anywhere you like
  • Replace HTML and Enter Your Code/Your Text Type
  • Replace Your Text and Paste Your Code/Your Text
  • Change the ID of each code box and change the ID of the data clipboard target of the copy button as well
  • Done.

Before pasting the text or code, you must parse the text or code,

You can use My HTML Parser Tool Free.

<pre class="Tcode">
<b>HTML</b> 
<code id="Code">Your Text</code>
<button class="Cbutton" data-clipboard-target="#Code">Copy Code</button>
</pre>

Final Words

You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.

I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.

Assuming you experience any issues while copying this script you can impart me by Telegram and I'll attempt to help.

Post a Comment

  • Aᴀ
  • A+
  • A-