Here's How to Make a cool Whatsapp Chat Button Widget on Blogger

By installing WhatsApp chat on a blog, it is very useful for visitors to contact you directly through WhatsApp. Whatsapp mostly uses the application and almost everyone has installed it on their mobile.
Live DEMO - Click Here
How to Make Awesome Whatsapp Chat Widget on Blogger
- Please login to blogger, and enter the dashboard.
- Enter the menu Theme, then click EDIT HTML.
- Search Code ]]>, Put the CSS code below just above ]]> code.
/* WA Chat */ #whatsapp-chat,.nabil-live{background:white;position:fixed;z-index:100;right:30px} #whatsapp-chat{width:350px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 8px 25px -5px rgba(45,62,79,.15);-moz-box-shadow:0 8px 25px -5px rgba(45,62,79,.15);box-shadow:0 8px 25px -5px rgba(45,62,79,.15);bottom:80px;overflow:hidden;} #btn-chat,#tooltip i,.nabil-live svg{vertical-align:middle} .nabil-live{color:white;background:linear-gradient(45deg,#029abd 0,#05c537 100%);background:-webkit-linear-gradient(45deg,#029abd 0,#05c537 100%);bottom:25px;line-height:30px;font-size:15px;padding:0;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;-webkit-box-shadow:0 1px 5px rgba(154,154,154,.2);-moz-box-shadow:0 1px 5px rgba(154,154,154,.2);box-shadow:0 1px 5px rgba(154,154,154,.2);} .nabil-live .svg{margin:0;position:absolute;top:0;padding:5px 8px;-webkit-border-radius:0 50px 50px 0;-moz-border-radius:0 50px 50px 0;border-radius:0 50px 50px 0;right:-10px;background-color:white;color:#31c73a;width:39px;height:39px;line-height:30px;overflow:hidden;text-align:center;z-index:10} .box-live,.goomwhats,.info-avatar{position:relative} .box-live a,.info-chat{color:white} .box-live{padding:4px 20px} .box-live span{margin-right:40px;font-size:13px} .info-chat{padding-top:3px} .info-chat span.chat-label{font-size:15px;font-weight:700} .info-chat span.chat-text{font-size:13px;line-height:1.3;color:#d7ffee} .info-avatar{width:48px;height:48px;float:left;margin:5px 15px 0 0} .info-avatar img{-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;width:100%;height:auto} .informasi{padding:15px;overflow:hidden;position:relative;background:linear-gradient(45deg, 0,#05c537 100%);background:-webkit-linear-gradient(45deg,#029abd 0,#05c537 100%);z-index:1;-webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.35);-moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.35);box-shadow:0 1px 5px rgba(0, 0, 0, 0.35);} .goomwhats{color:#444;padding:5px 15px;background-color:white;font-size:14px;display:flow-root} .goomwhats a{color:#1856c7} .boxmsg{margin:8px 0 0;float:left;width:74%;display:block} .goophone{position:absolute;right:45px;top:10px;font-size:13px;z-index:10} .goophone a{color:#e6f9d2;margin-left:15px} .goophone a svg,a.close-chat svg{width:16px;height:auto;fill:#e6f9d2} .jamwa{display:block;float:right;font-size:11px;color:#717171} .jamwa div{display:inline-block} #btn-chat{float:right;margin-top:15px} .first-msg{background-color:#e6ddd4;position:relative;padding:20px 20px 20px 10px} .first-msg::before{display:block;position:absolute;content:"";left:0;top:0;height:100%;width:100%;z-index:0;opacity:.08;background-image:url(https://goomsite.github.io/img/wa-min.webp)} #tooltip:after,.box-msg:before{content:''} .box-msg{background:#e4fec8;box-shadow:0 1px 5px rgba(0,0,0,.13);color:#333;font-size:14px;line-height:1.7;border-radius:0 7.5px 7.5px;position:relative;margin-left:30px;padding:10px 20px;z-index:1;display:inline-block} .box-msg:before{position:absolute;border-width:17px;border-style:none solid solid none;border-color:#e4fec8 #e4fec8 transparent transparent;top:0;left:-16px} .box-msg span{display:block} .box-msg span.chat-nama{font-size:13px;line-height:18px;color:rgba(0,0,0,.4)} .box-msg span.chat-cript{margin-bottom:5px} #tooltip{text-align:center;color:#fff;background:#333;position:absolute;z-index:100;padding:10px 20px;border-radius:4px;font-size:90%;box-shadow:0 1px 10px rgba(0,0,0,.6)} #tooltip i{display:inline-block;margin:5px} #tooltip:after{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #333;position:absolute;left:50%;bottom:-10px;margin-left:-10px} #tooltip.top:after{border-top-color:transparent;border-bottom:10px solid #333;top:-20px;bottom:auto} #tooltip.left:after{left:10px;margin:0} #tooltip.right:after{right:10px;left:auto;margin:0} .formtamv *{outline:0;text-decoration:none} .formtamv .focus{box-shadow:inset 0 0 0 1px #36c83f} .formtamv label{position:relative;display:block;width:100%;margin:0;padding:0} .formtamv label>input,.formtamv label>select,.formtamv label>textarea{position:relative;z-index:1;border:none;background:#f9f9f9;box-shadow:inset 0 0 0 1px rgba(0,0,0,.02),inset 1px 1px 5px rgba(0,0,0,.05);width:100%;border-radius:50px;padding:10px 20px 0} .formtamv label>i{position:absolute;z-index:0;display:inline-block;vertical-align:top;width:40px;text-align:center;font-size:20px;height:auto;background:none;box-shadow:none;top:3px;left:0;color:rgba(0,0,0,.2)} .formtamv label small{position:relative;display:block;margin-top:10px;z-index:3} .formtamv label small>a.tooltip{margin-left:10px;font-size:20px;vertical-align:middle;display:inline-block;color:rgba(0,0,0,.4)} .formtamv label small>a.tooltip:hover{color:rgba(0,0,0,.6)} .formtamv label small a{font-weight:700} .formtamv select::-ms-expand{display:none} .formtamv select{-moz-appearance:none;-webkit-appearance:none;appearance:none} .formtamv select option{font-size:18px;background:#edf8f5;color:rgba(0,0,0,.7);text-shadow:none} .formtamv .nomor_whatsapp[type=number]::-webkit-inner-spin-button,.formtamv .nomor_whatsapp[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .nomor_whatsapp[type=number]{-moz-appearance:textfield} .formtamv label> :focus{background:none} .formtamv label textarea{min-height:20px;resize:none;margin-bottom:0} .formtamv label .validasi{position:absolute;z-index:2;right:-30px;background:#36c83f;color:#fff;padding:5px 10px;border-radius:3px;font-size:80%;box-shadow:0 5px 10px rgba(0,0,0,.1);transition:.4s;visibility:hidden;opacity:0;display:inline-block!important} .formtamv label .validasi.show{visibility:visible;opacity:1;bottom:100%} .formtamv label .validasi:after{position:absolute;top:100%;right:10px;content:"";border:8px solid;border-color:#36c83f transparent transparent} a.close-chat{position:absolute;top:10px;right:13px;color:#c3ffc7;font-size:18px;z-index: 10;} .nime{position:absolute;display:block;width:10px;height:10px;border-radius:100%;background-color:#05d436;right:-2px;bottom:8px} .nime:after,.nime:before{content:"";position:absolute;width:24px;height:24px;opacity:0;border-radius:100%;top:-8px;left:-8px;background:#05d436} .nime:before{-webkit-animation:nime 2s ease-out infinite;animation:nime 2s ease-out infinite} .nime:after{z-index:1;-webkit-animation:nime 2s .4s ease-out infinite;animation:nime 2s .4s ease-out infinite} @-webkit-keyframes nime{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)} 5%{opacity:1} 100%{opacity:0}} @keyframes nime{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)} 5%{opacity:1} 100%{opacity:0}} @keyframes showhide{from{transform:scale(.5);opacity:0}} @keyframes showchat{from{transform:scale(0);opacity:0}} .hide,.show{animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1} @media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}} .postmeta a,.sidebar-wrapper{font-size:14px;overflow:hidden} .hide{display:none} .show{display:block} Information : can be adjusted if the icon is enlarged
.nabil-live .svg{margin:0;position:absolute;top:0;padding:5px 8px;-webkit-border-radius:0 50px 50px 0;-moz-border-radius:0 50px 50px 0;border-radius:0 50px 50px 0;right:-10px;background-color:white;color:#31c73a;width:39px;height:39px;line-height:30px;overflow:hidden;text-align:center;z-index:10}

0 Komentar