Stylish code box for blogger website

How to add stylish code box in blogger website?

hello dear friends in this post i will give you the stylish code box for blogger website.

Add a custom code box in your blog post by using this code. You can easily add this type of code in your blogger website. Just copy the code and paste into your blogger website.

Html

<div class="codxh">
    <span class="codxt">Html</span>
    <button class="copy-code-btn" onclick="copyCode(this)">Copy</button>
  </div>
  <div class="codxb">
    <pre><code><div class="example"><p>Your code goes here!</p>
</div></code></pre>
  </div>
</div>

here is the css code for stylish code box 

CSS

<style>
  .codx {
    background-color: #1e1e1e;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    margin: 20px 0;
    overflow: hidden;
    font-family: 'Courier New', Courier, monospace;
  }
  .codxh {
    background-color: #2d2d2d;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #3c3c3c;
  }
  .codxt {
    color: #00bcd4;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .copy-code-btn {
    background-color: #444;
    color: #fff;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s ease;
  }
  .copy-code-btn:hover {
    background-color: #555;
  }
  .copy-code-btn.copied {
    background-color: #4caf50;
  }
  .codxb {
    padding: 15px;
    overflow-x: auto;
  }
  .codxb pre {
    margin: 0;
    padding: 0;
  }
  .codxb code {
    color: #d4d4d4;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre;
  }
</style>

here is the javascript for stylish code box copy button 

Javascript

<script>
  function copyCode(button) {
    // Find the code element relative to the clicked button
    const codeBox = button.closest('.codx');
    const codeText = codeBox.querySelector('code').innerText;

    navigator.clipboard.writeText(codeText).then(() => {
      // Change button text and style on success
      button.textContent = 'Copied!';
      button.classList.add('copied');

      // Reset button after 2 seconds
      setTimeout(() => {
        button.textContent = 'Copy';
        button.classList.remove('copied');
      }, 2000);
    }).catch(err => {
      console.error('Failed to copy text: ', err);
    });
  }
</script>