Cách thêm icon Zalo chat vào trang web miễn phí

Thêm icon Zalo, Facebook chat vào trong trang web của mình miễn phí

Chắc hẳn là ai cũng muốn tạo 1 trang web miễn phí, kèm vào đó là những tính năng tiện ích như: có cái biểu tượng xinh xinh của zalo cái xong rồi người ta bấm vào là gửi tin nhắn được ngay, hay facebook rồi nút gọi điện nhấp nha nhấp nháy.

Việc này thật đơn giản cho dù là bạn biết hay không biết lập trình web (nói nhỏ là mình cũng đi tìm hiểu thôi chứ mình không biết lập trình web đâu nha).

Bước 1:

- Bạn mở trang quản trị lên

- Chọn đúng trang blog mà bạn muốn sửa ở đây minh chọn trang: "Kỹ sư cơ khí đường ống, bồn áp lực, thiết kế thi công" - Quảng cáo trá hình.
- Vào phần Chủ đề
- Chọn mũi tên xổ xuống trong mục tùy chỉnh.
- Chọn chỉnh sửa HTML.

Bước 2:

Trang chỉnh sửa HTML xuất hiện như hình dưới

Tại đây bạn chú ý thẻ đóng body có dạng </body>, giờ chúng ta sẽ copy dòng mã code sau và dán vào bên trên chữ </body> này.

<style>
.photheme-mobile-contact-bar{
display:none
}
.photheme-pc-contact-bar{
left: 30px;
bottom: 30px;
position: fixed;
z-index: 998;
margin-bottom:0
}
.photheme-pc-contact-bar li{
width: 44px;
height: 46px;
overflow: hidden;
margin-bottom: 0;
list-style: none;
}
.photheme-pc-contact-bar li.facebook{
margin-bottom: 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXmiE0e6UJhCYM7sZ03HVXdNCaEHtlXcGxwJq9-PJCAXnaI-RhgM6tNmg7PTaZpHRrWJ8V5VzSxX6mUWud5xMZCdkEGA9jPjC_LCGfMtvAg3yyQvgQG0Q7pmToYhEzBvs3lRy6zyPzGfbL/s44/fb.png);
background-repeat: no-repeat;
}
.photheme-pc-contact-bar li.zalo{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc22wZpKLN1-QJPwYqjgS9OKOkMtyBUuRGk1YgmDsu35tYa_bzdFlz-2tigzV2lE6XUcOPfOOyBeAKlugCtts-B25lW1wGtPxfDZcCpFu8mLp0qNmbmXpnuz_sTeXDmzIsrbnbNym2Y1n2/s0/zl.png); background-repeat: no-repeat;
}
.photheme-pc-contact-bar li a{
display: block;
width: 44px;
height: 44px;
}

@media only screen and (max-width: 499px) {
.photheme-pc-contact-bar{
display:none
}
.photheme-mobile-contact-bar{
left: 10px;
bottom: 10px;
position: fixed;
z-index: 998;
margin-bottom:0;
display:block !Important
}
.photheme-mobile-contact-bar li{
display:inline-block;
float:left;
margin-right:7px;
list-style:none
}
.photheme-mobile-contact-bar li.facebook{
margin-bottom: 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXmiE0e6UJhCYM7sZ03HVXdNCaEHtlXcGxwJq9-PJCAXnaI-RhgM6tNmg7PTaZpHRrWJ8V5VzSxX6mUWud5xMZCdkEGA9jPjC_LCGfMtvAg3yyQvgQG0Q7pmToYhEzBvs3lRy6zyPzGfbL/s44/fb.png);
background-repeat: no-repeat;
}
.photheme-mobile-contact-bar li.zalo{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc22wZpKLN1-QJPwYqjgS9OKOkMtyBUuRGk1YgmDsu35tYa_bzdFlz-2tigzV2lE6XUcOPfOOyBeAKlugCtts-B25lW1wGtPxfDZcCpFu8mLp0qNmbmXpnuz_sTeXDmzIsrbnbNym2Y1n2/s0/zl.png); background-repeat: no-repeat;
}
.photheme-mobile-contact-bar li a{
display: block;
width: 44px;
height: 44px;}
.photheme-mobile-contact-bar li.hotline {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCHXHzslo9KpuKrFf6TZvcEIL0_7VgyHLa-EmHX65mpIzSg8R0t_D4ydOsd8JPcF472STTgfu5OaCckeVt68bxkt6LJhE_SWUrntTAmwpxwYoafLFdVZAThJDGCYqdODu_gzWuP4uKh-lM/s250/p2.gif);
background-repeat: no-repeat;
background-size: 44px;
}
}

</style>
<ul class='photheme-pc-contact-bar'>
<li class='facebook'>
<a href='https://m.me/hungpham.name.vn/' rel='nofollow' target='_blank'/>
</li>
<li class='zalo'>
<a href='https://zalo.me/090946350' rel='nofollow' target='_blank'/>
</li>
</ul>

<ul class='photheme-mobile-contact-bar'>
<li class='facebook'>
<a href='https://m.me/hungpham.name.vn/' rel='nofollow' target='_blank'/>
</li>
<li class='zalo'>
<a href='https://zalo.me/090946350' rel='nofollow' target='_blank'/>
</li>
<li class='hotline'>
<a href='tel:097878581' rel='nofollow' target='_blank'/>
</li>
</ul>

- Thay các dòng màu đỏ bằng đường dẫn của bạn bằng cách:

Lưu ý là trong này có 2 phần dành cho PC và mobile (điện thoại) nên bạn phải thay 2 chỗ luôn nha.
-> Với Facebook bạn vào trang cá nhân của mình trên máy tính sẽ thấy có đường link như sau: https://www.facebook.com/hungpham.name.vn/ -> bạn copy dòng chữ sau dấu gạch chéo chỗ .com - cụ thể ở đây sẽ copy dòng hungpham.name.vn/ và dán vào chỗ màu đỏ ở trên.
-> Với Zalo và Hotline thì bạn chỉ cần thêm số điện thoại của bạn ở phần tô màu đỏ là ok.

Bước 3:

Là xong rồi chứ còn bước nào nữa, hãy lưu lại vài tận hưởng thành quả thôi nào. À nút lưu bên góc phải trên cùng đấy nha bạn.
Ngoài ra bạn có thể dùng cách chèn HTML vào trong phần Plugin/tiện ích của blogpost, nhưng hơi khó sử dụng và không đẹp bằng cách trên.

Hy vọng bài viết có thể hữu dụng cho bạn.

Xin cảm ơn.