How to add input box with copy to Clipboard Functionality in Blogger

Login ==> Create New Post ==> Click On < > ==> Click HTML View ==> Copy and Paste Below

For Title Change => Code Snippet
For Input Add Content in TextArea Tag

Add In Post

<div class="code-container"> <div class="code-header"> <h3>Code Snippet</h3> <button class="copy-button" data-target="code-content"> Copy Code </button> </div> <textarea id="code-content" class="code-block" rows="10" cols="50" readonly> <!-- Paste your HTML, CSS, or JS code here --> <div class="example"> <h1>Hello World</h1> <p>This is a sample HTML code.</p> </div> </textarea> <div id="new-toast" class="new-toast"></div> </div>

Go To Theme ==> Click Customize Drop Down ==> Click Edit HTML ==> Add Below Code Before Body Closing Tag

CSS And JavaScript Code

<style> .code-container { position: relative; background: #ffffff; border: 1px solid #dcdcdc; border-radius: 8px; padding: 10px; margin: 20px 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .code-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #eaeaea; } .code-header h3 { margin: 0; font-size: 1.2rem; font-family: system-ui; font-weight: 700; color: #333; } .copy-button { background-color: transparent; border: 1px solid #dcdcdc; border-radius: 4px; cursor: pointer; padding: 5px; transition: background-color 0.3s ease, border-color 0.3s ease; display: flex; align-items: center; } .copy-button:hover { background-color: #f9f9f9; border-color: #ccc; } .copy-button.copied { background-color: #28a745; border-color: #28a745; color: #fff; } .copy-icon { width: 18px; height: 18px; color: currentColor; } .code-block { padding: 10px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 0.9rem; color: #333; overflow-x: auto; margin-top: 10px; } .new-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: #333; color: white; padding: 12px 20px; font-size: 1rem; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s 0.5s; z-index: 9999; } .new-toast.show { opacity: 1; visibility: visible; transition: opacity 0.5s ease; } .new-toast.success { background-color: #28a745; } .new-toast.error { background-color: #dc3545; } .new-toast.info { background-color: #17a2b8; } </style> <script> document.addEventListener("DOMContentLoaded", function () { const copyButtons = document.querySelectorAll('.copy-button'); copyButtons.forEach(button => { button.addEventListener('click', function () { const targetId = button.getAttribute('data-target'); copyCode(targetId, button); }); }); }); function copyCode(contentId, button) { const content = document.getElementById(contentId); content.select(); content.setSelectionRange(0, 99999); // For mobile devices try { document.execCommand("copy"); showToast("Code copied to clipboard!", "success"); button.classList.add("copied"); } catch (err) { console.error("Failed to copy", err); showToast("Failed to copy the code!", "error"); } setTimeout(() => button.classList.remove("copied"), 2000); } function showToast(message, type = "info") { const toast = document.getElementById("new-toast"); toast.textContent = message; toast.classList.add("show", type); setTimeout(() => toast.classList.remove("show", type), 3000); } </script>

Note: Some Time It is not working properly because of html parser than you need to first convert html parser code than put in textarea.