কিভাবে ব্লগার সাইটে চ্যাটিং বাটন যোগ করবেন (সম্পূর্ণ গাইড)

আপনার ব্লগার (Blogger) ওয়েবসাইটে যদি একটি চ্যাটিং বাটন যোগ করেন, তাহলে ভিজিটররা খুব সহজেই আপনার সাথে যোগাযোগ করতে পারবে। বিশেষ করে WhatsApp, Facebook Messenger অথবা Telegram চ্যাট বাটন ব্যবহার করলে ভিজিটরদের প্রশ্নের দ্রুত উত্তর দেওয়া সম্ভব হয়। এতে ব্যবহারকারীর অভিজ্ঞতা উন্নত হয় এবং আপনার ওয়েবসাইটের বিশ্বাসযোগ্যতাও বৃদ্ধি পায়।

** code গুল blogger themes এর শেষে </body> ট্যাগ এর উপরে পেস্ট করুন । ** 

CODE : 

<!-- Contact FAB Start -->

<style>

/* <![CDATA[ */

    :root {

        --primary-color: #3b82f6; 

        --whatsapp-color: #25D366;

        --telegram-color: #0088cc;

        --text-white: #ffffff;

    }

    .fab-container {

        position: fixed;

        bottom: 30px;

        right: 30px;

        z-index: 9999;

        display: flex;

        flex-direction: column;

        align-items: center;

        font-family: sans-serif;

    }

    .fab-options {

        list-style: none;

        margin: 0;

        padding: 0;

        display: flex;

        flex-direction: column-reverse;

        align-items: center;

        gap: 15px;

        margin-bottom: 15px;

        opacity: 0;

        visibility: hidden;

        transform: translateY(20px) scale(0);

        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    }

    .fab-container.active .fab-options {

        opacity: 1;

        visibility: visible;

        transform: translateY(0) scale(1);

    }

    .fab-btn {

        width: 50px;

        height: 50px;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        color: var(--text-white);

        text-decoration: none;

        box-shadow: 0 4px 10px rgba(0,0,0,0.2);

        transition: transform 0.2s ease;

        position: relative;

    }

    .fab-btn:hover { transform: scale(1.1); }

    .fab-btn.whatsapp { background-color: var(--whatsapp-color); }

    .fab-btn.telegram { background-color: var(--telegram-color); }

    .fab-label {

        position: absolute;

        right: 65px;

        background: rgba(0, 0, 0, 0.75);

        color: white;

        padding: 4px 12px;

        border-radius: 4px;

        font-size: 13px;

        white-space: nowrap;

        opacity: 0;

        pointer-events: none;

    }

    .fab-btn:hover .fab-label { opacity: 1; }

    .fab-main {

        width: 60px;

        height: 60px;

        border-radius: 50%;

        background-color: var(--primary-color);

        color: white;

        border: none;

        cursor: pointer;

        font-size: 24px;

        display: flex;

        align-items: center;

        justify-content: center;

        box-shadow: 0 5px 15px rgba(0,0,0,0.3);

        transition: all 0.3s ease;

        z-index: 10;

    }

    .fab-container.active .fab-main {

        background-color: #ef4444;

        transform: rotate(135deg);

    }

    /* Pulse Effect */

    .fab-main:before {

        content: '';

        position: absolute;

        width: 100%;

        height: 100%;

        border-radius: 50%;

        background: inherit;

        animation: pulse-ring 2s infinite;

        z-index: -1;

    }

    @keyframes pulse-ring {

        0% { transform: scale(1); opacity: 0.6; }

        100% { transform: scale(1.6); opacity: 0; }

    }

    @media (max-width: 768px) {

        .fab-container { bottom: 20px; right: 20px; }

        .fab-main { width: 55px; height: 55px; }

        .fab-label { display: none; }

    }

/* ]]> */

</style>

<!-- Font Awesome (XML compatible self-closing tag) -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css' />

<div class='fab-container' id='contactMenu'>

    <div class='fab-options'>

        <a class='fab-btn telegram' href='https://t.me/yourusername' target='_blank'>

            <i class='fab fa-telegram-plane'></i>

            <span class='fab-label'>Telegram</span>

        </a>

        <a class='fab-btn whatsapp' href='https://wa.me/yourphonenumber' target='_blank'>

            <i class='fab fa-whatsapp'></i>

            <span class='fab-label'>WhatsApp</span>

        </a>

    </div>

    <button class='fab-main' onclick='toggleContactMenu()'>

        <i class='fas fa-plus'></i>

    </button>

</div>

<script type='text/javascript'>

// <![CDATA[

    function toggleContactMenu() {

        const menu = document.getElementById('contactMenu');

        menu.classList.toggle('active');

    }

    document.addEventListener('click', function(event) {

        const menu = document.getElementById('contactMenu');

        if (!menu.contains(event.target) && menu.classList.contains('active')) {

            menu.classList.remove('active');

        }

    });

// ]]>

</script>

<!-- Contact FAB End -->

Blogger ওয়েবসাইটে একটি চ্যাটিং বাটন যোগ করা খুবই সহজ এবং এটি আপনার ভিজিটরদের সাথে দ্রুত যোগাযোগের সুযোগ তৈরি করে। আপনি চাইলে WhatsApp, Facebook Messenger অথবা Telegram—যেকোনো একটি চ্যাটিং বাটন ব্যবহার করতে পারেন। সঠিকভাবে সেটআপ করলে এটি আপনার ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতা উন্নত করবে, ভিজিটরের আস্থা বাড়াবে এবং ব্যবসায়িক বা ব্যক্তিগত যোগাযোগকে আরও সহজ করে তুলবে। তাই আজই আপনার Blogger সাইটে একটি চ্যাটিং বাটন যুক্ত করুন এবং ভিজিটরদের জন্য যোগাযোগের একটি সহজ মাধ্যম তৈরি করুন।