How to add whatsapp contact link to blogger

So hey guys how are you all I hope that all of you are good and also doing good in this today's post I am going to tell you that how to add whatsapp contact link to blogger so let's begin with this post:-

how to add whatsapp contact link to blogger

Video Resource:

So guys many of my friends have their websites and contact numbers but they don't know how to add their whatsapp numbers to their blogger site so that's why I got the idea of writing this post. Many of the people want to contact their viewers by giving their whatsapp number's contact link to their websites but they don't know that how to do it. so guys this is the best way to do that:-


simply check this code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="style.css">

</head>

<body>


    <div class="whatsapp-btn-container">

        <a class="whatsapp-btn" href="https://wa.me/add your number with country code here"><i class="fab fa-whatsapp"></i></a>

        <span>Contact Us</span>

    </div>


</body>

</html>

paste this code in the theme section of your blog with this css code also :

.whatsapp-btn-container {

    position: fixed;

    right: 30px;

    opacity: 0;

    bottom: -50px;

    padding: 24px;

    animation: fade-up 1000ms forwards;

    animation-delay: 1000ms;

}


@keyframes fade-up {

    100% {

        bottom: 24px;

        opacity: 1;

    }

}


.whatsapp-btn-container .whatsapp-btn {

    font-size: 48px;

    color: #25d366;

    display: inline-block;

    transition: all 400ms;

}


.whatsapp-btn-container .whatsapp-btn:hover {

    transform: scale(1.2);

}


.whatsapp-btn-container span {

    position: absolute;

    top: 0;

    left: 4px;

    font-family: "Roboto", sans-serif;

    font-weight: bold;

    color: #075e54;

    transform: rotateZ(20deg) translateX(10px);

    opacity: 0;

    transition: all 400ms;

}


.whatsapp-btn-container .whatsapp-btn:hover + span {

    transform: rotateZ(0deg) translateX(0px);

    opacity: 1;

} 

______________________________________

Simply Paste the whole code in your theme and you will see the whatsapp contact link button appeared on your blogger site.

So this was a post on how to add whatsapp link to blogger so I hope that you liked this post.

Share this post to all of your friends also

thank you

Comments

Post a Comment