Tiện ích cố định liên hệ dưới chân trang cho blogspot
Cập nhật ngày
Bởi admin
, 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 {
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
<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>
Chúc bạn thành công !
Đăng nhận xét