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:1pxsolid #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:1pxsolid #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/AVvXsEhR1ykEymo77QBJuyt5jKW3jbMZagxC9wzZ5M-wNSqAT6Phdzj28BviZtbCRwe0NrZsTpNqRlQnv1np9KQ23TtORIKnMCMGgXEAxBNL6Qapejbei0_Q4gkHzvIbHvRvTnMLjFOS2R-MXCbF/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/AVvXsEioiGQpp1jjy_9s8rKmInt5QUGZ91cAc9bGCpzKkItzBtRIXwwCVyqEewKH1YLT6fFoJK-QljBCVAShmcQ2mfxUJi8nLN4RuAIriQN4PxhCAjece3mHR7wNggJq3PUWLNYnBL2zr5qNF-SN/s1600/messenger.png);background-size:100%;width:20px;height:20px}.icon-icon-zalo{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij23XnwvweMxWxAFt8w2GwBAGVaDtMDKeZfd8OddRJhrPw0JmbkFXikTFNeNiaMaPuZYb-oxGvQSEoE3CrlZ4yEgskrd90gHbACVsT6a8V4b03T_8RXnNXzgklu2z8wo78VXY2NhXadJuC/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}} @mediaonly screen{.online-support{display:block;position:fixed;left:150px;bottom:20px;z-index:999}.online-support .btn--support{font-size:16px;padding:5px16px;border:0;background:#d51e29;color:#fff;display:none;-webkit-border-radius:6px 6px0 0;-moz-border-radius:6px6px 0 0;border-radius:6px 6px0 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}.online-support .dropup>.dropdown-2-menu{}.online-support.dropup>.dropdown-2-menu.dropdown-2-menu-right{left:auto;right:0}.online-support .dropdown-2-menuli{position:relative}.online-support .dropdown-2-menuli>a:hover,.online-support.dropdown-2-menuli>a:focus,.online-support.dropdown-2-submenu:hover>a{background:#ffe700}.online-support .dropdown-2-menu lia{padding:3px 10px 3px10px;text-align:left;min-height:18px;line-height:18px;font-size:13px}.online-support.dropdown-2-menu li ai{vertical-align:middle;margin-right:8px}.online-supportli.dropdown-2-submenu lia{padding-right:10px}.online-support .dropdown-2-submenu>a:after{display:none}.online-support .dropdown-2-submenu .dropdown-2-menu{right:0;top:auto;bottom:100%;left:auto;-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 05px 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:5px0;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 5px10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10pxrgba(0,0,0,.2);box-shadow:05px 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:9px1px;*margin:-5px 05px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #fff}.dropdown-2-menuli>a{display:block;padding:3px20px;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 6px6px 6px;-moz-border-radius:06px 6px 6px;border-radius:06px 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 5px5px 0;-moz-border-radius:5px5px 5px 0;border-radius:5px5px 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 05px 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 6px6px;border-radius:6px 0 6px6px} .dropdown-2 .dropdown-2-menu .nav-header{padding-right:20px;padding-left:20px}body.single-product .online-support{bottom:32px}2. Tìm đến thẻ
</body> dán toàn bộ code bên trước phía trước thẻ đó.<!-- Online support --> <divclass="online-support"id="support-box"> <inputclass='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> <ulclass="dropdown-2-menu dropdown-2-menu-right dropdown-2--support"> <li><ahref="tel:01234567890"><iclass="icon-icon-phone"></i> GỌI HOTLINE</a></li> <li><ahref="//m.me/iristipsblog"target="_blank" rel="noopener"><iclass="icon-icon-chat"></i> INBOX FB</a></li> <li><ahref="//zalo.me/01234567890"target="_blank" rel="noopener"><iclass="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!!!
Subscribe Our Newsletter
0 Response to "Share code hộp liên hệ đẹp cho blogger"
Đăng nhận xét