Copy to Clipboard Button to Your Poetry BLOGGER WEBSITE  TUTORIAL #10

In this tutorial, you'll learn how to add a "copy to clipboard" button to your poetry website, making it easy for readers to copy and share your poems. This is a must-have feature for any poet looking to increase their online presence and reach a wider audience. We'll walk you through the simple steps using HTML and JavaScript, even if you're a beginner. By the end of this video, you'll have a fully functional copy button on your poetry posts, ready to make your work more shareable than ever before!

We'll cover:

The basic HTML structure for your poetry and the copy button.[1][2]

The JavaScript code needed to make the copy function work.[1][3]

Styling your button with CSS to match your website's design.

Tips for creating engaging poetry blog posts that people will want to share.[4][5]

#PoetryWebsite #CopyAndPaste #WebDevelopment #HTML #JavaScript #PoetryCommunity #BloggingTips #IncreaseEngagement #ShareableContent #WebsiteTutorial #2025PoetryTrends #CreativeWriting

                                   Copy the code

<div style="position: relative; font-family: 'Georgia', serif; background-color: #fff0f5; padding: 20px; border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 90%; max-width: 600px; margin: 20px auto; border: 2px solid #ff69b4; box-sizing: border-box;">

   

    <!-- Hidden Keywords (SEO Purpose) -->

    <div style="display: none;">

        Love, Dreams, Poetry, Life, Inspiration, Romance, Hope, Motivation

    </div>

    <!-- Hidden Hashtags (SEO Purpose) -->

    <div style="display: none;">

        #Poetry #Love #Life #Inspirational #Quotes #Dreams #Emotions #Motivation

    </div>

   

    <!-- Copy Button -->

    <button id="copyButton" style="position: absolute; top: 10px; right: 10px; padding: 6px 12px; background-color: #ff69b4; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); z-index: 10;">

        📋 Copy

    </button>

    <!-- Title -->

    <h1 style="color: #ff1493; text-align: center; font-size: clamp(20px, 5vw, 24px); font-weight: bold; margin-top: 10px; margin-bottom: 5px;">✨ My Thoughts ✨</h1>

    <!-- Subtitle -->

    <p style="font-style: italic; color: #8b008b; margin-bottom: 15px; text-align: center; font-size: clamp(14px, 3vw, 16px);">By 🌸 Habib 🌸</p>

    <!-- Poem Content -->

    <blockquote id="poemText" style="font-size: clamp(16px, 4vw, 20px); line-height: 1.6; color: #444; margin: 15px auto; text-align: center; padding: 15px; border-radius: 10px; background: linear-gradient(to right, #ffccff, #ffe6ff); border-left: 4px solid #ff69b4;">

        🌙 میں نے خالص اور بے پناہ محبتیں,<br>

        🌟 صرف میتوں پر ہی نچھاور ہوتے دیکھی ہیں.<br><br>

       

        🌼 The sun will rise to kiss the sky,<br>

        🕊️ Dreams awaken, soaring high.<br>

    </blockquote>

    <hr style="margin: 15px auto; width: 80%; border: 0; border-top: 2px solid #ff69b4;">

    <p style="text-align: center; color: #888; font-size: clamp(12px, 3vw, 14px);">🌐 Explore more,.... <a href="website main url link" style="color: #ff69b4; text-decoration: none;">My Poetry Haven</a>.</p>

</div>

<script>

    // Improved Copy Button Functionality

    document.addEventListener('DOMContentLoaded', function() {

        const copyButton = document.getElementById('copyButton');

       

        copyButton.addEventListener('click', function() {

            // Select the poem text

            const poemText = document.getElementById('poemText').innerText;

            // Use modern Clipboard API if available

            if (navigator.clipboard) {

                navigator.clipboard.writeText(poemText)

                    .then(() => {

                        // Change button text temporarily

                        const originalText = copyButton.innerHTML;

                        copyButton.innerHTML = '✅ Copied!';

                        setTimeout(() => {

                            copyButton.innerHTML = originalText;

                        }, 2000);

                    })

                    .catch(err => {

                        console.error('Failed to copy: ', err);

                        fallbackCopy(poemText);

                    });

            } else {

                fallbackCopy(poemText);

            }

        });

        // Fallback for older browsers

        function fallbackCopy(text) {

            const textarea = document.createElement('textarea');

            textarea.value = text;

            textarea.style.position = 'fixed';  // Prevent scrolling to bottom

            document.body.appendChild(textarea);

            textarea.select();

           

            try {

                document.execCommand('copy');

                // Change button text temporarily

                const originalText = copyButton.innerHTML;

                copyButton.innerHTML = '✅ Copied!';

                setTimeout(() => {

                    copyButton.innerHTML = originalText;

                }, 2000);

            } catch (err) {

                console.error('Fallback copy failed: ', err);

                alert('Failed to copy text. Please try again or copy manually.');

            }

           

            document.body.removeChild(textarea);

        }

    });

</script>