اضافة كود عرض رمز الاتصال منبثق في مدونتك

السلام عليكم االيوم جلبت لكم اضافة جهة الاتصال في موقعك تظهر بطريقة جميلة وثلثة الاضافة ممكن تستخدمها كجهة اتصال او اعلان منبثق في موقعك

يتم عرض رمز الاتصال الخاص بـموقعك في منتصف يسار الشاشة تم تثبيت رمز الاتصال المنبثق في موقعك في منتصف يسار شاشة المتصفح ويظهر عند تمرير مؤشر الماوس فوقه، ولا يتم عرضه على الهواتف ذات الشاشات الصغيرة.

طريقة التركيب

قم بوضع الكود ادناه في أداة HTML/JavaScript وبذلك تكون قد انتهيت.

الكود

<style>
/* <![CDATA[ */

.flex {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex
}

.align-center {
	-webkit-align-items: center;
	align-items: center
}

.flex-align {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center
}

.flex-center {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	justify-content: center
}

.text-center {
	text-align: center
}

.w-50 {
	float: left;
	width: 50%
}

.zalo-icon:before,
.contact-icon:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 48px;
	height: 48px;
	background-position: center center;
	background-repeat: no-repeat
}

.zalo-icon:before {
	background-color: #018fe5;
	background-image: url("data:image/svg+xml,%3Csvg fill='%230d7754' height='800px' width='800px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 308 308' xml:space='preserve' stroke='%230d7754'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'/%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cg id='XMLID_468_'%3E%3Cpath id='XMLID_469_' d='M227.904,176.981c-0.6-0.288-23.054-11.345-27.044-12.781c-1.629-0.585-3.374-1.156-5.23-1.156 c-3.032,0-5.579,1.511-7.563,4.479c-2.243,3.334-9.033,11.271-11.131,13.642c-0.274,0.313-0.648,0.687-0.872,0.687 c-0.201,0-3.676-1.431-4.728-1.888c-24.087-10.463-42.37-35.624-44.877-39.867c-0.358-0.61-0.373-0.887-0.376-0.887 c0.088-0.323,0.898-1.135,1.316-1.554c1.223-1.21,2.548-2.805,3.83-4.348c0.607-0.731,1.215-1.463,1.812-2.153 c1.86-2.164,2.688-3.844,3.648-5.79l0.503-1.011c2.344-4.657,0.342-8.587-0.305-9.856c-0.531-1.062-10.012-23.944-11.02-26.348 c-2.424-5.801-5.627-8.502-10.078-8.502c-0.413,0,0,0-1.732,0.073c-2.109,0.089-13.594,1.601-18.672,4.802 c-5.385,3.395-14.495,14.217-14.495,33.249c0,17.129,10.87,33.302,15.537,39.453c0.116,0.155,0.329,0.47,0.638,0.922 c17.873,26.102,40.154,45.446,62.741,54.469c21.745,8.686,32.042,9.69,37.896,9.69c0.001,0,0.001,0,0.001,0 c2.46,0,4.429-0.193,6.166-0.364l1.102-0.105c7.512-0.666,24.02-9.22,27.775-19.655c2.958-8.219,3.738-17.199,1.77-20.458 C233.168,179.508,230.845,178.393,227.904,176.981z'/%3E%3Cpath id='XMLID_470_' d='M156.734,0C73.318,0,5.454,67.354,5.454,150.143c0,26.777,7.166,52.988,20.741,75.928L0.212,302.716 c-0.484,1.429-0.124,3.009,0.933,4.085C1.908,307.58,2.943,308,4,308c0.405,0,0.813-0.061,1.211-0.188l79.92-25.396 c21.87,11.685,46.588,17.853,71.604,17.853C240.143,300.27,308,232.923,308,150.143C308,67.354,240.143,0,156.734,0z M156.734,268.994c-23.539,0-46.338-6.797-65.936-19.657c-0.659-0.433-1.424-0.655-2.194-0.655c-0.407,0-0.815,0.062-1.212,0.188 l-40.035,12.726l12.924-38.129c0.418-1.234,0.209-2.595-0.561-3.647c-14.924-20.392-22.813-44.485-22.813-69.677 c0-65.543,53.754-118.867,119.826-118.867c66.064,0,119.812,53.324,119.812,118.867 C276.546,215.678,222.799,268.994,156.734,268.994z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	;
	background-size: 55%
}

.contact-icon:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='line' viewBox='0 0 24 24' fill='none' stroke='%23fafbff'%3E%3Cpath d='M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z'%3E%3C/path%3E%3Cpath d='M7.33008 14.49L9.71008 11.4C10.0501 10.96 10.6801 10.88 11.1201 11.22L12.9501 12.66C13.3901 13 14.0201 12.92 14.3601 12.49L16.6701 9.51001'%3E%3C/path%3E%3C/svg%3E");
	;
	background-color: #00aeef;
	background-size: 43%
}

.contact-module {
	position: fixed;
	top: 50%;
	left: -450px;
	transform: translate(-0%, -50%);
	max-width: 480px;
	z-index: 20;
	transition: left .7s
}

.contact-module:hover {
	left: 0
}

.contact-module-content {
	background: #fff;
	padding: 20px;
	border-radius: 0 4px 4px 0;
	box-shadow: rgba(0, 0, 0, 0.3) 0 0 6px, rgba(0, 0, 0, 0.15) 0 1px 6px
}

.contact-module-content>div>div:nth-of-type(1) {
	margin-bottom: 20px
}

.contact-module-content>div>div:nth-of-type(2) {
	background: #dadce0;
	opacity: .7;
	padding: 10px;
	border-radius: 4px
}

.contact-module-content>div>div:nth-of-type(2)>div:nth-of-type(2) {
	width: 2px;
	background: #00aeef;
	margin: 0 10px
}

.contact-text-wrapper h3 {
	line-height: 1.5;
	opacity: .8;
	text-transform: uppercase;
	cursor: default
}

.contact-module-content a {
	color: #212529
}

.contact-module-title {
	background: #00aeef;
	border: 1px solid #00aeef;
	border-radius: 0 4px 4px 0;
	color: #fff;
	width: 30px;
	height: 100px
}

.contact-module-title>div {
	transform: rotate(-90deg);
	white-space: nowrap;
	letter-spacing: 3px;
	font-size: 90%;
	font-weight: 500
}

.contact-module-content .has-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden
}

.contact-set a>div:nth-of-type(2) {
	line-height: 1.4
}

.contact-set h4 {
	margin-bottom: 5px
}

.contact-text-wrapper>div:nth-of-type(3) {
	line-height: 1.6
}

.contact-text-wrapper>div:nth-of-type(3) a {
	font-size: 1.2rem;
	font-weight: 500
}

.contact-text-wrapper>div:nth-of-type(3) a+span {
	font-size: 1.4rem;
	opacity: .7
}

.is-divider {
	display: block;
	margin: .7em 0 .5em;
	background: rgba(0, 0, 0, 0.1);
	width: 100%;
	max-width: 50px;
	height: 2px
}

@media(min-width:1025px) {
	.contact-module-title {
		cursor: pointer
	}
}

@media(max-width:480px) {
	.contact-module {
		display: none!important
	}
}


/* ]]> */
</style>
<div class="contact-module flex">
	<div class="flex-align">
		<div class="contact-module-content flex">
			<div>
				<div class="contact-title">
					<div class="contact-text-wrapper">
						<div>
							<h3 class="text-center">اذا كنت تبحث اوتبحثين عن عمل اضافي بجانب عملك مقابل مادي اتصل بنا</h3> </div>
						<div class="flex-center">
							<div class="is-divider"></div>
						</div>
						<div class="text-center">
							<div><a href="tel:(رقم الهاتف)" rel="nofollow">(رقم الهاتف)</a><span> | </span><a href="tel:+79779613151" rel="nofollow">79779613151+</a></div>
							<div><span>Email: (الايميل)</span></div>
						</div>
					</div>
				</div>
				<div class="contact-set flex text-center">
					<div class="w-50">
						<a href='whatsapp://send?phone=+(رقم الهاتف)'>
							<div class="flex-center"><span class="flex has-icon zalo-icon"></span></div>
							<div>
								<h4>الدردشة وتساب</h4>
								<p> كلمنا وتساب ونحن سنقوم بالرد عليك</p>
							</div>
						</a>
					</div>
					<div></div>
					<div class="w-50">
						<a href="#" title="Liên hệ">
							<div class="flex-center"><span class="has-icon contact-icon"></span></div>
							<div>
								<h4>إرسال طلب</h4>
								<p>سوف نقوم برالرد علي استفسارتك فورا عند تلقي الطلب</p>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div class="contact-module-title flex-center">
			<div>اتصال</div>
		</div>
	</div>
</div>