সাইটে দ্রুত বিজ্ঞাপন যুক্ত করার উপায় এবং স্টাইলিশ বিজ্ঞাপন কোড

আপনার ওয়েবসাইটে দ্রুত বিজ্ঞাপন প্রদর্শন করে আপনার ব্যবহারকারীদের সাথে সরাসরি যোগাযোগ তৈরি করা যায়। এটি শুধুমাত্র আপনার পণ্য বা সেবার প্রচার নয়, বরং আপনার সাইটের ভিজিটরদের সাথে ইন্টার‌্যাকশন বাড়াতে পারে। এখানে একটি সহজ পদ্ধতি দেওয়া হলো যেটির মাধ্যমে আপনি আপনার সাইটে বিজ্ঞাপন যুক্ত করতে পারবেন, যা আপনার সাইটে প্রথমবার প্রবেশ করলে প্রদর্শিত হবে।

ধাপে ধাপে বিজ্ঞাপন পপ-আপ যুক্ত করার পদ্ধতি:

1. HTML/JavaScript গ্যাজেট যোগ করুন:
• আপনার ব্লগের ড্যাশবোর্ডে যান।
• "লেআউট" থেকে "Add a Gadget" ক্লিক করুন।
• গ্যাজেট তালিকা থেকে "HTML/JavaScript" নির্বাচন করুন।
• নিচের কোডটি সেখানে পেস্ট করুন।

<!-- Pop Up Box Start -->

<div id="popup" class="popup">

    <div class="popup-content">

        <!-- Close Button -->

        <span class="close-btn" id="closePopup">&times;</span>

        

        <!-- Title -->

        <h3 class="promo-title">আপনার সাইটের বিজ্ঞাপন দিন খুব দ্রুত সময়ের মধ্যে।</h3>

        <!-- Image Section -->

        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg08swCa24k9Ah-hxY5C8Cpz8EGKntTxz7UTW1TTt03Obp1hPByZE85_aTWKWYclh3M_V9i1cq_QSnDS2lgnj8hk2Tkq5afe8nvU9ueQmkW24MFm_j3IWntCPRE99DOQlH2gbyNKksEeUhWPfq7UR3GePHgffVvFxFjkAcQYrUusWxxSd9rpoN9D5bz6EUJ/s1280/Untitled%20design.png" alt="Promotion Image" class="promo-image" />

      

        <!-- Buttons Section -->

        <div class="buttons">

            <a href="https://www.smteambd.top/p/live-chat.html" class="live-chat-btn" target="_blank">লাইভ চ্যাট</a>

            <a href="https://t.me/smteambdofficial" class="telegram-btn" target="_blank">টেলিগ্রাম</a>

        </div>

    </div>

</div>

<!-- CSS Styling -->

<style>

.popup {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 1000;

    display: none; /* Initially hidden */

}

.popup-content {

    background-color: #fff;

    padding: 30px;

    border-radius: 15px;

    text-align: center;

    width: 90%;

    max-width: 400px;

    position: relative;

    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);

    animation: fadeIn 0.5s ease-in-out;

}

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: scale(0.9);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

/* Close Button */

.close-btn {

    position: absolute;

    top: 15px;

    right: 15px;

    font-size: 24px;

    cursor: pointer;

    color: white;

    background-color: blue;

    padding: 5px 10px;

    border-radius: 50%;

    border: 2px solid #fff;

    z-index: 10;

}

.promo-image {

    width: 100%;

    height: auto;

    margin: 20px 0;

    border-radius: 10px;

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

}

.buttons {

    display: flex;

    justify-content: space-between;

}

.live-chat-btn, .telegram-btn {

    flex: 1;

    padding: 12px 25px;

    border: none;

    color: white;

    border-radius: 5px;

    font-size: 16px;

    cursor: pointer;

    text-decoration: none;

    text-align: center;

    transition: background-color 0.3s ease;

    margin-right: 10px;

}

.live-chat-btn {

    background-color: #4CAF50;

}

.telegram-btn {

    background-color: #0088cc;

}



<script>

// Show pop-up immediately on page load

window.onload = function() {

    document.getElementById('popup').style.display = 'flex';

}

// Close the pop-up when close button is clicked

document.getElementById('closePopup').addEventListener('click', function() {

    document.getElementById('popup').style.display = 'none';

});

</script>

--- **পরামর্শ:** এই পপ-আপ বক্সটি আপনার সাইটে বিজ্ঞাপন প্রদর্শনের জন্য উপযুক্ত একটি পদ্ধতি। তবে নিশ্চিত করুন যে এটি ব্যবহারকারী অভিজ্ঞতাকে প্রভাবিত না করে এবং সহজে বন্ধ করা যায়।

Go to Link