Tạo hộp liên hệ nhỏ gon trượt dọc theo website cực đẹp

Tạo hộp liên hệ nhỏ gon trượt dọc theo website cực đẹp

Tạo hộp liên hệ nhỏ gon trượt dọc theo website cực đẹp

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...
Lê Bá Long Tác giả:
Xuất bản: 7/12/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(&#39;support-box&#39;).style.display=&#39;none&#39;;' 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!!!
Tạo hộp liên hệ nhỏ gon trượt dọc theo website cực đẹp Tạo hộp liên hệ nhỏ gon trượt dọc theo website cực đẹp Lê Bá Long IT8.8stars based on9reviews 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...

Blogger Comments

Hiện tại có 46 nhận xét:

  1. " 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
    Cò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ả lờiXóa
  2. Nhìn thằng Nam bùn cười vãi chưởng :v

    Trả lờiXóa
  3. k có gì tuyệt vời bằng mỗi sáng ghé thăm blog " Bá Long IT "

    Trả lờiXóa
  4. [img]https://i.imgur.com/Oif5evH.png[/img]
    Theme lỗi popup menu ở đầu trang

    Trả lờiXóa
  5. temp nào anh xài cũng đẹp dị -.-

    Trả lờiXóa
  6. lỗi cái ô tìm kiếm kìa anh -_- nhấn vô xong đơ nguyên cái menu luôn

    Trả lờiXóa
  7. http://www.namhacker.com/
    Đổi hộ e cái liên kết

    Trả lờiXóa
  8. share template bacsiwindows đang sử dụng
    demo https://myclass.anhbiachat.net/ ^^

    Trả lờiXóa