Tiện ích cố định liên hệ dưới chân trang cho blogspot
Cập nhật ngày
Bởi admin
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.
@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;
}
}
<div class='devvn_toolbar'>
<ul>
<style>
.devvn_toolbar ul li a#devvn_contact_1 span:after {
border-right-color: #008000;
}
</style>
<li>
<a href='javascript:callme('tel:0974858395')' id='devvn_contact_1' style='background-color: #008000;' title='Gọi điện'>
<img alt='' class='attachment-full size-full' height='41' src='https://3.bp.blogspot.com/-dEFENdPkA_4/XfyCAwkAvsI/AAAAAAAAZ8s/x-mn0POI1-oDCVQRw1FyubcWhUx499YvwCLcBGAsYHQ/s1600/icon-t1-white.png' width='41'/>
<span style='color: #ffffff; background-color: #008000;'>Gọi điện</span>
</a>
</li>
<style>
.devvn_toolbar ul li a#devvn_contact_2 span:after {
border-right-color: #e60808;
}
</style>
<li>
<a href='javascript:callme('sms:0974858395')' id='devvn_contact_2' style='background-color: #e60808;' title='Nhắn tin'>
<img alt='' class='attachment-full size-full' height='48' src='https://2.bp.blogspot.com/-tn_FA0g7rTM/XfyB10EjxCI/AAAAAAAAZ8o/BY3xzMjKn2cNjZhFILvCdVqupxPExOizgCLcBGAsYHQ/s1600/icon-t2-white.png' width='56'/>
<span style='color: #ffffff; background-color: #e60808;'>Nhắn tin</span>
</a>
</li>
<style>
.devvn_toolbar ul li a#devvn_contact_3 span:after {
border-right-color: #008fe5;
}
</style>
<li>
<a href='javascript:callme('https://zalo.me/doannguyennet')' id='devvn_contact_3' style='background-color: #008fe5;' title='Chat zalo'>
<img alt='' class='attachment-full size-full' height='60' src='https://2.bp.blogspot.com/-jYPTPZkTSlI/XfyAausHCJI/AAAAAAAAZ8c/2RKRrUPYm7oV8Qb8Fg5Rw8G3wBDal8F3wCLcBGAsYHQ/s1600/zalo.png' width='60'/>
<span style='color: #ffffff; background-color: #008fe5;'>Chat zalo</span>
</a>
</li>
<style>
.devvn_toolbar ul li a#devvn_contact_4 span:after {
border-right-color: #3b5998;
}
</style>
<li>
<a href='javascript:callme('https://m.me/nguyenthanhdoanofficial')' id='devvn_contact_4' style='background-color: #3b5998;' title='Facebook'>
<img alt='' class='attachment-full size-full' height='50' src='https://3.bp.blogspot.com/-RJHxBsqj7GE/Xfx_iwiO8tI/AAAAAAAAZ8U/-0YuDZ5VD8kYDjbA5X8GeO334iEt_hZdwCLcBGAsYHQ/s1600/icon-t4-white.png' width='57'/>
<span style='color: #ffffff; background-color: #3b5998;'>Facebook</span>
</a>
</li>
</ul>
</div>
<script>
function callme(url){
window.location = url;
}
(function ($) {
$(document).ready(function () {
function dcf_scroll_element(){
$top = jQuery(window).scrollTop();
if( $top >= 50 && !($('body').hasClass('show_contactfix')) ){
$('body').addClass('show_contactfix');
}else if($top < 50 && $('body').hasClass('show_contactfix') ){
$('body').removeClass('show_contactfix');
}
}
dcf_scroll_element();
$(window).scroll(function(){
dcf_scroll_element();
});
});
})(jQuery);
</script>
Đăng nhận xét