How to Add Multiple Code Snippets with Copy Buttons in Blogger Posts

How to Add Multiple Code Snippets with Copy Buttons in Blogger Posts

If you want to enhance your Blogger posts by adding multiple code snippets with convenient "Copy Code" buttons, you're in the right place! In this tutorial, I will guide you through the process step by step. Let’s get started!

Step 1: Open Your Blogger Dashboard

1. Log in to your Blogger account.
2. Navigate to your blog and select New Post or edit an existing post where you want to add the code snippets.

Step 2: Switch to HTML View

1. In the post editor, look for the HTML button located at the top of the editor.
2. Click on it to switch from the Compose view to the HTML view, where you can input raw code.

Step 3: Add CSS Styles for Your Code Snippets

To make your code snippets visually appealing and functional, we need to add some CSS styles. Copy and paste the following CSS code at the beginning of your HTML:

    <style>
    .code-container {
        position: relative;
        margin: 20px 0;
        border: 1px solid #ddd;
        padding: 10px;
        background-color: #f9f9f9;
        border-radius: 5px;
    }
    .copy-button {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #007bff;
        color: white;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        border-radius: 5px;
    }
    .copy-button:hover {
        background-color: #0056b3;
    }
</style>

Step 4: Insert Your Code Snippets

Now, you can add your code snippets. Here’s how to add three example snippets. Copy and paste the following HTML structure where you want your code snippets to appear in the post:

    <div class="code-container">
    <button class="copy-button" onclick="copyToClipboard('htmlCode1')">Copy Code</button>
    <pre><code id="htmlCode1">&lt;div&gt;
    &lt;h1&gt;Hello, World!&lt;/h1&gt;
    &lt;p&gt;This is a paragraph in my Blogger post.&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>

Step 5: Add the JavaScript Function

To enable the "Copy Code" functionality, we need to add a JavaScript function. Copy and paste the following script at the end of your HTML:

    <script>
    function copyToClipboard(elementId) {
        var code = document.getElementById(elementId).innerText;
        navigator.clipboard.writeText(code).then(function() {
            alert('Code copied to clipboard!');
        }, function(err) {
            console.error('Could not copy text: ', err);
        });
    }
</script>

Step 6: Customize Your Code Snippets

Feel free to add or modify the code snippets as needed. Each snippet should have a unique id for the <code> element. If you want to add more snippets, just replicate the <div class="code-container"> structure and change the id and button onclick attributes accordingly.

Step 7: Preview and Publish Your Post

1. Click on the Preview button to see how your post looks with the added code snippets.
2. If everything looks good, click on Publish to make your post live!

Conclusion

You’ve successfully added multiple code snippets with individual "Copy Code" buttons to your Blogger post! This feature not only enhances the user experience but also encourages sharing your code with others. If you found this guide helpful, feel free to share it or leave a comment below!