BLOGS, CSS, WORDPRESS

[TIỆN ÍCH] Tất cả tiện ích phone,zalo,fb cho WordPress

Posted on by administrator
18
Mar

Mình hay làm mấy site để quảng cáo nên việc add các tiện ích phone & zalo suốt nên coppy code ra cho anh em cần coppy/pate cho nhanh đỡ phải loay hoay mất thời gian.

HTML

<div class="fixhotline">

<a class="foneicon" href="tel:0903647017">
<img src="https://taxitaithanhhungsaigon24h.com/wp-content/uploads/2021/03/phone-chat-icon.png" width="100">
</a>
<a href="https://zalo.me/0903647017" target="_blank">
<img src="https://taxitaithanhhungsaigon24h.com/wp-content/uploads/2021/03/zalo-chat-icon.png" width="100">
</a>
</div>

CSS

.fixhotline {
    position: fixed;
    right: 0px;
    bottom: 30%;
}
.foneicon {
    position: fixed;
    bottom: 45%;
}

IMG

DEMO

LINK: https://taxitaithanhhungsaigon24h.com/

TIPS

<a href="https://zalo.me/0978093723" target="_blank" style="position: fixed;right: 0px;bottom: 30%;z-index: 99;">
<img src="https://nguyenson.info/wp-content/uploads/2021/03/zalo-chat-icon.png" width="100">
</a>

Dành cho anh em nào lười quá thì coppy/pate code ăn sẵn này nhớ thay số điện thoại là ok nhé

Form mới rất đẹp css

/ZALO/
.thongtinzalo{position:fixed; bottom:200px; right:0px; z-index:999999;}
/HOTLINE/
.back-to-top{bottom:150px;}
.thongtinlienhe .taibanggia,.thongtinlienhe .ttholine {position:fixed; right:10px; z-index:999999;}
.thongtinlienhe .taibanggia img{width:20px; margin-right:20px;}
.thongtinlienhe .taibanggia{background: #fff;
opacity: 1;
border: 1px solid #FF3333;
padding: 5px 20px;
border-radius: 7px;
bottom: 70px;
width: 175px;
text-transform: uppercase;
font-size: 13px;
font-weight: bold;
color: #ff3333;
cursor: pointer;}
.thongtinlienhe .taibanggia:hover{background:#ff3333; opacity:0.9; color:#fff;}
.thongtinlienhe .ttholine img{width:30px; margin-right:10px;}
.thongtinlienhe .ttholine{background:#FF3333; padding:8px 10px 8px 20px; border-radius:7px; bottom:10px; width: 175px; color:#fff;font-size: 16px;font-weight: bold; font-size:16px;}
.thongtinlienhe .ttholine:hover{background:#2CB23B;}

HTML

<div class="thongtinzalo">
	<a href="https://zalo.me/0327102102 "><img src="https://nguyenson.info/wp-content/uploads/2022/06/icon-zalo.png" width="80" /></a>
</div>
<div class="thongtinlienhe">
	<a class="taibanggia"  href="tel:0327102102"><img src="https://nguyenson.info/wp-content/uploads/2022/06/pdficon.png"/>Nhận báo giá </a>
	<a class="ttholine" href="tel:0327102102"><img src="https://nguyenson.info/wp-content/uploads/2022/06/iconphone.png"/><span>0327.102.102</span>
	</a>
</div>
administrator