Tiện ích cố định liên hệ dưới chân trang cho blogspot
TKB
14 min read
Cố định liên hệ dưới chân trang đơn giản và hiệu quả. Bạn ko cần code chỉ cần copy và điền thông tin cho từng mục đã có 1 thanh liên hệ cố định dưới chân trang đẹp mắt. Tất cả mã chèn dưới
, nhớ đổi thông tin như: sđt, zalo, messenger nha mấy thím
+ CSS
@media (min-width: 561px) {
.devvn_toolbar {
position: fixed;
bottom: 10px;
left: 10px;
z-index: 99999999;
}
.devvn_toolbar ul {
list-style: none;
margin: 0;
padding: 0;
}
.devvn_toolbar ul li {
padding: 0;
margin: 0;
list-style: none;
}
.devvn_toolbar ul li a {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
margin: 0 0 5px;
position: relative;
background-position: 50% 50%;
background-size: cover;
}
.devvn_toolbar ul li a br {
display: none;
}
.devvn_toolbar ul li a span {
font-weight: 400;
color: #ffffff;
position: absolute;
top: 50%;
left: calc(100% + 10px);
left: -webkit-calc(100% + 10px);
left: -moz-calc(100% + 10px);
margin-top: -12.5px;
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 0 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
}
.devvn_toolbar ul li a:hover span{
opacity: 1;
visibility: visible;
}
.devvn_toolbar ul li a span:after {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-right-color: #ffffff;
border-width: 5px;
margin-top: -5px;
}
.devvn_toolbar ul li a img {
width: auto;
height: auto;
max-width: 29px;
max-height: 29px;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
}
}
@media (max-width: 560px) {
body.has_devvn_toolbar {
padding-bottom: 50px;
}
.devvn_toolbar {
background: #fff;
display: inline-block;
width: 100%;
bottom: 0;
left: 0;
position: fixed;
z-index: 99999999;
height: auto;
padding: 0;
border-top: 0;
visibility: hidden;
opacity: 0;
transform: translate3d(0,120%,0);
-moz-transform: translate3d(0,120%,0);
-webkit-transform: translate3d(0,120%,0);
transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
.show_contactfix .devvn_toolbar {
transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
visibility: visible;
opacity: 1;
}
.devvn_toolbar ul {
list-style: none;
padding: 0;
margin: 0;
display: table;
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
.devvn_toolbar ul li {
text-align: center;
display: table-cell;
vertical-align: top;
}
.devvn_toolbar ul li a {
display: inline-block;
width: 100%;
outline: none;
text-decoration: none;
padding: 5px 3px;
}
.devvn_toolbar ul li a span {
font-weight: 400;
color: #ffffff;
font-size: 3.5vw;
}
.devvn_toolbar ul li a img {
height: 6vw;
width: auto;
}
.woocommerce-checkout .devvn_toolbar {
display: none !important;
}
}
+ CODE
<div class='devvn_toolbar'>
<ul>
<style>
.devvn_toolbar ul li a#devvn_contact_1 span:after {
Cố định liên hệ dưới chân trang đơn giản và hiệu quả. Bạn ko cần code chỉ cần copy và điền thông tin cho từng mục đã có 1 thanh liên hệ cố định dưới chân trang đẹp mắt.