ক্যাপশন শেয়ারিং-এর জন্য স্টাইলিশ ব্লক

1. ক্যাপশন ব্লকের স্টাইলিশ ডিজাইন:
   • HTML দিয়ে ক্যাপশন ব্লকের মূল কাঠামো তৈরি করুন যা সুন্দরভাবে সাজানো থাকে এবং টেক্সটসহ ইমোজি প্রদর্শন করে।
   • CSS দিয়ে ব্লকের ব্যাকগ্রাউন্ড, বর্ডার, শ্যাডো এবং অন্যান্য স্টাইলিং সংযোজন করুন যাতে এটি দৃষ্টিনন্দন হয়।
   • ব্লকের জন্য রেস্পন্সিভ ডিজাইন তৈরি করুন যাতে এটি মোবাইল এবং ডেস্কটপ উভয় প্ল্যাটফর্মেই সুন্দরভাবে দেখা যায়।
2. কপি এবং শেয়ার বাটনের ফাংশনালিটি:
   • JavaScript ব্যবহার করে 'কপি' ফাংশন তৈরি করুন যা ক্যাপশনের সকল টেক্সট একটি ক্লিকে কপি করে দেয়।
   • পপআপ মেসেজ দেখানোর জন্য একটি `showPopup` ফাংশন তৈরি করুন যা কপি করার পর ব্যবহারকারীকে নিশ্চিতকরণ মেসেজ দেখায়।
   • Facebook, WhatsApp এবং Twitter-এ শেয়ার করার জন্য `share` ফাংশন তৈরি করুন যা নির্দিষ্ট প্ল্যাটফর্মে টেক্সট শেয়ার করার লিংক তৈরি করে।
3. ডায়নামিক কালার সেটিংস:
   • থিমের রঙ পরিবর্তনের জন্য রুট ভ্যারিয়েবল হিসাবে প্রাথমিক এবং সেকেন্ডারি রঙ নির্ধারণ করুন।
   • ডার্ক এবং লাইট মোডে আলাদা হোভার এবং বর্ডার রঙের জন্য CSS ভ্যারিয়েবল ব্যবহার করুন, যেমন: `--btn-hover-color` এবং `--border-color`।
   • :root এবং [data-theme="dark"] সিলেক্টরে এই ভ্যারিয়েবলগুলো ব্যবহার করে আলাদা থিমের জন্য ভিন্ন ভিন্ন রঙ সহজে প্রয়োগ করুন।
4. ব্লকের কার্যকারিতা বৃদ্ধি:
   • কপি এবং শেয়ার ফাংশনালিটিকে আরও ব্যবহারবান্ধব করার জন্য পপআপ মেসেজ এবং শেয়ার লিংকগুলো নতুন ট্যাবে খোলা নিশ্চিত করুন।
   • বাটনগুলোতে হোভার ইফেক্ট এবং ছায়া যুক্ত করে ইন্টারেক্টিভ অভিজ্ঞতা তৈরি করুন।
   • শেয়ার এবং কপি করার অপশনগুলোকে সুন্দরভাবে সাজিয়ে রাখুন যাতে ব্যবহারকারীরা সহজেই বুঝতে পারে।

View Demo

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Facebook Captions</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f9f9f9;
    }
    .caption-container {
        border: 2px solid #FFD700;
        padding: 15px;
        margin: 20px auto;
        max-width: 600px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        text-align: center;
    }
    .caption-container p {
        font-size: 18px;
        color: #333;
    }
    .emoji {
        font-size: 20px;
    }
    .share-buttons {
        margin-top: 15px;
        display: flex;
        justify-content: center;
        gap: 5px;
    }
    .share-buttons a {
        text-decoration: none;
        font-size: 14px;
        padding: 5px 8px;
        border-radius: 5px;
        color: #fff;
        cursor: pointer;
    }
    .share-facebook { background-color: #3b5998; }
    .share-whatsapp { background-color: #25D366; }
    .share-twitter { background-color: #1DA1F2; }
    .share-copy { background-color: #FF4500; }
    .popup-message {
        display: none;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 14px;
    }
</style>

<!-- Status Block 1 -->
<div class="caption-container" id="caption-1">
    <p class="emoji">💙 ➔ "The man who is tied up with great illusion to"</p>
    <p>If you find selfishness, you learn to act great....!! 😊💔</p>
    <p class="emoji">💙 ➔ "প্রবল মায়াতে বাঁধা রাখা মানুষটাও স্বার্থের খোঁজে পেলে দারুণ অভিনয় শিখে ফেলো।😊💔"</p>
    
    <div class="share-buttons">
        <a href="javascript:void(0)" class="share-facebook" onclick="share('facebook', 1)">Facebook</a>
        <a href="javascript:void(0)" class="share-whatsapp" onclick="share('whatsapp', 1)">WhatsApp</a>
        <a href="javascript:void(0)" class="share-twitter" onclick="share('twitter', 1)">Twitter</a>
        <a href="javascript:void(0)" class="share-copy" onclick="copyText(1)">Copy</a>
    </div>
</div>

<!-- Popup Message -->
<div class="popup-message" id="popup-message">Text copied to clipboard!</div>

<script>
    // Copy Text Function
    function copyText(id) {
        const container = document.getElementById(`caption-${id}`);
        const text = Array.from(container.querySelectorAll('p'))
            .map(p => p.innerText)
            .join('\n');
        
        // Create a temporary textarea element to copy text from
        const textarea = document.createElement('textarea');
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);

        showPopup(); // Show the popup message after copying
    }

    // Share Function
    function share(platform, id) {
        const container = document.getElementById(`caption-${id}`);
        const text = Array.from(container.querySelectorAll('p'))
            .map(p => p.innerText)
            .join('\n');
        
        let shareUrl = '';
        switch(platform) {
            case 'facebook':
                shareUrl = `https://www.facebook.com/sharer/sharer.php?u=https://yourblog.com"e=${encodeURIComponent(text)}`;
                break;
            case 'whatsapp':
                shareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(text)}`;
                break;
            case 'twitter':
                shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`;
                break;
        }
        window.open(shareUrl, '_blank');
    }

    // Show Popup Message
    function showPopup() {
        const popup = document.getElementById('popup-message');
        popup.style.display = 'block';
        setTimeout(() => {
            popup.style.display = 'none';
        }, 2000);
    }
</script>

1. স্টাইলিশ ক্যাপশন ব্লক তৈরি:
   • একটি HTML কাঠামো তৈরি করুন যা ক্যাপশন টেক্সট, ইমোজি, এবং শেয়ার বাটনগুলি ধারণ করবে।
   • CSS ব্যবহার করে ব্লকের স্টাইলিং করুন, যেখানে ব্যাকগ্রাউন্ড, বর্ডার, এবং টেক্সট স্টাইলের জন্য রঙ ভ্যারিয়েবল ব্যবহার করা হবে।
   • পপআপ বার্তা এবং কপি করার প্রক্রিয়া সক্রিয় করতে JavaScript ফাংশন যুক্ত করুন।
2. HTML কাঠামো তৈরি:
   • ক্যাপশন ব্লক এবং শেয়ার বাটনের জন্য একটি <div class="caption-container"> তৈরি করুন।
   • প্রত্যেক ক্যাপশনের জন্য <p> ট্যাগ ব্যবহার করে ইমোজি এবং টেক্সট লিখুন।
   • শেয়ার বাটনের জন্য <a> ট্যাগের মাধ্যমে বিভিন্ন সোশ্যাল মিডিয়া প্ল্যাটফর্মের লিঙ্ক যুক্ত করুন।
3. CSS স্টাইলিং:
   • ক্যাপশন ব্লকের জন্য রঙ, বর্ডার, এবং শ্যাডো স্টাইলিং নিশ্চিত করুন। যেমন, border: 2px solid #FFD700; এবং box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);।
   • রেস্পন্সিভ লেআউটের জন্য max-width এবং padding সেট করুন যাতে মোবাইল এবং ডেস্কটপ উভয় ডিভাইসে সুন্দরভাবে প্রদর্শিত হয়।
   • শেয়ার বাটনের ব্যাকগ্রাউন্ড রঙ ভিন্ন রাখুন, যেমন: .share-facebook { background-color: #3b5998; }।
4. JavaScript ফাংশন যুক্তকরণ:
   • কপি ফাংশন তৈরির জন্য একটি copyText() ফাংশন লিখুন, যা টেক্সট কপি করার পর পপআপ বার্তা দেখাবে।
   • শেয়ার ফাংশনের জন্য share() ফাংশন তৈরি করুন, যা window.open() ব্যবহার করে সোশ্যাল মিডিয়ার লিঙ্ক খুলবে।
   • পপআপ বার্তার জন্য showPopup() ফাংশন যুক্ত করুন, যা কিছুক্ষণ পর স্বয়ংক্রিয়ভাবে অদৃশ্য হয়ে যাবে।
5. ব্যবহারের সুবিধা:
   • এই ব্লকটি ব্যবহার করে আপনি সহজে যেকোনো স্টাইলিশ ক্যাপশন সোশ্যাল মিডিয়ায় শেয়ার করতে পারবেন।
   • একটি ক্লিকেই টেক্সট কপি করা এবং বিভিন্ন প্ল্যাটফর্মে শেয়ার করা সম্ভব হবে।
   • এটি আপনার সাইটে ব্যবহারকারীদের জন্য আরও ব্যবহারবান্ধব এবং আকর্ষণীয় অভিজ্ঞতা দেবে।

1. স্টাইলিশ ক্যাপশন ব্লক তৈরি:
   • একটি <div> তৈরি করুন যা ক্যাপশন টেক্সট এবং ইমোজি ধারণ করবে এবং শেয়ার বাটনগুলি সহ সহজ শেয়ারিং সাপোর্ট করবে।
   • HTML ট্যাগগুলি ব্যবহার করে আপনার কাঠামো তৈরি করুন, যেমন <p> ট্যাগে টেক্সট এবং <a> ট্যাগে শেয়ার বাটন।
   • প্রতিটি ক্যাপশনের জন্য স্টাইলিশ ইমোজি যুক্ত করুন, যা ভিজ্যুয়াল আকর্ষণ বাড়ায়।
2. HTML কাঠামো তৈরি:
   • <div class="caption-container"> নামে একটি ডিভ তৈরি করুন যা প্রতিটি ক্যাপশন ধারণ করবে।
   • <p> ট্যাগ ব্যবহার করে প্রধান ক্যাপশন এবং ইমোজি যুক্ত করুন। উদাহরণস্বরূপ:

     <p class="emoji">💙 ➔ "The man who is tied up with great illusion"</p>

   • বিভিন্ন সোশ্যাল মিডিয়া প্ল্যাটফর্মের জন্য <a> ট্যাগের মধ্যে শেয়ার লিঙ্ক যুক্ত করুন, যেমন:

     <a href="javascript:void(0)" class="share-facebook" onclick="share('facebook', 1)">Facebook</a>

3. CSS স্টাইলিং:
   • ক্যাপশন ব্লকের ব্যাকগ্রাউন্ড রঙ, বর্ডার এবং টেক্সট স্টাইলিং নিশ্চিত করুন। যেমন:

     .caption-container {
       border: 2px solid #FFD700;
       background-color: #fff;
       padding: 15px;
       border-radius: 10px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
       max-width: 600px;
       margin: 20px auto;
       text-align: center;
     }
             

   • শেয়ার বাটনের জন্য বিভিন্ন রঙ ব্যবহার করুন, যেমন:

     .share-facebook { background-color: #3b5998; color: #fff; }
     .share-whatsapp { background-color: #25D366; color: #fff; }
     .share-twitter { background-color: #1DA1F2; color: #fff; }
     .share-copy { background-color: #FF4500; color: #fff; }
             

   • রেস্পন্সিভ ডিজাইন নিশ্চিত করতে max-width এবং padding ব্যবহার করুন যেন ছোট ডিভাইসেও সুন্দরভাবে প্রদর্শিত হয়।
4. JavaScript ফাংশন যুক্তকরণ:
   • copyText() ফাংশন লিখে ক্যাপশন কপি করার সুবিধা যুক্ত করুন, যা ক্লিকের মাধ্যমে টেক্সট কপি করে একটি পপআপ বার্তা দেখাবে।
   • share() ফাংশন তৈরি করুন, যা ব্যবহারকারীর পছন্দের সোশ্যাল মিডিয়া প্ল্যাটফর্মে টেক্সট শেয়ার করার জন্য ব্যবহার হবে:

     function share(platform, id) {
       const container = document.getElementById(`caption-${id}`);
       const text = Array.from(container.querySelectorAll('p'))
           .map(p => p.innerText)
           .join('\n');
       let shareUrl = '';
       switch(platform) {
         case 'facebook':
           shareUrl = `https://www.facebook.com/sharer/sharer.php?u=https://yourblog.com"e=${encodeURIComponent(text)}`;
           break;
         case 'whatsapp':
           shareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(text)}`;
           break;
         case 'twitter':
           shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`;
           break;
       }
       window.open(shareUrl, '_blank');
     }
             

   • পপআপ বার্তা প্রদর্শনের জন্য showPopup() ফাংশন যুক্ত করুন, যা কপি সফলভাবে সম্পন্ন হওয়ার পর দেখাবে:

     function showPopup() {
       const popup = document.getElementById('popup-message');
       popup.style.display = 'block';
       setTimeout(() => {
         popup.style.display = 'none';
       }, 2000);
     }
             

5. ব্যবহারের সুবিধা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করা:
   • এই ফিচার ব্যবহার করে ব্যবহারকারীরা সহজে এবং দ্রুত তাদের পছন্দের ক্যাপশন শেয়ার করতে পারবে।
   • প্রতি শেয়ারের জন্য ভিন্ন ভিন্ন সোশ্যাল মিডিয়া প্ল্যাটফর্মে একক ক্লিকের মাধ্যমে পৌঁছানো সম্ভব হবে।
   • কপি ফাংশনটি ব্যবহারকারীদের একাধিক স্টেপ ছাড়াই টেক্সট কপি করার সুবিধা দেয়, যা সহজেই অন্য কোথাও পেস্ট করা যায়।
6. ভিজ্যুয়াল অ্যাপিল বৃদ্ধি:
   • ইমোজি এবং রঙিন বাটনগুলো ব্লকটিকে আরও আকর্ষণীয় করে তোলে, যা ব্যবহারকারীর মনোযোগ আকর্ষণ করতে সহায়ক।
   • শ্যাডো এবং বর্ডার স্টাইলিং ব্লকটিকে হাইলাইট করে, যা পোস্টটির প্রফেশনাল লুক দেয়।
   • ব্যবহারকারী যখন পপআপ বার্তা দেখে, তখন তাদের মনে আত্মবিশ্বাস বাড়ে যে টেক্সট সফলভাবে কপি হয়েছে।