Add Whatsapp Chat Widget In Blogger , Step By Step Procedure By Khajanaloot

Want To Add A WhatsApp Chat Widget In Your Blog For Customer Support? Just Follow These Simple Steps And Copy Pest Below Codes And You Will Good To Go.

Step 01:Go to the First, Blogger.com dashboard

Step 02: Now Just you have to Search </head> tag and Before the </head> tag you have to add this CSS stylesheet link as given below:

                
xml
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
            

Step3) Now Search ]]></b:skin> tag and Paste this css code before the ]]></b:skin> tag 

                
css
.fab-container{position:fixed;bottom:28px;right:28px;z-index:999;cursor:pointer}.fab-icon-holder{width:50px;height:50px;border-radius:100%;background:#016fb9;box-shadow:0 6px 20px rgba(0,0,0,.2)}.fab-icon-holder i{display:flex;align-items:center;justify-content:center;height:100%;font-style:25px;color:#fff}.fab{width:55px;height:55px;background:#d23f31;transform:rotate(0);transition:all .4s}.fab:hover{transform:rotate(270deg)}.fab-options{list-style-type:none;margin:0;position:absolute;bottom:70px;right:0;opacity:0;transition:all .3s ease;transform:scale(0);transform-origin:80% bottom}.fab-options:hover,.fab:hover+.fab-options{opacity:1;transform:scale(1)}.fab-options .fab-li{display:flex;justify-content:flex-end;padding:5px}.fab-label{padding:2px 5px;align-self:center;user-select:none;white-space:nowrap;border-radius:3px;font-size:16px;background:#666;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.2);margin-right:10px}.floating-link{text-decoration:none}
            

Step4) Now Search </body> tag and Paste this HTML Code Before </body> tag in blogger.

                
javascript
<div class="fab-container">
        <div class="fab fab-icon-holder">
            <i class="fa fa-plus"></i>
        </div>

        <ul class="fab-options">
            <li class="fab-li">

                <div class="fab-icon-holder">
                    <a class="floating-link" href="https://facebook.com/khajanaloot"> <i class="fa fa-facebook"></i></a>
                </div>
            </li>
            <li class="fab-li">

                <div class="fab-icon-holder">
                    <a class="floating-link" href="https://instagram.com/khajanaloot"> <i class="fa fa-instagram"></i></a>
                </div>
            </li>
            <li class="fab-li">

                <div class="fab-icon-holder">
                    <a class="floating-link" href="https://instagram.com/khajanaloot"> <i class="fa fa-twitter"></i></a>
                </div>
            </li>
            <li class="fab-li">

                <div class="fab-icon-holder">
                    <a class="floating-link" href="https://linkedin.com/in/khajanaloot"> <i class="fa fa-linkedin"></i></a>
                </div>
            </li>
        </ul>
    </div>
            

Just you have to Replace the Social Link with your Social Media Link

Step5) Now Save your Blogger Theme. 

Congratulation you have successfully Insert the Floating Action button in blogger in Just 5 Steps.

Go to Link