Hôm nay mình mới sưu tầm được một hộp liên hệ khác đẹp nên chia sẽ cho mọi người cùng đọc cách cài đặt thì cũng khá đơn giản
CÁC BƯỚC THỰC HIỆN
1. Vào chủ đề » Chỉnh sửa HTML dán toàn bộ code bên dưới vào
]]></b:skin>/* Online Support */ .closebox{background:#fff;border:1px solid #eaeaea;position:absolute;top:-110px;right:-15px;cursor:pointer;font-size:18px;font-weight:700;color:#333;border-radius:100%;width:26px;z-index:9999;transition:background-color .3s ease 0s;transition:all .5s ease-in-out;transition-delay:.1s} .closebox:hover{color:#ffe700;border:1px solid #ffe700} ul,li{list-style-type:none;list-style-position:inside;margin:0;padding:0} i[class^="icon-"]{display:inline-block;text-align:center} .icon-icon-phone{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiqHOCIsLsm4UDbGDP_pBqmsUx3cj1-6xR1AVZHQwZrT5xJMhezOjEpm9gjWBcBXBPhX2HuDaUDnb83rIRZM70kI4_w7Hp7vKDgJi2TMvxFO_hsgWmhqPETR2YusdKOqdNmNgEmQIT0kf6/s1600/call-phone.png);background-size:100%;width:24px;height:24px;margin-left:-4px} .icon-icon-chat{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-4vkmrAJxmJlYvEzAqoZdcOEOxGdNy5gQFJQpq06wpNzFjQ5-jpXHbjWco8HEZFB1G2ac4LeC77H9OVas_iV30oUgqvBVhnOzxllZpNo-fBzZO4he4hugXafg24kBFbjJD98JYS2QI8Hm/s1600/messenger.png);background-size:100%;width:20px;height:20px} .icon-icon-zalo{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggC8wvMymrmVonyzHMCxHgdxxPgNZ0YCBvWriD7Bf2cJIFeC_JUHux8OFEALD4NPbYxnd30AKXQl5GCtBD689AUmpdTmT7qDhRsp-gA7A3MUymOpG3ZsJDHk1JThGMDRpS3wDvkimkB4xH/s1600/zalo.png);background-size:100%;width:18px;height:18px;border-radius:5px} .widget.widget_why_choose_us_widget{padding:15px;background-color:#f0f0f0;border-radius:5px} @media only screen and (max-width:768px){.online-support.online-support-product-details{bottom:32px}} @media only screen{.online-support{display:block;position:fixed;left:150px;bottom:20px;z-index:999}.online-support .btn--support{font-size:16px;padding:5px 16px;border:0;background:#d51e29;color:#fff;display:none;-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0}.online-support .btn--support:active,.online-support .btn--support:hover,.online-support .btn--support:focus{font-size:16px;border:0}.online-support .dropup.force-open>.dropdown-2-menu{display:block!important}.online-support .dropup>.dropdown-2-menu{}.online-support .dropup>.dropdown-2-menu.dropdown-2-menu-right{left:auto!important;right:0!important}.online-support .dropdown-2-menu li{position:relative}.online-support .dropdown-2-menu li>a:hover,.online-support .dropdown-2-menu li>a:focus,.online-support .dropdown-2-submenu:hover>a{background:#ffe700}.online-support .dropdown-2-menu li a{padding:3px 10px 3px 10px;text-align:left;min-height:18px;line-height:18px;font-size:13px}.online-support .dropdown-2-menu li a i{vertical-align:middle;margin-right:8px}.online-support li.dropdown-2-submenu li a{padding-right:10px}.online-support .dropdown-2-submenu>a:after{display:none}.online-support .dropdown-2-submenu .dropdown-2-menu{right:0!important;top:auto!important;bottom:100%!important;left:auto!important;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.dropdown-2-submenu{position:relative}.dropdown-2-submenu>.dropdown-2-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.dropdown-2-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#ccc;margin-top:5px;margin-right:-10px}.dropdown-2-submenu:hover>a:after{border-left-color:#555}.dropdown-2-submenu.pull-left,.dropdown-2-submenu.pull-right{float:none}.dropdown-2-submenu.pull-left>.dropdown-2-menu{left:auto;right:0;bottom:100%;margin-left:10px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}} .dropdown-2-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:140px;padding:5px 0;margin:2px 0 0;list-style:none;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);*border-right-width:2px;*border-bottom-width:2px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box} .dropdown-2-menu.pull-right{right:0;left:auto} .dropdown-2-menu .divider{*width:100%;height:1px;margin:9px 1px;*margin:-5px 0 5px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #fff} .dropdown-2-menu li>a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:20px;color:#333;white-space:nowrap} .dropdown-2-menu li>a:hover,.dropdown-2-menu li>a:focus,.dropdown-2-submenu:hover>a{color:#fff;text-decoration:none;background-color:#0081c2;background-image:-moz-linear-gradient(top,#08c,#0077b3);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));background-image:-webkit-linear-gradient(top,#08c,#0077b3);background-image:-o-linear-gradient(top,#08c,#0077b3);background-image:linear-gradient(to bottom,#08c,#0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0)} .dropdown-2-menu .active>a,.dropdown-2-menu .active>a:hover{color:#fff;text-decoration:none;background-color:#0081c2;background-image:-moz-linear-gradient(top,#08c,#0077b3);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));background-image:-webkit-linear-gradient(top,#08c,#0077b3);background-image:-o-linear-gradient(top,#08c,#0077b3);background-image:linear-gradient(to bottom,#08c,#0077b3);background-repeat:repeat-x;outline:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0)} .dropdown-2-menu .disabled>a,.dropdown-2-menu .disabled>a:hover{color:#999} .dropdown-2-menu .disabled>a:hover{text-decoration:none;cursor:default;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)} .open{*z-index:1000} .open>.dropdown-2-menu{display:block} .pull-right>.dropdown-2-menu{right:0;left:auto} .dropup .caret,.navbar-fixed-bottom .dropdown-2 .caret{border-top:0;border-bottom:4px solid #000;content:""} .dropup .dropdown-2-menu,.navbar-fixed-bottom .dropdown-2 .dropdown-2-menu{top:auto;bottom:100%;margin-bottom:1px} .dropdown-2-submenu{position:relative} .dropdown-2-submenu>.dropdown-2-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px} .dropdown-2-submenu:hover>.dropdown-2-menu{display:block} .dropup .dropdown-2-submenu>.dropdown-2-menu{top:auto;bottom:0;margin-top:0;margin-bottom:-2px;-webkit-border-radius:5px 5px 5px 0;-moz-border-radius:5px 5px 5px 0;border-radius:5px 5px 5px 0} .dropdown-2-submenu>a:after{display:block;float:right;width:0;height:0;margin-top:5px;margin-right:-10px;border-color:transparent;border-left-color:#ccc;border-style:solid;border-width:5px 0 5px 5px;content:" "} .dropdown-2-submenu:hover>a:after{border-left-color:#fff} .dropdown-2-submenu.pull-left{float:none} .dropdown-2-submenu.pull-left>.dropdown-2-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px} .dropdown-2 .dropdown-2-menu .nav-header{padding-right:20px;padding-left:20px} body.single-product .online-support{bottom:32px!important}2. Tìm đến thẻ
</body> dán toàn bộ code bên trước phía trước thẻ đó.<!-- Online support --> <div class="online-support" id="support-box"> <input class='closebox' onclick='document.getElementById('support-box').style.display='none';' title='Đóng' type='button' value='×'/> <div class="dropup force-open"><a class="btn btn--support" data-toggle="dropdown-2">Hỗ trợ trực tuyến</a> <ul class="dropdown-2-menu dropdown-2-menu-right dropdown-2--support"> <li><a href="tel:01234567890"><i class="icon-icon-phone"></i> GỌI HOTLINE</a></li> <li><a href="//m.me/iristipsblog" target="_blank" rel="noopener"><i class="icon-icon-chat"></i> INBOX FB</a></li> <li><a href="//zalo.me/01234567890" target="_blank" rel="noopener"><i class="icon-icon-zalo"></i> CHAT ZALO</a></li></ul></div></div>
LỜI KẾT
Vậy là đã xong rồi nếu có thắc mắc gì bình luận bên dưới nhé. Thấy hay thì chia sẽ cho m.n cùng đọc!!!
