Tìm theo từ khóa
Generic filters
Exact matches only
Nút liên hệ website

Code nút liên hệ

Aiken Trung Leave a comment 3650 Views Xem & chỉnh code online


Code nút liên hệ rung lắc cho các bạn tham khảo nhé

Cod nút liên hệ

Code

Bước 1: Khai báo sử dụng thư viện font và animation

<!-- Codfe.com B1: Khai báo -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Khai báo các biến toàn cục: số phone (vui lòng đổi thành số phone của bạn trong bước này), màu sắc, url …

//thay bằng số phone của bạn 
$phone = '0901234567'; 
$facebook_url ='https://www.facebook.com/codfe.net'; 
$color_button = '#fb1d25'; 
$alo_circle_border_color = '#bcd601'; 
$alo_circle_fill_color = '#3daa2d'; 
// thay bằng right nếu muốn canh lề phải
$padding_button = 'left';

Bước 2: Code HTML các nút Hotline

<!-- Codfe.com B2: Code HTML các nút hotline -->
<div class="social-button">
	<div class="social-button-content">
		<a href="tel:<?php echo $phone;?>" class="call-icon" rel="nofollow"> <i class="fa fa-whatsapp" aria-hidden="true"></i>
		<div class="animated alo-circle">
		</div>
		<div class="animated alo-circle-fill ">
		</div>
		<span>Hotline: <?php echo $phone;?>
		</span></a><a href="sms:<?php echo $phone; ?>" class="sms"> <i class="fa fa-weixin" aria-hidden="true"></i><span>SMS: <?php echo $phone;?>
		</span></a><a href="<?php echo $facebook_url; ?>" class="mes"> <i class="fa fa-facebook-square" aria-hidden="true"></i><span>Nhắn tin Facebook</span></a><a href="http://zalo.me/<?php echo $phone;?>" class="zalo"> <i class="fa fa-commenting-o" aria-hidden="true"></i><span>Zalo: <?php echo $phone;?>
		</span></a>
	</div>
	<a href="#" class="call-icon fancybox baogia" id="baogia2" rel="nofollow"><i class="fa fa-download" aria-hidden="true"></i>
	<div class="animated alo-circle">
	</div>
	<div class="animated alo-circle-fill ">
	</div>
	<span>Yêu cầu báo giá!</span></a>
</div>

B3: CSS cho các nút

<!-- Codfe.com B3: CSS cho các nút -->
<style>.social-button {
	display:inline-grid;
	position:fixed;
	bottom:15px;
	<?php echo $padding_button;
	?>:45px;
	min-width:45px;
	text-align:center;
	z-index:99999;
	color:#fff0;
}
.social-button-content {
	display:inline-grid;
}
.social-button a {
	padding:8px 0;
	cursor:pointer;
	position:relative;
}
.social-button i {
	width:40px;
	height:40px;
	background:<?php echo $color_button;
	?>;
	color:#fff;
	border-radius:100%;
	font-size:20px;
	text-align:center;
	line-height:1.9;
	position:relative;
	z-index:999;
}
.social-button span {
	display:none;
}
.alo-circle {
	animation-iteration-count:infinite;
	animation-duration:1s;
	animation-fill-mode:both;
	animation-name:zoomIn;
	width:50px;
	height:50px;
	top:3px;
	right:-3px;
	position:absolute;
	background-color:transparent;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	border-radius:100%;
	border:2px solid rgba(30,30,30,0.4);
	opacity:.1;
	border-color:<?php echo $alo_circle_border_color;
	?>;
	opacity:.5;
}
.alo-circle-fill {
	animation-iteration-count:infinite;
	animation-duration:1s;
	animation-fill-mode:both;
	animation-name:pulse;
	width:60px;
	height:60px;
	top:-2px;
	right:-8px;
	position:absolute;
	-webkit-transition:all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-ms-transition:all 0.2s ease-in-out;
	-o-transition:all 0.2s ease-in-out;
	transition:all 0.2s ease-in-out;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	border-radius:100%;
	border:2px solid transparent;
	background-color:<?php echo $alo_circle_fill_color;
	?>;
	opacity:.75;
}
.call-icon:hover>span,.mes:hover>span,.sms:hover>span,.zalo:hover>span {
	display:block
}
.social-button a span {
	border-radius:2px;
	text-align:center;
	background:rgb(103,182,52);
	padding:9px;
	display:none;
	width:180px;
	margin-left:10px;
	position:absolute;
	color:#ffffff;
	z-index:999;
	top:9px;
	<?php echo $padding_button;
	?>:40px;
	transition:all 0.2s ease-in-out 0s;
	-moz-animation:headerAnimation 0.7s 1;
	-webkit-animation:headerAnimation 0.7s 1;
	-o-animation:headerAnimation 0.7s 1;
	animation:headerAnimation 0.7s 1;
}
@-webkit-keyframes "headerAnimation" {
	0% {
		margin-top:-70px;
	}
	100% {
		margin-top:0;
	}
}
@keyframes "headerAnimation" {
	0% {
		margin-top:-70px;
	}
	100% {
		margin-top:0;
	}
}
.social-button a span:before {
	content:"";
	width:0;
	height:0;
	border-style:solid;
	border-width:10px 10px 10px 0;
	border-color:transparent rgb(103,182,52) transparent transparent;
	position:absolute;
	<?php echo $padding_button;
	?>:-10px;
	top: 10px;
}
</style>

B4: Script

$(document).ready(function(){$('.user-support').click(function(event) {$('.social-button-content').slideToggle();});});
Code nút liên hệ thêm vào function.php

Sau đây mình đạ đưa đoạn code nút liên hệ vào 1 hàm khai báo các biến trong function, hook nó vào header của theme, các bạn tha khảo nhé

//codfe.com hàm tạo lien hệ cho website thay thế các thông số cho phù hợp
function codfe_contact_button() { 
        //thay bằng số phone của bạn
	$phone = '0901234567';
	$facebook_url ='https://www.facebook.com/codfe.net';
	$color_button = '#fb1d25';
	$alo_circle_border_color = '#bcd601';
	$alo_circle_fill_color = '#3daa2d';
	$padding_button = 'left';
?>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

	<div class="social-button">
		<div class="social-button-content">
		   <a href="tel:<?php echo $phone;?>" class="call-icon" rel="nofollow">
			  <i class="fa fa-whatsapp" aria-hidden="true"></i>
			  <div class="animated alo-circle"></div>
			  <div class="animated alo-circle-fill  "></div>
			   <span>Hotline: <?php echo $phone;?></span>
			</a>
			<a href="sms:<?php echo $phone; ?>" class="sms">
			  <i class="fa fa-weixin" aria-hidden="true"></i>
			  <span>SMS: <?php echo $phone;?></span>
			</a>
			<a href="<?php echo $facebook_url; ?>" class="mes">
			  <i class="fa fa-facebook-square" aria-hidden="true"></i>
			  <span>Nhắn tin Facebook</span>
			</a>
			<a href="http://zalo.me/<?php echo $phone;?>" class="zalo">
			  <i class="fa fa-commenting-o" aria-hidden="true"></i>
			  <span>Zalo: <?php echo $phone;?></span>
			</a>
		</div>

		<a href="#" class="call-icon fancybox baogia" id="baogia2" rel="nofollow"><i class="fa fa-download" aria-hidden="true"></i>
		<div class="animated alo-circle">
		</div>
		<div class="animated alo-circle-fill ">
		</div>
		<span>Yêu cầu báo giá!</span></a>
	  </div>


	  <style>
		.social-button{
		  display: inline-grid;
			position: fixed;
			bottom: 15px;
			<?php echo $padding_button; ?>: 45px;
			min-width: 45px;
			text-align: center;
			z-index: 99999;
			  color: #fff0;
		}
		.social-button-content{
		  display: inline-grid;   
		}
		.social-button a {padding:8px 0;cursor: pointer;position: relative;}
		.social-button i{
		  width: 40px;
			height: 40px;
			background: <?php echo $color_button; ?>;
			color: #fff;
			border-radius: 100%;
			font-size: 20px;
			text-align: center;
			line-height: 1.9;
			position: relative;
			z-index: 999;
		}
		.social-button span{
		  display: none;
		}
		.alo-circle {
			animation-iteration-count: infinite;
			animation-duration: 1s;
			animation-fill-mode: both;
			animation-name: zoomIn;
			width: 50px;
			height: 50px;
			top: 3px;
			right: -3px;
			position: absolute;
			background-color: transparent;
			-webkit-border-radius: 100%;
			-moz-border-radius: 100%;
			border-radius: 100%;
			border: 2px solid rgba(30, 30, 30, 0.4);
			opacity: .1;
			border-color: <?php echo $alo_circle_border_color; ?>;
			opacity: .5;
		}
		.alo-circle-fill {
		  animation-iteration-count: infinite;
		  animation-duration: 1s;
		  animation-fill-mode: both;
		  animation-name: pulse;
			width: 60px;
			height: 60px;
			top: -2px;
			right: -8px;
			position: absolute;
			-webkit-transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-ms-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
			-webkit-border-radius: 100%;
			-moz-border-radius: 100%;
			border-radius: 100%;
			border: 2px solid transparent;
			background-color: <?php echo $alo_circle_fill_color;?>;
			opacity: .75;
		}
		.call-icon:hover > span, .mes:hover > span, .sms:hover > span, .zalo:hover > span{display: block}
		.social-button a span {
			border-radius: 2px;
			text-align: center;
			background: rgb(103, 182, 52);
			padding: 9px;
			display: none;
			width: 180px;
			margin-left: 10px;
			position: absolute;
			color: #ffffff;
			z-index: 999;
			top: 9px;
			<?php echo $padding_button; ?>: 40px;
			transition: all 0.2s ease-in-out 0s;
			-moz-animation: headerAnimation 0.7s 1;
			-webkit-animation: headerAnimation 0.7s 1;
			-o-animation: headerAnimation 0.7s 1;
			animation: headerAnimation 0.7s 1;
		}
		@-webkit-keyframes "headerAnimation" {
			0% { margin-top: -70px; }
			100% { margin-top: 0; }
		}
		@keyframes "headerAnimation" {
			0% { margin-top: -70px; }
			100% { margin-top: 0; }
		}
		.social-button a span:before {
		  content: "";
		  width: 0;
		  height: 0;
		  border-style: solid;
		  border-width: 10px 10px 10px 0;
		  border-color: transparent rgb(103, 182, 52) transparent transparent;
		  position: absolute;
		  <?php echo $padding_button; ?>: -10px;
		  top: 10px;
		}
	  </style>
	
<?php 
}

// codfe.com hook vào header của theme tại g5plus_before_page_wrapper, tùy theme mà bạn chọn hòm hook  cho đúng nhé
add_action( 'g5plus_before_page_wrapper', 'codfe_contact_button', 999 );
5/5 - (1 bình chọn)
Bài viết mới:

Bài viết cùng chủ đề:

Aiken Trung

Hệ thống, đúc kết lại những gì mình học và làm rồi chia sẻ

0 0 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest
2 Góp ý
Mới nhất
Cũ nhất Được bỏ phiếu nhiều nhất
Anh
Anh
5 năm trước

JS không xử lý được rung lắc ạ

0
Trả lời
Aiken Trung
Aiken Trung
Tác giả
Trả lời  Anh
5 năm trước

Cái này chỉ nhá nhá lên chứ không có rung lắc nhé! mình bị nhầm

0
Trả lời
Bạn phải là thành viên mới có thể lưu code! Đăng ký thành viên



    Vui lòng nhập email để nhận code!

      0
      Rất thích suy nghĩ của bạn, hãy bình luận.x