Tạo hộp liên hệ nhỏ gon trượt dọc theo website cực đẹp
Xuất bản - tháng 7 11, 2018
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://3.bp.blogspot.com/-Iurp8lgL-tk/WkXZDEJch4I/AAAAAAAAFdg/D2riO4gzJT4EE2a8cAvneRtigtY2DxAmwCLcBGAs/s1600/call-phone.png);background-size:100%;width:24px;height:24px;margin-left:-4px} .icon-icon-chat{background-image:url(https://3.bp.blogspot.com/-agNTEhbOzD0/WkXZC0-yTSI/AAAAAAAAFdc/3SHDjhZ-XXMNfYDmTX3yajN1Uj_djBlmQCLcBGAs/s1600/messenger.png);background-size:100%;width:20px;height:20px} .icon-icon-zalo{background-image:url(https://2.bp.blogspot.com/-IL-s_NEy_xQ/WkXZC9QoKbI/AAAAAAAAFdY/Eha-8Dopjfo-O3-nJKQb75C8RSIhh26jgCLcBGAs/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!!!
" buổi chưa cho thằng thìn nóng cháy chim đi " - đấy là mấy thằng trẩu sẽ làm vậy khi comment
Trả lờiXóaCòn nam hacker sẽ :
" Bài viết quá hay , chúc admin Lê Quang Thìn buổi chiều mát mẻ nhé ! "
Trời đụ khuyên em nên đi làm diễn viên hài :v
Xóahaha mắc cười vãi :v
Xóađọc là mắc cười a ạ :V
XóaNhìn thằng Nam bùn cười vãi chưởng :v
Trả lờiXóahaha chuẩn :V
Xóanay nam diễn hài cmnr :V
Trả lờiXóahaha
Xóabsvv nhé ông
Trả lờiXóaThank nhé
Xóak có gì tuyệt vời bằng mỗi sáng ghé thăm blog " Bá Long IT "
Trả lờiXóaXạo lìn :v
Xóađẹp :v
Trả lờiXóathank
Xóaqa tương tác tý
Trả lờiXóatemp đẹp
thank em :v
XóaTemp gọn gàng đẹp ghê hả :)
Trả lờiXóaTHẬT LÒNG HÔNG DỌ ANH :D
XóaANH CÓ BAO GIỜ GIAN DỐI <3
XóaNhưng chưa tối ưu nên lag quá anh
Xóatemp nào anh xài cũng đẹp dị -.-
Trả lờiXóaquá khen :v
Xóalỗi cái ô tìm kiếm kìa anh -_- nhấn vô xong đơ nguyên cái menu luôn
Trả lờiXóatrên mobi hả em
Xóatrên pc á anh, nhấn ô search cái r tắt chả được
XóaOk để a xem thử
XóaTemplate đẹp nhỉ :v
Trả lờiXóacó đâu :v
XóaTemp gọn gàng
Trả lờiXóaThank anh
Xóaqa tt tý :v
Trả lờiXóaHihi
Xóangon :v
Trả lờiXóahello qua ghé thăm :v
Trả lờiXóahello em :v
XóaTemp a on ở mobile nhìn giống bị lỗi sao í :v
Xóabình thường đó em :v
Xóatest
Trả lờiXóaư ư liên kết hông ư ư
Trả lờiXóalink đi ư ư
XóaBuổi Chiều vui vẻ nha :v
Trả lờiXóasay quá e ưi :v
Xóaok
Trả lờiXóa