Áp dụng cho user mới

Áp dụng với user mới

Mã nguyenthaimmo

Áp dụng cho user mới

Mã Nguyenthaimmo

Nghiên cứu từ khoá

Áp dụng cho user mới

Code nút liên hệ website wordpress phần 3

Với việc chúng ta cái 1 plugin sẽ rất tiện lợi nhưng nó sẽ không cho các bạn custom trên cái mãu sẵn đó ! nhìn nó không đẹp nên mình thấy code HTML và Css vào cho lẹ mà nhẹ hơn plugin 1 xíu thôi !

Trước tiên các bạn cài Plugin này của việt nam nhưng nó có đầy đủ tính năng bạn cần mà không cần code nhiều wp-extra nó sẽ giúp bạn chèn mã vào Footer Scripts và css nhanh chóng

Code Nút Liên Hệ Website WordPress

Code liên hệ mẫu 1

Code Nút Liên Hệ Website WordPress Phần 3

<div class="lienhe-top">

<div class="contact">
	<a href="Link chèn vô fb" target="_blank" title="Facebook" class="fb">
		<svg class="flex" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"> <path d="M18.0015 3.00293C9.71849 3.00293 3.00299 9.71843 3.00299 18.0014C3.00299 25.4864 8.48699 31.6904 15.6585 32.8199V22.3379H11.8485V18.0014H15.6585V14.6969C15.6585 10.9349 17.898 8.86043 21.3225 8.86043C22.9635 8.86043 24.6825 9.15293 24.6825 9.15293V12.8414H22.7865C20.9265 12.8414 20.3445 13.9994 20.3445 15.1859V17.9984H24.501L23.8365 22.3349H20.3445V32.8169C27.516 31.6934 33 25.4879 33 18.0014C33 9.71843 26.2845 3.00293 18.0015 3.00293Z" fill="#333333"></path> </svg>
	</a>
	<a href="Link chèn vô fb" target="_blank" title="Messenger" class="mess">
		<svg class="flex" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="36" height="36" x="0" y="0" viewBox="0 0 100 100" style="enable-background:new 0 0 512 512" xml:space="preserve"> <g> <g xmlns="http://www.w3.org/2000/svg" id="_x33_4.Messenger"> <path id="Icon_78_" d="m50 10c-22.1 0-40 16.6-40 37.1 0 11.7 5.8 22.1 14.9 28.9l.2 13c0 .7.8 1.1 1.4.8l12.5-7c3.5.9 7.2 1.4 11.1 1.4 22.1 0 40-16.6 40-37.1s-18.1-37.1-40.1-37.1zm2.9 49.2-8.5-8.9c-.5-.5-1.3-.6-1.9-.3l-15 8.1c-.6.3-1.1-.4-.7-.9l17.7-18.8c.5-.5 1.4-.5 1.9 0l8.5 9.1c.5.5 1.3.7 1.9.3l14.7-8c.6-.3 1.1.4.7.9l-17.4 18.5c-.5.5-1.4.5-1.9 0z" fill="#333333" data-original="#333333" class=""></path> </g> </g> </svg>
	</a>
	<a href="Link chèn vô fb" target="_blank" title="Telegram" class="tele">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="35px" height="35px"><path d="M25,2c12.703,0,23,10.297,23,23S37.703,48,25,48S2,37.703,2,25S12.297,2,25,2z M32.934,34.375c0.423-1.298,2.405-14.234,2.65-16.783c0.074-0.772-0.17-1.285-0.648-1.514c-0.578-0.278-1.434-0.139-2.427,0.219c-1.362,0.491-18.774,7.884-19.78,8.312c-0.954,0.405-1.856,0.847-1.856,1.487c0,0.45,0.267,0.703,1.003,0.966c0.766,0.273,2.695,0.858,3.834,1.172c1.097,0.303,2.346,0.04,3.046-0.395c0.742-0.461,9.305-6.191,9.92-6.693c0.614-0.502,1.104,0.141,0.602,0.644c-0.502,0.502-6.38,6.207-7.155,6.997c-0.941,0.959-0.273,1.953,0.358,2.351c0.721,0.454,5.906,3.932,6.687,4.49c0.781,0.558,1.573,0.811,2.298,0.811C32.191,36.439,32.573,35.484,32.934,34.375z"></path></svg>
	</a>
	<a href="Link chèn vô fb" target="_blank" title="Zalo" class="zalo">
		<svg width="35" height="35" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"> <path d="M 9 4 C 6.2504839 4 4 6.2504839 4 9 L 4 41 C 4 43.749516 6.2504839 46 9 46 L 41 46 C 43.749516 46 46 43.749516 46 41 L 46 9 C 46 6.2504839 43.749516 4 41 4 L 9 4 z M 9 6 L 15.580078 6 C 12.00899 9.7156859 10 14.518083 10 19.5 C 10 24.66 12.110156 29.599844 15.910156 33.339844 C 16.030156 33.549844 16.129922 34.579531 15.669922 35.769531 C 15.379922 36.519531 14.799687 37.499141 13.679688 37.869141 C 13.249688 38.009141 12.97 38.430859 13 38.880859 C 13.03 39.330859 13.360781 39.710781 13.800781 39.800781 C 16.670781 40.370781 18.529297 39.510078 20.029297 38.830078 C 21.379297 38.210078 22.270625 37.789609 23.640625 38.349609 C 26.440625 39.439609 29.42 40 32.5 40 C 36.593685 40 40.531459 39.000731 44 37.113281 L 44 41 C 44 42.668484 42.668484 44 41 44 L 9 44 C 7.3315161 44 6 42.668484 6 41 L 6 9 C 6 7.3315161 7.3315161 6 9 6 z M 33 15 C 33.55 15 34 15.45 34 16 L 34 25 C 34 25.55 33.55 26 33 26 C 32.45 26 32 25.55 32 25 L 32 16 C 32 15.45 32.45 15 33 15 z M 18 16 L 23 16 C 23.36 16 23.700859 16.199531 23.880859 16.519531 C 24.050859 16.829531 24.039609 17.219297 23.849609 17.529297 L 19.800781 24 L 23 24 C 23.55 24 24 24.45 24 25 C 24 25.55 23.55 26 23 26 L 18 26 C 17.64 26 17.299141 25.800469 17.119141 25.480469 C 16.949141 25.170469 16.960391 24.780703 17.150391 24.470703 L 21.199219 18 L 18 18 C 17.45 18 17 17.55 17 17 C 17 16.45 17.45 16 18 16 z M 27.5 19 C 28.11 19 28.679453 19.169219 29.189453 19.449219 C 29.369453 19.189219 29.65 19 30 19 C 30.55 19 31 19.45 31 20 L 31 25 C 31 25.55 30.55 26 30 26 C 29.65 26 29.369453 25.810781 29.189453 25.550781 C 28.679453 25.830781 28.11 26 27.5 26 C 25.57 26 24 24.43 24 22.5 C 24 20.57 25.57 19 27.5 19 z M 38.5 19 C 40.43 19 42 20.57 42 22.5 C 42 24.43 40.43 26 38.5 26 C 36.57 26 35 24.43 35 22.5 C 35 20.57 36.57 19 38.5 19 z M 27.5 21 C 27.39625 21 27.29502 21.011309 27.197266 21.03125 C 27.001758 21.071133 26.819727 21.148164 26.660156 21.255859 C 26.500586 21.363555 26.363555 21.500586 26.255859 21.660156 C 26.148164 21.819727 26.071133 22.001758 26.03125 22.197266 C 26.011309 22.29502 26 22.39625 26 22.5 C 26 22.60375 26.011309 22.70498 26.03125 22.802734 C 26.051191 22.900488 26.079297 22.994219 26.117188 23.083984 C 26.155078 23.17375 26.202012 23.260059 26.255859 23.339844 C 26.309707 23.419629 26.371641 23.492734 26.439453 23.560547 C 26.507266 23.628359 26.580371 23.690293 26.660156 23.744141 C 26.819727 23.851836 27.001758 23.928867 27.197266 23.96875 C 27.29502 23.988691 27.39625 24 27.5 24 C 27.60375 24 27.70498 23.988691 27.802734 23.96875 C 28.487012 23.82916 29 23.22625 29 22.5 C 29 21.67 28.33 21 27.5 21 z M 38.5 21 C 38.39625 21 38.29502 21.011309 38.197266 21.03125 C 38.099512 21.051191 38.005781 21.079297 37.916016 21.117188 C 37.82625 21.155078 37.739941 21.202012 37.660156 21.255859 C 37.580371 21.309707 37.507266 21.371641 37.439453 21.439453 C 37.303828 21.575078 37.192969 21.736484 37.117188 21.916016 C 37.079297 22.005781 37.051191 22.099512 37.03125 22.197266 C 37.011309 22.29502 37 22.39625 37 22.5 C 37 22.60375 37.011309 22.70498 37.03125 22.802734 C 37.051191 22.900488 37.079297 22.994219 37.117188 23.083984 C 37.155078 23.17375 37.202012 23.260059 37.255859 23.339844 C 37.309707 23.419629 37.371641 23.492734 37.439453 23.560547 C 37.507266 23.628359 37.580371 23.690293 37.660156 23.744141 C 37.739941 23.797988 37.82625 23.844922 37.916016 23.882812 C 38.005781 23.920703 38.099512 23.948809 38.197266 23.96875 C 38.29502 23.988691 38.39625 24 38.5 24 C 38.60375 24 38.70498 23.988691 38.802734 23.96875 C 39.487012 23.82916 40 23.22625 40 22.5 C 40 21.67 39.33 21 38.5 21 z"></path> </svg>
	</a>
</div>
<a href="#" class="go-to-top top-lienhe"><svg viewBox="64 64 896 896" focusable="false" data-icon="vertical-align-top" width="20px" height="20px" fill="#fff" aria-hidden="true"> <path d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"> </path> </svg></a>
<style>
.lienhe-top {
    position: fixed;
    top: 50%;
    right: 5px;
    z-index: 9;
}

.contact {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 10px;
    border-radius: 50px;
    box-shadow: 0px 0px 3px #273647;
}
a.go-to-top.top-lienhe {
    margin-top: 10px;
    background: #273647;
    padding: 18px;
    border-radius: 50px;
    /* box-shadow: 0px 0px 3px #273647; */
    display: flex;
    position: fixed;
}
</style>

</a>

</a>

</a>

</a>

</div>

<style>

.lienhe-top {

position: fixed;

top: 50%;

right: 5px;

z-index: 9;

}

.contact {

display: flex;

flex-direction: column;

background: #fff;

padding: 10px;

border-radius: 50px;

box-shadow: 0px 0px 3px #273647;

}

a.go-to-top.top-lienhe {

margin-top: 10px;

background: #273647;

padding: 18px;

border-radius: 50px;

/* box-shadow: 0px 0px 3px #273647; */

display: flex;

position: fixed;

}

</style>

Bạn thay link liên hệ của mình vào là được nhé !

Xem thêm

Mẫu code liên hệ mẫu 2

Code Nút Liên Hệ Website WordPress Phần 3

<div id="tem-sup-quick">
  <div class="tem-sup-btn">Trung tâm<br>Hỗ trợ</div>
  <i id="icon-arr" class="fas fa-hand-point-left"></i>
  <div class="tem-sup-option">  
    <a class="ticket-option">
    <span>Yêu cầu mở website</span>
    </a>
    <a href="Link facebook" class="fb-option" target="_blank">Chat Facebook</a>
    <a href="tel:0980000000" class="call-option">Gọi ngay</a>
  </div>
</div>
 <script>
jQuery(document).ready(function(){
  jQuery('.tem-sup-option').hide();
  jQuery('.tem-sup-btn').click(function(){
    jQuery('.tem-sup-option').toggle();
  });
  jQuery(".ticket-option").click(function(e){
    e.stopPropagation();
  });
  jQuery(".tem-sup-btn").click(function(e){
    e.stopPropagation();
  });
  jQuery(document).click(function(){
    jQuery(".tem-sup-option").hide();
  });
});
    </script>
<style>
#tem-sup-quick{
  display: flex;
  flex-direction: column;
  background-color: #fff;
  position: fixed;
  width: 66px;
  height: auto!important;
  left: 0;
  bottom: 20px;
  z-index: 998;
  border: solid 1px #e3e3e3;
  border-radius: 5px;
  border-top-right-radius: 0px;
  font-size: 12px;
  box-shadow: 2px 2px 2px #ccc;
  text-align: center;
  color: #333;
}
.tem-sup-btn{
    padding: 10px 0;
    font-weight: bold;
    cursor: move;
    line-height: 1.3em;
    color: #333;
}
.tem-sup-option{
  padding: 0;
  background:#fff;
}
.tem-sup-option a{
  display: block;
  padding: 55px 0 7px 0;
  color: #333;
  font-size: 11px;
  line-height: 1;
}
.tem-sup-option a.fb-option{background: url(https://tuongads.com/wp-content/uploads/2019/12/c.png) no-repeat center 5px;}
.tem-sup-option a.fb-option:hover{background: url(https://tuongads.com/wp-content/uploads/2019/12/c.png) no-repeat center 5px #ccc;}

.tem-sup-option a.call-option{background: url(https://tuongads.com/wp-content/uploads/2019/12/b.png) no-repeat center 5px;}
.tem-sup-option a.call-option:hover{background: url(https://tuongads.com/wp-content/uploads/2019/12/b.png) no-repeat center 5px #ccc;}


.tem-sup-option a.ticket-option{background: url(https://tuongads.com/wp-content/uploads/2019/12/a.png) no-repeat center 5px;}
.tem-sup-option a.ticket-option:hover{background: url(https://tuongads.com/wp-content/uploads/2019/12/a.png) no-repeat center 5px #ccc;}

.ticket-option{
    position: relative;
    display: block;
    cursor: pointer;
}
.ticket-form-hid{
    position: absolute;
    max-width: 270px;
    width: 270px;
    height:auto;
    background: #fff;
    left: 0;
    margin-left: 80px;
    top: 0;
    box-shadow: 0 0 5px #ccc;
}
a.close-ticket{
    width: 25px;
    height: 25px;
    padding: 0;
    z-index: 1;
    background: #fff;
    position: absolute;
    top: -10px;
    right: -10px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
    box-shadow: 0 0 5px #ccc;
}
#icon-arr{
    width: 16px;
    cursor: pointer;
    height: 24px;
    line-height: 24px;
    background: #fff;
    color: #007bfc;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    position: absolute;  
    z-index: 1;
    margin-left: 64px;
    margin-top: -1px;
    border-top: solid 1px #e3e3e3;
    border-right: solid 1px #e3e3e3;
    border-bottom: solid 1px #e3e3e3;
    box-shadow: 1px 1px 1px #ccc;
}
</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

<div class="tem-sup-btn">Trung tâm<br>Hỗ trợ</div>

<span>Yêu cầu mở website</span>

</a>

<a href="Link facebook" class="fb-option" target="_blank">Chat Facebook</a>

</div>

jQuery(document).ready(function(){

jQuery('.tem-sup-option').hide();

jQuery('.tem-sup-btn').click(function(){

jQuery('.tem-sup-option').toggle();

});

jQuery(".ticket-option").click(function(e){

e.stopPropagation();

});

jQuery(".tem-sup-btn").click(function(e){

e.stopPropagation();

});

jQuery(document).click(function(){

jQuery(".tem-sup-option").hide();

});

</script>

<style>

#tem-sup-quick{

display: flex;

flex-direction: column;

background-color: #fff;

position: fixed;

width: 66px;

height: auto!important;

left: 0;

bottom: 20px;

z-index: 998;

border: solid 1px #e3e3e3;

border-radius: 5px;

border-top-right-radius: 0px;

font-size: 12px;

box-shadow: 2px 2px 2px #ccc;

text-align: center;

color: #333;

}

.tem-sup-btn{

padding: 10px 0;

font-weight: bold;

cursor: move;

line-height: 1.3em;

color: #333;

}

.tem-sup-option{

padding: 0;

background:#fff;

}

.tem-sup-option a{

display: block;

padding: 55px 0 7px 0;

color: #333;

font-size: 11px;

line-height: 1;

}

.tem-sup-option a.fb-option{background: url(https://tuongads.com/wp-content/uploads/2019/12/c.png) no-repeat center 5px;}

.tem-sup-option a.fb-option:hover{background: url(https://tuongads.com/wp-content/uploads/2019/12/c.png) no-repeat center 5px #ccc;}

.tem-sup-option a.call-option{background: url(https://tuongads.com/wp-content/uploads/2019/12/b.png) no-repeat center 5px;}

.tem-sup-option a.call-option:hover{background: url(https://tuongads.com/wp-content/uploads/2019/12/b.png) no-repeat center 5px #ccc;}

.tem-sup-option a.ticket-option{background: url(https://tuongads.com/wp-content/uploads/2019/12/a.png) no-repeat center 5px;}

.tem-sup-option a.ticket-option:hover{background: url(https://tuongads.com/wp-content/uploads/2019/12/a.png) no-repeat center 5px #ccc;}

.ticket-option{

position: relative;

display: block;

cursor: pointer;

}

.ticket-form-hid{

position: absolute;

max-width: 270px;

width: 270px;

height:auto;

background: #fff;

left: 0;

margin-left: 80px;

top: 0;

box-shadow: 0 0 5px #ccc;

}

a.close-ticket{

width: 25px;

height: 25px;

padding: 0;

z-index: 1;

background: #fff;

position: absolute;

top: -10px;

right: -10px;

border: 1px solid #e5e5e5;

border-radius: 50%;

text-align: center;

line-height: 25px;

cursor: pointer;

box-shadow: 0 0 5px #ccc;

}

#icon-arr{

width: 16px;

cursor: pointer;

height: 24px;

line-height: 24px;

background: #fff;

color: #007bfc;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

position: absolute;

z-index: 1;

margin-left: 64px;

margin-top: -1px;

border-top: solid 1px #e3e3e3;

border-right: solid 1px #e3e3e3;

border-bottom: solid 1px #e3e3e3;

box-shadow: 1px 1px 1px #ccc;

}

</style>

5/5 - (42 bình chọn)

Code nút liên hệ website wordpress phần 3

Code nút liên hệ website wordpress phần 3

Code nút liên hệ website wordpress phần 2

Các dạng tấn công mà hacker vào website WordPress

Code hiển thị hướng dẫn vào website làm theo từng bước

Code hiển thị chú thích khi hover chuột vào một thẻ class

Code nút liên hệ website wordpress phần 4

Cách tạo box khuyến mãi cho sản phẩm website

Về chúng tôi