আপনার ব্লগার সাইটে এড করুন আসাধারণ কন্টাক্ট বাটন উইজেট।

আসসালামু আলাইকুম । কেমন আসেন বন্ধুরা? আশা করি ভালো আছেন। দীর্ঘ বিরতীর পর আবার লিখতে বসলাম।আশা করছি সকলের রুচিশীল একটি টিউটোরিয়াল শেয়ার করতে।

আজকের টিউটোরিয়ালের বিষয় হচ্ছে টুগল কন্টাক্ট বাটন কে কেন্দ্র করে। 

আপনার ব্লগার সাইটে এড করুন সাধারণ কন্টাক্ট বাটন উইজেট।

তো চলুন শুরু করা যাক।

প্রথমে ব্লগারে লগিং করে আপনার ব্লগটি সিলেক্ট করুন।

তারপর লেওয়াউট থেকে থিমে যান।

আপনার ব্লগার সাইটে এড করুন সাধারণ কন্টাক্ট বাটন উইজেট।

এবার এডিট এইসটিএমএল এ ক্লিক করুন। তারপর কীবোর্ড হতে Ctrl+F একসাথে প্রস করুন ।

এখন সার্চবারে  ]]></b:skin> লিখে সার্চ করুন। ]]></b:skin> লিখাটি খুঁজে পেলে নিছের কোডগুলো  

]]></b:skin> লিখার উপরে পেস্ট করুন।

@font-face{font-family:'whatshelp';src:url('/fonts/whatshelp.eot?nusorz');src:url('/fonts/whatshelp.eot?nusorz#iefix') format('embedded-opentype'),url('/fonts/whatshelp.ttf?nusorz') format('truetype'),url('/fonts/whatshelp.woff?nusorz') format('woff'),url('/fonts/whatshelp.svg?nusorz#whatshelp') format('svg');font-weight:normal;font-style:normal}

[class^="wh-icon-"],[class*=" wh-icon-"]{font-family:'whatshelp'!important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.wh-icon-facebook-messenger:before{content:"\e900"}

.wh-icon-whatshelp:before{content:"\e901"}

.wh-icon-whatsapp:before{content:"\e902"}

.wh-icon-telegram:before{content:"\e903"}

.wh-clear{clear:both}

.wh-hide{display:none!important}

*[id^="template-"]{display:none!important}

.popup-slide{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-duration:0.64s;animation-duration:0.64s;-webkit-animation-timing-function:cubic-bezier(0.23,1,0.32,1);animation-timing-function:cubic-bezier(0.23,1,0.32,1);-webkit-animation-delay:0.16s;animation-delay:0.16s}

.popup-slide-in{-webkit-animation-name:wh-popup-slide-in;animation-name:wh-popup-slide-in;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}

.popup-slide-out{-webkit-animation-name:wh-popup-slide-out;animation-name:wh-popup-slide-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}

@-webkit-keyframes wh-popup-slide-in{0%{opacity:0;-webkit-transform:translateY(45px);transform:translateY(45px);display:block}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);display:block}}

@keyframes wh-popup-slide-in{0%{opacity:0;-webkit-transform:translateY(45px);transform:translateY(45px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}

@-webkit-keyframes wh-popup-slide-out{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(45px);transform:translateY(45px)}}

@keyframes wh-popup-slide-out{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(45px);transform:translateY(45px)}}

.wh-widget-hello-popup-wrapper{margin:21px 20px 0 20px;padding:0;border:0;width:343px;text-align:center;font-family:Roboto,"Helvetica Neue",sans-serif;display:block;position:relative;line-height:23px;font-size:14px}

.wh-widget-hello-popup-wrapper.wh-popup-left{margin-left:10px}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup{box-shadow:7px 7px 15px 8px rgba(0,0,0,0.17);border:1px solid #e2e2e2;position:relative;min-height:149px;border-radius:10px;background-color:white}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-widget-hello-popup-close{float:right;padding:7px 9px 3px 5px;line-height:10px;cursor:pointer}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-widget-hello-popup-close svg{fill:#a3a3a3;width:15px;height:15px}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-messengers{margin-bottom:0;line-height:10px;text-align:left;padding-bottom:26px}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-messengers ul{display:inline-block;margin:0 0 0 85px;padding:0}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-messengers ul li{margin-bottom:0;margin-right:15px;line-height:10px;border-radius:50%;overflow:hidden;cursor:pointer;display:inline-block;width:28px;height:28px}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-messengers ul li.wh-messenger-bg-facebook{background-color:#0084ff}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-messengers ul li.wh-messenger-bg-whatsapp{background-color:#4dc247}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-messengers ul li.wh-messenger-bg-snapchat{background-color:#FFEA00}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-messengers ul li.wh-messenger-bg-viber{background-color:#7b519d}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-messengers ul li.wh-messenger-bg-line{background-color:#00c300}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-messengers ul li.wh-messenger-bg-telegram{background-color:#08c}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-messengers ul li.wh-messenger-bg-vkontakte{background-color:#6383a8}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-messengers ul li.wh-messenger-bg-email{background-color:#848484}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-messengers ul li.wh-messenger-bg-sms{background-color:#1ecea8}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-messengers ul li.wh-messenger-bg-call{background-color:#ec5923}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-messengers ul li a{line-height:10px;width:28px;height:28px;display:inline-block}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup .wh-messengers ul li a svg{margin:1px 0 0 1px;width:90%;height:90%}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup-content{min-height:58px;display:block;border-radius:4px 4px 0 0;color:black;padding:27px 23px 20px 18px}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup-content .wh-widget-hello-popup-content-logo{height:50px;width:50px;border:1px solid #e2e2e2;border-radius:8px;float:left}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup-content .wh-widget-hello-popup-content-logo img{height:50px;width:50px;border-radius:8px}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup-content .wh-widget-hello-popup-content-text{min-height:56px;width:234px;border:1px solid #e2e2e2;border-radius:8px;float:right;position:relative;cursor:pointer;word-wrap:break-word}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup-content .wh-widget-hello-popup-content-text a{text-decoration:none;color:black}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup-content .wh-widget-hello-popup-content-text a>div{text-align:left;padding:14px 16px;line-height:20px;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup-content .wh-widget-hello-popup-content-text::before{content:'';position:absolute;top:20px;left:-10px;border:5px solid transparent;border-right:5px solid #e2e2e2}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup-content .wh-widget-hello-popup-content-text::after{content:'';position:absolute;top:20px;left:-9px;border:5px solid transparent;border-right:5px solid #fff}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup-powered{margin-top:11px;text-align:right;padding:0 29px 4px 0;font-size:11px;color:#afafaf}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup-powered a{color:#afafaf;text-decoration:none}

.wh-widget-hello-popup-wrapper .wh-widget-hello-popup-powered a span{text-decoration:underline}

.wh-widget-hello-popup-wrapper.wh-popup{box-shadow:7px 7px 15px 8px rgba(0,0,0,0.17);border:1px solid #e2e2e2;position:relative;min-height:149px;border-radius:10px;background-color:white;width:302px}

.wh-widget-hello-popup-wrapper.wh-popup.wh-popup-left{margin-left:10px}

.wh-widget-hello-popup-wrapper.wh-popup.wh-popup-right{margin-right:20px}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-title-bar{height:50px;border-radius:6px 6px 0 0;margin:-1px}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-title-bar.wh-messenger-bg-facebook{background-color:#0084ff}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-title-bar.wh-messenger-bg-whatsapp{background-color:#4dc247}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-title-bar.wh-messenger-bg-snapchat{background-color:#FFEA00}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-title-bar.wh-messenger-bg-viber{background-color:#7b519d}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-title-bar.wh-messenger-bg-line{background-color:#00c300}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-title-bar.wh-messenger-bg-telegram{background-color:#08c}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-title-bar.wh-messenger-bg-vkontakte{background-color:#6383a8}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-title-bar.wh-messenger-bg-email{background-color:#848484}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-title-bar.wh-messenger-bg-sms{background-color:#1ecea8}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-title-bar.wh-messenger-bg-call{background-color:#ec5923}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-title-bar .title-bar-icon-close{float:right;cursor:pointer;margin:14px 12px 0 0}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-title-bar .title-bar-icon-messenger{float:left;margin:11px 0 0 11px}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-title-bar .title-bar-icon-messenger svg{fill:white;width:28px;height:28px}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-title-bar .title-bar-text{padding-top:15px;text-align:left;color:#FFFFFF}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-content.wh-popup-content-call>div{min-height:100px}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-content.wh-popup-content-call+.wh-clear+.wh-widget-hello-popup-powered.wh-hide{display:block!important}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-content.wh-popup-content-call+.wh-clear+.wh-widget-hello-popup-powered.wh-hide>a{display:none!important}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-content>div{padding:25px 12px 0 30px;min-height:168px}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-content .content-wa-text{text-align:left;word-wrap:break-word}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-content .content-wa-number,.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-content .content-call-number{margin-top:38px;text-align:left;font-size:26px;word-wrap:break-word}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-content .content-facebook{padding:0;height:299px;overflow:hidden}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-content .content-snapchat-qrcode{height:207px}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-content .content-snapchat-name{font-size:16px;font-weight:600;margin:5px 0 15px 0}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-content .content-line{padding:0;height:380px;overflow:hidden}

.wh-widget-hello-popup-wrapper.wh-popup .wh-popup-content .content-line iframe{margin-top:-115px;width:302px;height:490px;border:none;overflow:hidden}

.wh-widget-hello-popup-wrapper.wh-popup .wh-widget-hello-popup-powered{text-align:center;padding-bottom:7px;padding-left:24px}

@-webkit-keyframes button-slide{0%{opacity:0;display:none;margin-top:0;margin-bottom:0;-ms-transform:translateY(15px);-webkit-transform:translateY(15px);-moz-transform:translateY(15px);-o-transform:translateY(15px);transform:translateY(15px)}to{opacity:1;display:block;margin-top:0;margin-bottom:14px;-ms-transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}

@-moz-keyframes button-slide{0%{opacity:0;display:none;margin-top:0;margin-bottom:0;-ms-transform:translateY(15px);-webkit-transform:translateY(15px);-moz-transform:translateY(15px);-o-transform:translateY(15px);transform:translateY(15px)}to{opacity:1;display:block;margin-top:0;margin-bottom:14px;-ms-transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}

@-o-keyframes button-slide{0%{opacity:0;display:none;margin-top:0;margin-bottom:0;-ms-transform:translateY(15px);-webkit-transform:translateY(15px);-moz-transform:translateY(15px);-o-transform:translateY(15px);transform:translateY(15px)}to{opacity:1;display:block;margin-top:0;margin-bottom:14px;-ms-transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}

@keyframes button-slide{0%{opacity:0;display:none;margin-top:0;margin-bottom:0;-ms-transform:translateY(15px);-webkit-transform:translateY(15px);-moz-transform:translateY(15px);-o-transform:translateY(15px);transform:translateY(15px)}to{opacity:1;display:block;margin-top:0;margin-bottom:14px;-ms-transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}

.button-slide{-webkit-animation-name:button-slide;-moz-animation-name:button-slide;-o-animation-name:button-slide;animation-name:button-slide;-webkit-animation-duration:.2s;-moz-animation-duration:.2s;-o-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards}

.button-slide-out{-webkit-animation-name:button-slide;-moz-animation-name:button-slide;-o-animation-name:button-slide;animation-name:button-slide;-webkit-animation-duration:.2s;-moz-animation-duration:.2s;-o-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-direction:reverse;-moz-animation-direction:reverse;-o-animation-direction:reverse;animation-direction:reverse}

@-webkit-keyframes button-mes-us{0%{opacity:0;display:none;margin-left:55px;margin-right:55px}to{opacity:1;display:block;margin-left:70px;margin-right:70px}}

@-moz-keyframes button-mes-us{0%{opacity:0;display:none;margin-left:55px;margin-right:55px}to{opacity:1;display:block;margin-left:70px;margin-right:70px}}

@-o-keyframes button-mes-us{0%{opacity:0;display:none;margin-left:55px;margin-right:55px}to{opacity:1;display:block;margin-left:70px;margin-right:70px}}

@keyframes button-mes-us{0%{opacity:0;display:none;margin-left:55px;margin-right:55px}to{opacity:1;display:block;margin-left:70px;margin-right:70px}}

div.wh-widget-send-button-wrapper{margin:0;padding:0;border:0;position:fixed;z-index:16000160;bottom:0;text-align:center;overflow:hidden}

div.wh-widget-send-button-wrapper.wh-widget-left{left:0}

div.wh-widget-send-button-wrapper.wh-widget-left div.wh-widget-send-button-wrapper-list{left:0;float:left}

div.wh-widget-send-button-wrapper.wh-widget-left div.wh-widget-send-button-wrapper-list a.wh-widget-send-button-get-button{float:left;left:1px}

div.wh-widget-send-button-wrapper.wh-widget-left div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon{float:left}

div.wh-widget-send-button-wrapper.wh-widget-right{right:0}

div.wh-widget-send-button-wrapper.wh-widget-right div.wh-widget-send-button-wrapper-list{right:10px;float:right}

div.wh-widget-send-button-wrapper.wh-widget-right div.wh-widget-send-button-wrapper-list a.wh-widget-send-button-get-button{float:right;right:1px}

div.wh-widget-send-button-wrapper.wh-widget-right div.wh-widget-send-button-wrapper-list>a.wh-widget-button{min-width:55px}

div.wh-widget-send-button-wrapper.wh-widget-right div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.mes-us{text-align:right}

div.wh-widget-send-button-wrapper.wh-widget-right div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon{float:right}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list{margin:10px;margin-bottom:20px;padding:0;border:0;position:relative;bottom:3px;text-align:center}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list.wh-widget-activate>a.wh-widget-button{display:block}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list.wh-widget-activate>a.wh-widget-button.wh-widget-button-activator div.mes-us{display:none}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list.wh-widget-activator-as-close>a.wh-widget-button.wh-widget-button-activator div.mes-us{display:none}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list.wh-widget-activator-as-close>a.wh-widget-button.wh-widget-button-activator div.wh-widget-button-icon>div{-ms-transform:rotate(270deg);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list.wh-widget-activator-as-close>a.wh-widget-button.wh-widget-button-activator div.wh-widget-button-icon .wh-svg-close{display:inline}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list.wh-widget-activator-as-close>a.wh-widget-button.wh-widget-button-activator div.wh-widget-button-icon .wh-svg-icon{display:none}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list.wh-widget-show-get-button a.wh-widget-send-button-get-button{display:block}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list a.wh-widget-send-button-get-button{display:none;position:fixed;white-space:nowrap;text-decoration:none;font-family:Roboto,"Helvetica Neue",sans-serif;font-size:11px;color:#afafaf}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list a.wh-widget-send-button-get-button:hover{text-decoration:underline}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button{display:none;text-decoration:none;font-weight:normal;margin-top:14px;position:relative;outline:none}

.wh-widget-send-button-desktop div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button:hover div.mes-us{display:block;-webkit-animation-name:button-mes-us;-moz-animation-name:button-mes-us;-o-animation-name:button-mes-us;animation-name:button-mes-us;-webkit-animation-duration:.2s;-moz-animation-duration:.2s;-o-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards}

.wh-widget-send-button-desktop div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button:hover div.wh-widget-button-icon{box-shadow:2px 2px 11px rgba(0,0,0,0.7)}

.wh-widget-send-button-desktop div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button.wh-widget-button-activator div.mes-us{display:none}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button.wh-widget-button-activator{display:block}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button.wh-widget-button-activator div.wh-widget-button-icon>div{height:100%;width:100%;-moz-transition:transform 0.4s ease;-o-transition:transform 0.4s ease;-webkit-transition:transform 0.4s ease;transition:transform 0.4s ease}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.mes-us{position:relative;font-family:Arial,Helvetica Neue,Helvetica,sans-serif;font-size:13px;border:1px solid #e2e2e2;margin-right:55px;margin-left:55px;padding:4px 9px 6px 9px;border-radius:4px;color:#333;background:white;top:12px;box-shadow:2px 2px 5px rgba(0,0,0,0.2);white-space:nowrap;display:none}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon{float:left;height:50px;width:50px;border-radius:50%;overflow:hidden;box-shadow:2px 2px 6px rgba(0,0,0,0.4);font-size:28px;text-align:center;line-height:50px;color:white}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon .wh-svg-close{display:none}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon .wh-svg-icon{display:inline}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon.wh-messenger-bg-facebook{background-color:#0084ff}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon.wh-messenger-bg-whatsapp{background-color:#4dc247}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon.wh-messenger-bg-snapchat{background-color:#FFEA00}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon.wh-messenger-bg-viber{background-color:#7b519d}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon.wh-messenger-bg-line{background-color:#00c300}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon.wh-messenger-bg-telegram{background-color:#08c}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon.wh-messenger-bg-zalo

{background-color:#018fe5}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon .wh-messenger-svg-zalo{width:30px}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon.wh-messenger-bg-vkontakte{background-color:#6383a8}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon.wh-messenger-bg-email{background-color:#848484}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon.wh-messenger-bg-sms{background-color:#1ecea8}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon.wh-messenger-bg-call{background-color:#ec5923}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon svg{fill:white;width:41px;height:50px}

div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon i{display:inline;line-height:48px}

@-webkit-keyframes callToActionRight{0%{opacity:0;right:-20px}to{opacity:1;right:0}}

@-moz-keyframes callToActionRight{0%{opacity:0;right:-20px}to{opacity:1;right:0}}

@-o-keyframes callToActionRight{0%{opacity:0;right:-20px}to{opacity:1;right:0}}

@keyframes callToActionRight{0%{opacity:0;right:-20px}to{opacity:1;right:0}}

@-webkit-keyframes callToActionLeft{0%{opacity:0;left:-20px}to{opacity:1;left:0}}

@-moz-keyframes callToActionLeft{0%{opacity:0;left:-20px}to{opacity:1;left:0}}

@-o-keyframes callToActionLeft{0%{opacity:0;left:-20px}to{opacity:1;left:0}}

@keyframes callToActionLeft{0%{opacity:0;left:-20px}to{opacity:1;left:0}}

#wh-call-to-action{position:relative;top:29px;box-shadow:2px 2px 13px rgba(0,0,0,0.1);border:1px solid #e2e2e2;border-radius:5px;background:white;cursor:pointer}

#wh-call-to-action a{text-decoration:none;color:black}

#wh-call-to-action a .wh-call-to-action-content{padding:5px 10px 5px 10px;line-height:18px;max-height:34px;max-width:135px;overflow:hidden;word-wrap:break-word;font-family:Arial,Helvetica Neue,Helvetica,sans-serif;font-size:14px;box-sizing:content-box}

.wh-widget-right #wh-call-to-action{float:left;margin-right:10px}

.wh-widget-right #wh-call-to-action.wh-animation-in{-webkit-animation-name:callToActionRight;-moz-animation-name:callToActionRight;-o-animation-name:callToActionRight;animation-name:callToActionRight;-webkit-animation-duration:.2s;-moz-animation-duration:.2s;-o-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards}

.wh-widget-right #wh-call-to-action.wh-animation-out{-webkit-animation-name:callToActionRight;-moz-animation-name:callToActionRight;-o-animation-name:callToActionRight;animation-name:callToActionRight;-webkit-animation-duration:.2s;-moz-animation-duration:.2s;-o-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-direction:reverse;-moz-animation-direction:reverse;-o-animation-direction:reverse;animation-direction:reverse}

.wh-widget-right #wh-call-to-action:before{z-index:2}

.wh-widget-right #wh-call-to-action:before,.wh-widget-right #wh-call-to-action:after{content:'';position:absolute;background:white;border-bottom:1px solid #e2e2e2;border-right:1px solid #e2e2e2;right:-5px;top:50%;margin-top:-4px;width:8px;height:8px;z-index:1;-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}

.wh-widget-left #wh-call-to-action{float:right;margin-left:10px}

.wh-widget-left #wh-call-to-action.wh-animation-in{-webkit-animation-name:callToActionLeft;-moz-animation-name:callToActionLeft;-o-animation-name:callToActionLeft;animation-name:callToActionLeft;-webkit-animation-duration:.2s;-moz-animation-duration:.2s;-o-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards}

.wh-widget-left #wh-call-to-action.wh-animation-out{-webkit-animation-name:callToActionLeft;-moz-animation-name:callToActionLeft;-o-animation-name:callToActionLeft;animation-name:callToActionLeft;-webkit-animation-duration:.2s;-moz-animation-duration:.2s;-o-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-direction:reverse;-moz-animation-direction:reverse;-o-animation-direction:reverse;animation-direction:reverse}

.wh-widget-left #wh-call-to-action:before{z-index:2}

.wh-widget-left #wh-call-to-action:before,.wh-widget-left #wh-call-to-action:after{content:'';position:absolute;background:white;border-bottom:1px solid #e2e2e2;border-right:1px solid #e2e2e2;left:-5px;top:50%;margin-top:-4px;width:8px;height:8px;z-index:1;-ms-transform:rotate(135deg);-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg)}

body{margin:0}

svg{fill:white}

div.wh-widget-send-button-wrapper a.wh-widget-send-button-get-button{position:relative;bottom:5px;float:right;margin-right:8px;text-decoration:none;font-family:Roboto,"Helvetica Neue",sans-serif;font-size:11px;color:#afafaf}

div.wh-widget-send-button-wrapper a.wh-widget-send-button-get-button:hover{text-decoration:underline}

div.wh-widget-send-button-wrapper.wh-widget-right a.wh-widget-send-button-get-button{margin-right:17px}

div.clear{clear:both}

*{-webkit-tap-highlight-color:transparent!important}

আরও পড়ুনঃ 

                    নিয়েনিন অসাধারন Floating Email Subscribe Box.

                    ফিক্সড স্লাইড ইফেক্ট বাংলা ফেসবুক লাইক বক্স ব্লগস্পট ব্লগের জন্য

                    নিয়ে নিন আইটি সাঈম এর ফোটার বাটন কোড।

                    ফেসবুক চ্যাট বক্স ম্যাসেঞ্জার সঙ্গে লাইক বাটন ব্লগার ব্লগের জন্য।

এখন আবার সার্চবারে লিখুন </body> লিখে সার্চ করুন। ট্যাগটি খুঁজে পেলে নিছের কোডগুলো <body> ট্যাগের উপরে পেস্ট করুন।

<!--Contact Button Widget-->

<div class='wh-widget-send-button-desktop'>

  <div class='wh-widget-send-button-wrapper wh-widget-right'>

    <div class='wh-widget-hello-popup-wrapper wh-popup-right wh-hide popup-slide popup-slide-in'>

      <div class='wh-widget-hello-popup'>

        <div class='wh-widget-hello-popup-close'>

          <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

            <path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/>

            <path d='M0 0h24v24H0z' fill='none'/>

          </svg>

        </div>

      </div>

    </div>

    <div class='wh-animation-in' id='wh-call-to-action' style='top: 29px;'>

      <a href='javascript:void(0)' title=''>

        <div class='wh-call-to-action-content'>We are online 24/7</div>

      </a>

    </div>

    <div class='wh-widget-send-button-wrapper-list'>

      <!--contact cod by itsayeem.com-->

<a class='wh-widget-button button-slide-out' href='#' rel='noopener nofollow' target='_blank' title=''>

  <div class='wh-widget-button-icon wh-messenger-bg-facebook'>

    <div>

      <svg class='wh-messenger-svg-facebook wh-svg-icon' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

        <path d=' M16 6C9.925 6 5 10.56 5 16.185c0 3.205 1.6 6.065 4.1 7.932V28l3.745-2.056c1 .277 2.058.426 3.155.426 6.075 0 11-4.56 11-10.185C27 10.56 22.075 6 16 6zm1.093 13.716l-2.8-2.988-5.467 2.988 6.013-6.383 2.868 2.988 5.398-2.987-6.013 6.383z' fill-rule='evenodd'/>

      </svg>

    </div>

  </div>

  <div class='mes-us'>Facebook Messenger</div>

  <div class='clear'/>

</a>

<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>

  <div class='wh-widget-button-icon wh-messenger-bg-telegram'>

    <div>

      <svg class='wh-messenger-icon wh-messenger-bg-telegram' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

        <path d=' M15.02 20.814l9.31-12.48L9.554 17.24l1.92 6.42c.225.63.114.88.767.88l.344-5.22 2.436 1.494z' fill-rule='evenodd' opacity='.6'/><path d=' M12.24 24.54c.504 0 .727-.234 1.008-.51l2.687-2.655-3.35-2.054-.344 5.22z' fill-rule='evenodd' opacity='.3'/><path d=' M12.583 19.322l8.12 6.095c.926.52 1.595.25 1.826-.874l3.304-15.825c.338-1.378-.517-2.003-1.403-1.594L5.024 14.727c-1.325.54-1.317 1.29-.24 1.625l4.98 1.58 11.53-7.39c.543-.336 1.043-.156.633.214' fill-rule='evenodd'/>

      </svg>

    </div>

  </div>

  <div class='mes-us'>Send SMS</div>

  <div class='clear'/>

</a>

<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>

  <div class='wh-widget-button-icon wh-messenger-bg-whatsapp'>

    <div>

      <svg class='wh-messenger-icon wh-messenger-bg-whatsapp' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

        <path d=' M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z' fill-rule='evenodd'/>

      </svg>

    </div>

  </div>

  <div class='mes-us'>Whatsapp</div>

  <div class='clear'/>

</a>

<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>

  <div class='wh-widget-button-icon wh-messenger-bg-sms'>

    <div>

      <svg class='wh-messenger-icon wh-messenger-bg-sms' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

        <path d='M21 23h4.01c1.1 0 1.99-.893 1.99-1.994V8.994C27 7.894 26.11 7 25.01 7H6.99C5.89 7 5 7.893 5 8.994v12.012C5 22.106 5.89 23 6.99 23h9.566l3.114 3.504c.73.82 1.33.602 1.33-.5V23zM10.515 12.165c.36.11.682.26.962.446l-.413.88a3.882 3.882 0 0 0-.915-.416 2.9 2.9 0 0 0-.82-.136c-.3 0-.536.054-.707.16a.512.512 0 0 0-.256.46c0 .173.055.32.167.437.11.12.252.214.42.285.17.072.408.152.714.24.4.12.725.236.977.35.252.117.467.29.644.518.177.228.266.526.266.892 0 .344-.095.647-.285.907-.19.26-.453.46-.79.6-.338.14-.724.212-1.16.212-.45 0-.888-.086-1.31-.255a3.673 3.673 0 0 1-1.11-.684l.434-.863c.3.276.628.49.985.64.356.15.695.224 1.017.224.35 0 .622-.063.816-.19a.598.598 0 0 0 .292-.528.618.618 0 0 0-.174-.45 1.212 1.212 0 0 0-.43-.28 9.65 9.65 0 0 0-.713-.237 7.414 7.414 0 0 1-.977-.347 1.75 1.75 0 0 1-.637-.498c-.177-.22-.266-.51-.266-.877 0-.334.09-.625.27-.874.18-.25.434-.443.76-.578.324-.135.7-.202 1.127-.202.38 0 .75.055 1.11.165zm7.732 5.8l-.01-4.424-1.87 3.806h-.653l-1.867-3.805v4.426h-.942V12.04h1.186l1.955 3.938 1.945-3.937h1.178v5.926h-.92zm5.728-5.8c.36.11.68.26.962.446l-.413.88a3.882 3.882 0 0 0-.915-.416 2.9 2.9 0 0 0-.82-.136c-.3 0-.537.054-.707.16a.512.512 0 0 0-.257.46c0 .173.056.32.168.437.11.12.252.214.42.285.17.072.408.152.714.24.4.12.725.236.977.35.252.117.467.29.644.518.177.228.266.526.266.892 0 .344-.095.647-.285.907-.19.26-.453.46-.79.6-.338.14-.724.212-1.16.212-.45 0-.888-.086-1.31-.255a3.673 3.673 0 0 1-1.11-.684l.434-.863c.3.276.628.49.985.64.356.15.695.224 1.017.224.35 0 .622-.063.816-.19a.598.598 0 0 0 .29-.528.618.618 0 0 0-.172-.45 1.212 1.212 0 0 0-.43-.28 9.65 9.65 0 0 0-.713-.237 7.414 7.414 0 0 1-.977-.347 1.75 1.75 0 0 1-.637-.498c-.177-.22-.266-.51-.266-.877 0-.334.09-.625.27-.874.18-.25.434-.443.76-.578.324-.135.7-.202 1.126-.202.38 0 .75.055 1.112.165z' fill-rule='evenodd'/>

      </svg>

    </div>

  </div>

  <div class='mes-us'>Send SMS</div>

  <div class='clear'/>

</a>

<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>

  <div class='wh-widget-button-icon wh-messenger-bg-call'>

    <div>

      <svg class='wh-messenger-icon wh-messenger-bg-call' viewBox='-72 -72 704 704' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

        <path d=' M166.156,512h-41.531c-7.375-0.031-20.563-8.563-20.938-8.906C37.438,437.969,0,348.906,0,255.938 C0,162.719,37.656,73.375,104.281,8.219C104.313,8.188,117.25,0,124.625,0h41.531c15.219,0,33.25,11.125,40.063,24.781l2.906,5.844 c6.781,13.594,6.188,35.563-1.344,48.75l-27.906,48.813c-7.563,13.219-26.188,24.25-41.406,24.25H110.75 c-36.813,64-36.813,143.094-0.031,207.125h27.75c15.219,0,33.844,11.031,41.406,24.25l27.875,48.813 c7.531,13.188,8.156,35.094,1.375,48.781l-2.906,5.844C199.375,500.844,181.375,512,166.156,512z M512,128v256 c0,35.344-28.656,64-64,64H244.688c-1.25-11.219-3.969-22.156-9.156-31.25l-27.875-48.813 c-13.406-23.406-42.469-40.375-69.188-40.375h-8.156c-20.188-45.438-20.188-97.719,0-143.125h8.156 c26.719,0,55.781-16.969,69.188-40.375l27.906-48.813c5.188-9.094,7.906-20.063,9.156-31.25H448C483.344,64,512,92.656,512,128z M328,368c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S328,381.25,328,368z M328,304c0-13.25-10.75-24-24-24 s-24,10.75-24,24s10.75,24,24,24S328,317.25,328,304z M328,240c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24 S328,253.25,328,240z M392,368c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S392,381.25,392,368z M392,304 c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S392,317.25,392,304z M392,240c0-13.25-10.75-24-24-24s-24,10.75-24,24 s10.75,24,24,24S392,253.25,392,240z M456,368c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S456,381.25,456,368z M456,304 c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S456,317.25,456,304z M456,240c0-13.25-10.75-24-24-24s-24,10.75-24,24 s10.75,24,24,24S456,253.25,456,240z M456,144c0-8.844-7.156-16-16-16H296c-8.844,0-16,7.156-16,16v32c0,8.844,7.156,16,16,16h144 c8.844,0,16-7.156,16-16V144z' fill-rule='evenodd'/>

      </svg>

    </div>

  </div>

  <div class='mes-us'>Call now</div>

  <div class='clear'/>

      <a class='wh-widget-button wh-widget-button-activator' href='javascript:void(0);'>

        <div class='wh-widget-button-icon wh-messenger-bg-activator' style='background-color:#129BF4;'>

          <div>

            <svg class='wh-messenger-svg-close wh-svg-close' viewBox='-9 -10 41 44' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

              <path d=' M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' fill-rule='evenodd'/>

            </svg>

            <i class='wh-icon-whatshelp wh-svg-icon'/>

          </div>

        </div>

        <div class='clear'/>

      </a>

</a>

    </div>

    <div class='clear'/>

  </div>

</div>

<script>//<![CDATA[

$('.wh-messenger-bg-activator').on('click', function() {

  $(this).parent().parent().toggleClass('wh-widget-show-get-button wh-widget-activator-as-close wh-widget-activate');

  var call_to_action = $(this).parent().parent().parent().find('#wh-call-to-action');

  var widget_button = $(this).parent().parent().find('.wh-widget-button');

  if ($(call_to_action).hasClass('wh-animation-in')) {

    $(call_to_action).removeClass('wh-animation-in').addClass('wh-animation-out wh-hide');

  } else {

    $(call_to_action).addClass('wh-animation-in').removeClass('wh-animation-out wh-hide');

  }

  if ($(widget_button).not('.wh-widget-button-activator').hasClass('button-slide-out')) {

    $(widget_button).not('.wh-widget-button-activator').removeClass('button-slide-out').addClass('button-slide');

  } else {

    $(widget_button).not('.wh-widget-button-activator').addClass('button-slide-out').removeClass('button-slide');

  }

});

//]]></script>

<!--/Contact Button Widget-->

এখন সেইভ থিমে ক্লিক করুন।

ধন্যবাদ।