How to Add a Copy Text Box in Blogger Theme

Warning!
Always take a full backup of your Blogger theme before making any changes. We are not responsible for any damage.

How to Add a Copy Text Box in Blogger Theme

This step-by-step tutorial will show you how to add a stylish Copy Text Box to your Blogger theme. This box allows users to easily copy any Text by clicking a "Copy" button. Perfect for sharing Text snippets in your blog posts!

1. First of all Login to your Blogger Dashboard.
2. On Blogger Dashboard, click Theme.
3. Click the arrow down icon next to 'customize' button.
4. Click Edit HTML, you will be redirected to editing page.

5. Step 5: Add CSS in Theme

   Go to Theme → Edit HTML and search for </head>. Paste the following CSS just before it:

         /* Text Copy Box Style CSS Code In EmadulAi.IN */
   .copy-prompt-box {
     background: linear-gradient(135deg, #f9f9f9, #e0eaff);
     border: 2px solid #7aa0ff;
     border-radius: 12px;
     padding: 20px;
     font-family: 'Segoe UI', sans-serif;
     position: relative;
     box-shadow: 0 5px 10px rgba(0,0,0,0.1);
     margin-bottom: 30px;
   }
   .copy-prompt-box h3 {
     font-size: 20px;
     margin-bottom: 10px;
     color: #2b2d42;
     display: flex;
     align-items: center;
     gap: 8px;
   }
   .copy-prompt-box textarea {
     width: 100%;
     height: 180px;
     padding: 12px;
     font-size: 15px;
     background: #fff;
     color: #333;
     border: 1px solid #ccc;
     border-radius: 8px;
     resize: none;
     box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
   }
   .copy-prompt-box button {
     margin-top: 12px;
     padding: 10px 18px;
     font-size: 16px;
     background: #2563eb;
     color: white;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     transition: 0.3s;
     display: flex;
     align-items: center;
     gap: 8px;
   }
   .copy-prompt-box button:hover {
     background: #1e40af;
   }
   .copy-alert {
     margin-top: 10px;
     color: green;
     font-weight: bold;
     display: none;
   }
   .copy-icon {
     width: 20px;
     height: 20px;
     fill: white;
   }
   .prompt-icon {
     width: 22px;
     height: 22px;
     fill: #2b2d42;
   }
     

6. Step 6: Add JavaScript Code

   Now search for </body> and paste this JS just before it:

         /* Text Copy Box Style  JavaScript Code In EmadulAi.IN */
   <script>
   function copyPrompt(btn) {
     const textarea = btn.previousElementSibling;
     textarea.select();
     textarea.setSelectionRange(0, 99999); // For mobile
     document.execCommand(&quot;copy&quot;);
   
     const alertBox = btn.nextElementSibling;
     alertBox.style.display = &quot;block&quot;;
     setTimeout(() =&gt; {
       alertBox.style.display = &quot;none&quot;;
     }, 2000);
   }
   </script>
     

7. Step 7: Save the changes by clicking on this icon

   That's done! Now use the following HTML Codes in your Blog Posts wherever you want to add Textbox.

8. Step 8: Use Copy Text Box in Post

   Whenever you want to display a copyable Text block, use this HTML in your post:

     /* Text Copy Box Style Html Code In EmadulAi.IN */
        <div class="copy-prompt-box">
     <h3>
       <svg class="prompt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zm0 6.18L6.09 7 12 4.82 17.91 7 12 8.18zm10 5.32l-10 5-10-5v6l10 5 10-5v-6z"/></svg>
        Copy This Text:
     </h3>
     <textarea readonly> <!-- Text Here --></textarea>
     <button onclick="copyPrompt(this)">
       <svg class="copy-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v16h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 18H8V7h11v16z"/></svg>
        Copy Text
     </button>
     <div class="copy-alert"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="green" viewBox="0 0 24 24">
     <path d="M20.285 6.709l-11.285 11.291-5.285-5.291 1.414-1.414 3.871 3.877 9.871-9.877z"/>
   </svg>
    Text Copied Successfully!</div>
   </div>
   

9. 🎉 Done!

   You have successfully added a Copy Text Box to your Blogger theme. Now you can share clean, copyable code snippets with your audience.

   📌 Tip:You can customize the box style, color, and button text as you like.

10. Live Preview

    It will appear like this in your live blog post:

    Copy This AI Prompt:

    Create a 3D illusion for a profile picture where a 20-year-old, cocky boy, wearing sunglasses and a blue and black dress, sits casually on a "King of Beasts Throne" chair. With a yellow neon light vape in hand and a ferocious yellow neon light hookah by his side, he wears sneakers and looks ahead. The background features "EMADUL" in large, capital, yellow neon light fonts on a black wall. There should be no shadow, and he should have wings to make him appear as an angel.

    Prompt Copied Successfully!

Conclusion This is all about making a How to Add a Copy Text Box in Blogger Theme. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box.