Hướng dẫn tạo nút messenger fake với lời chào.

function mess_pttuan_custom(){;?>
<div class="mess-pt">
<div class="pop-up-mess">
	<div class="before-img">
	</div>
	<div class="cau-chao">
		<span>Bạn hãy donate cho tui chứ viết blog nghèo quá</span>
	</div>
</div>
<a class="messenger-custom" href="#link-mess-cua-ban">
	<i class="fab fa-facebook-messenger"></i>
</a>
</div>

<style>
	.mess-pt{
		position: fixed;
		bottom: 100px;
		right: 0;
	}
	.before-img{
		border: 3px solid #fff;
		border-radius: 50px;
		content: '';
		display: block;
		z-index: 99;
		position: absolute;
		width: 25px;
		height: 25px;
		right: 540px;
    	bottom: 60px;
		background: url(https://thebeautyofjones.com/wp-content/uploads/2021/01/close.png) center center no-repeat;
		background-size: 20px 20px;
		opacity: 1;
		cursor: pointer;
		-webkit-transition: -webkit-transform 0.5s, background-size 0.5s, opacity ease-in-out .25s;
		-moz-transition: -moz-transform 0.5s, background-size 0.5s, opacity ease-in-out .25s;
		-o-transition: -o-transform 0.5s, background-size 0.5s, opacity ease-in-out .25s;
		transition: transform 0.5s, background-size 0.5s, opacity ease-in-out .25s;
	}
	.messenger-custom{
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 20px;
		bottom: 20px;
		height: 70px;
		width: 70px;
		font-size: 30px;
		color: #0064f3;
		cursor: pointer;
		background-color: #fff;
		box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%);
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;
		-o-border-radius: 50%;
	}
	.cau-chao{
		margin: auto;
		width: 480px;
		position: absolute;
		right: 80px;
		bottom: 35px;
		padding: 5px 10px;
		height: 37px;
		font-size: 18px;
		border-radius: 7px;
		color: #0064f3;
		cursor: pointer;
		background-color: #fff;
		box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%);
	}
	.pop-up-mess{
		display:none;
	}
</style>

<script>
	jQuery(document).ready(function ($) {
		function show_mess(){
			$(".pop-up-mess").fadeIn("slow");
		}
		window.setTimeout( show_mess, 3000 );
		$(".before-img").on("click", function(e){
			$(".pop-up-mess").fadeOut('slow');
		});
	});
</script>
<?php }
add_action('wp_footer','mess_pttuan_custom');