To a code box to a blogger post with copy button to easy copy and paste

What I'm going to teach you today is how to put a codebox with a copy button so you won't have a hard time copying the code when it gets long.

What is code box and pre code

"Code box" can refer to a physical lockbox for keys or a web development term for a text area that accepts HTML. "Pre-code" refers to the era of Hollywood films before strict censorship, while the HTML <pre> tag displays preformatted text, preserving whitespace and line breaks, often used with <code> to display source code.

Code box

1. Physical lockbox:
   • A physical device, often digital, used by real estate professionals or property managers to securely store keys, accessible with a code.
2. Web development:
   • A specific type of text input field that allows users to enter HTML code without the browser automatically converting it to HTML entities, unlike a standard paragraph text field.

Pre-code

1. Pre-Code Hollywood:
   • The period in American film history from roughly 1930 to 1934, before the strict enforcement of the Motion Picture Production Code (Hays Code) began in July 1934. Films from this era often contained more mature or controversial content than was later allowed.
2. Pre-code (general):
   • The adjective "pre-code" can also mean "existing before the implementation of a code," referring to something that existed before a specific set of rules or laws was put into effect.

To add a code box to a Blogger post, follow these steps:

1. Open your Blogger post in HTML View:
   • Log in to your Blogger account and open the post you want to edit or create a new post.
   • In the post editor, switch from "Compose View" to "HTML View." This is usually done by clicking the "HTML" or "<>" icon.
2. Insert the basic HTML structure for the code box:
   • Paste the following HTML code into the HTML editor where you want the code box to appear:
   • Alternatively, you can use a div with a specific class for more styling flexibility:

<div class="code-container">
        <button class="copy-btn">Copy</button>
        <pre>
<!-- Your code goes here -->
        </pre>
    </div>

• Add your code:
  • Replace <!-- Your code goes here --> with the actual code you want to display.
• (Optional) Add CSS styling:
  • If you used the div with a class approach, you can define the .code-container styles in your Blogger theme's CSS. Go to Theme > Customize > Advanced Options > Add CSS and paste your custom styles, for example:

<style>
        .code-container {
            position: relative;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
        }

        .copy-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            z-index: 1;
        }

        .copy-btn:active {
            background-color: #45a049;
        }

        pre {
            margin: 0;
            padding: 15px;
            background-color: #f0f0f0;
            font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
            line-height: 1.5;
            white-space: pre-wrap;
            position: relative;
        }
    </style>

    <h2>Multiple Code Boxes with Copy Buttons</h2>

    <!-- Code Box 1 -->
    <div class="code-container">
        <button class="copy-btn">Copy</button>
        <pre>
// Paste your Code 01 here
function greet() {
    alert("Hello from Code Box 1!");
}
greet();
        </pre>
    </div>

    <!-- Code Box 2 -->
    <div class="code-container">
        <button class="copy-btn">Copy</button>
        <pre>
// Paste your Code 02 here
function add(a, b) {
    return a + b;
}
console.log(add(5, 3));
        </pre>
    </div>

    <!-- Code Box 3 -->
    <div class="code-container">
        <button class="copy-btn">Copy</button>
        <pre>
// Paste your Code 03 here
let name = "John Doe";
console.log(`Hello, ${name}!`);
        </pre>
    </div>

    <script>
        document.querySelectorAll('.copy-btn').forEach(button => {
            button.addEventListener('click', () => {
                const codeElement = button.nextElementSibling;
                const codeText = codeElement.innerText.trim();

                navigator.clipboard.writeText(codeText).then(() => {
                    button.textContent = 'Copied!';
                    setTimeout(() => button.textContent = 'Copy', 2000);
                }).catch(err => {
                    console.error('Failed to copy text: ', err);
                });
            });
        });
    </script>

• Publish or Update the post:
  • Once you have added your code and any desired styling, publish or update your Blogger post.

This will display your code within a formatted box in your Blogger post. For advanced features like syntax highlighting or "copy to clipboard" functionality, you may need to integrate external JavaScript libraries like Highlight.js.