How To Add WhatsApp Join Button In Blogger

In this article, I will show you how to add whatsapp join button in your Blogger website. That Means how to add join button on blogger on whatsapp,blogger me whatsapp group button kaise lagaye.

Want to Add Whatsapp Join Button In Blogger?

If yes, then read the complete guide where I will share with you a great method to Add WhatsApp Join Button In Blogger Post.

Adding a whatsapp join button in blogger for the join whatsapp group member to several benefits, particularly in the context of user experience and convenience. It will be helpful for Mobile Users as it is quite challenging to highlight a long piece of Text or code and then copy it to the clipboard.

How To Add WhatsApp Join Button In Blogger

Here is the code to Add WhatsApp Join Button on the Blogger website. Blogger me whatsapp group button kaise lagaye,how to add join button on blogger on whatsapp.

Step-1: Copy the below code and paste it into the HTML section in the Blog post editor of Blogger. In this method, you need to add an HTML code in the blog post section.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"></link>
   <style>
        .group-card {
            margin-bottom: 20px;
            position: relative;
            border: 2px solid transparent;
            border-radius: 5px;
            background: #f0f8ff;
            display: flex;
            align-items: center;
            padding: 7px;
            justify-content: space-between;
            overflow: hidden;
        }
        .whatsapp-card {
            animation: whatsapp-border-animation 1s infinite;
        }
        
     @keyframes whatsapp-border-animation {
            0% {
                border-color: transparent;
            }
            50% {
                border-color: #25d366;
            }
            100% {
                border-color: transparent;
            }
        }
        
        .seoquake-nofollow {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: bold;
            text-decoration: none;
            padding: 5px 20px;
            border-radius: 2px;
            flex-shrink: 0;
            transition: all 0.3s ease-in-out;
            color: white !important;
        }
        .seoquake-nofollow i {
            margin-right: 5px;
        }
        .whatsapp-card .seoquake-nofollow {
            background: #25d366;
        }
        
        .seoquake-nofollow:hover {
            transform: scale(1.05);
        }
    </style>
    <div class="group-card whatsapp-card">
        <span style="align-items: center; display: flex;"><i class="fab fa-whatsapp" style="color: #25d366; font-size: 24px;"></i>
            <span style="font-size: 0.9rem; font-weight: bold; margin-left: 10px;">WhatsApp Group</span>
        </span>
        <a class="seoquake-nofollow" href="Here you Paste whatsapp group or Channel Join Link" rel="nofollow noopener noreferrer" target="_blank">
            <i class="fab fa-whatsapp"></i> Join Now
        </a>
    </div>

Step-2: Now Change your whatsapp Join link to "Here you Paste whatsapp group or Channel Join Link"

Step-3: Now Switch the editor to compose view. save the draft.

Step-4: Now start writing the next paragraph by replacing the WhatsApp Join Link and your WhatsApp Join Button is successfully embedded in the blog post.

Step-5: If all work had done then publish the post and see the WhatsApp Join Button is Appear In the Blogger post.

Click Here To Download The Above Code

Don’t forget to assign the Class (copyableCode) on the Code box. You can use multiple WhatsApp Join Button In Blogger within the same page and it will work seamlessly. 

This is easy to use, So just save the code into a text file and use it in the future blog post. 

You can also change the background color, border, and padding of the code box by changing the values in the above code. So keep experimenting with HTML. 👍

If you have any doubts, Please ask in the Comment section or Our Whatsapp Group.

⇒If you like this method then share it with your friends and Join our Weekly newsletter for more interesting Blogging Tips.