يمكننا الآن إضافة زر التواصل عبر واتساب بسهولة في مدونات بلوجر بطريقة إحترافية يتميز الزر بتوافقه مع الهاتف والكمبيوتر ويمكن إضافته بخطوات سهلة.
أضف زر واتساب للتواصل مع العملاء المحتملين في مدونتك على بلوجر حيث تسمح لزوارك بالمبادرة بالأتصال بك بسهولة.
أصبح اليوم واتساب أداة تواصل مهمة للكثير حول العالم بفضل شعبيته التي يمكن ان نقول أن كل هاتف ذكي يتوفر على واتساب وحتى على الكمبيوتر.
يمكننا الآن إضافة زر التواصل عبر واتساب بسهولة في مدونات بلوجر بطريقة إحترافية يتميز الزر بتوافقه مع الهاتف والكمبيوتر ويمكن إضافته بخطوات سهلة.
من لوحة تحكم مدونتك أنقر على المظهر => انقر على ثلاثة نقاط ثم حدد تعديل HTML
أسفل المحرر البرمجي ضع الكود التالي فوق رمز </body> مباشرةً
<div class='hide' id='css-whatsapp'>
<div class='adb-header green'>
<div class='adb-home-chat'>
<div class='my-info-chat-2'>
<svg class='WhatsApp' height='20px' style='enable-background:new 0 0 64 64;' version='1.1' viewBox='0 0 64 64' width='20px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><style type='text/css'>
.st0{fill:#4267B2;}
.st1{fill:url(#SVGID_1_);}
.st2{fill:#FFFFFF;}
.st3{fill:#C2191E;}
.st4{fill:#1DA1F3;}
.st5{fill:#FEFE00;}
.st6{fill:#25D366;stroke:#FFFFFF;stroke-width:5;stroke-miterlimit:10;}
.st7{fill:#CB2027;}
.st8{fill:#0077B5;}
.st9{fill:url(#SVGID_2_);}
.st10{fill:url(#SVGID_3_);}
.st11{fill:#FF004F;}
.st12{fill:#00F7EF;}
.st13{fill:#5181B8;}
.st14{fill:#395976;}
.st15{fill:#F58220;}
.st16{fill:#E6162D;}
.st17{fill:#FF9933;}
</style><g id='WA'><g><path class='st6' d='M5,59l12-3.3c4.3,2.7,9.5,4.3,15,4.3c15.5,0,28-12.5,28-28S47.5,4,32
,4S4,16.5,4,32c0,5.5,1.6,10.7,4.3,15 L5,59z'/><path class='st2' d='M45.9,39.6c-1.9,4-5.4,4.5-5.4,4.5c-3,0.6-6.8-0.7-9.8-2.1c-4.3-2-8-5.2-10.5-9.3c-1.1-1.9-2.1-4.1-2.2-6.2 c0,0-0.4-3.5,3-6.3c0.3-0.2,0.6-0.3,1-0.3l1.5,0c0.6,0,1.2,0.4,1.4,1l2.3,5.6c0.2,0.6,0.1,1.2-0.3,1.7l-1.5,1.6 c-0.5,0.5-0.5,1.2-0.2,1.8c0.1,0.2,0.3,0.5,0.6,0.8c1.8,2.4,4.2,4.2,6.9,5.4c0.4,0.2,0.7,0.3,1,0.4c0.7,0.2,1.3-0.1,1.7-0.6 l1.2-1.8c0.3-0.5,0.9-0.8,1.5-0.7l6,0.9c0.6,0.1,1.1,0.6,1.3,1.2l0.4,1.5C46,38.9,46,39.3,45.9,39.6z'/></g></g></svg>
<div class='box-6'>
</div>
<div class='box-7'>
<h3>يوم جميل</h3>
<span class='adb-base-b-2'>نحن هنا لمساعدتك! هل لديك سؤال؟ أنقر ادناه لبدأ الدردشة عبر واتساب.</span>
</div>
</div></div>
<div class='get-new hide'>
<div class='adb-avatar'><img src='https://1.bp.blogspot.com/-BxGKrm0dRmY/Xu2wOHnU3lI/AAAAAAABO1c/AoVQhJL20RkR5x9v3rXZ0KPDckewxf1xACLcBGAsYHQ/s80-c/mhmd.jpg'/></div>
<div id='box-w-r'/>
<div id='box-label-w'/>
</div>
</div>
<div class='box-chat'>
<a class='adb-dual' href='javascript:void' title='شات واتساب'>
<div class='my-info-chat'>
<div class='adb-avatar'><img src='https://1.bp.blogspot.com/-BxGKrm0dRmY/Xu2wOHnU3lI/AAAAAAABO1c/AoVQhJL20RkR5x9v3rXZ0KPDckewxf1xACLcBGAsYHQ/s80-c/mhmd.jpg'/></div>
<span class='adb-base-b'>محمد ماهر</span>
<span class='adb-base'>المدير التنفيذي</span>
</div>
<span class='number-whatsapp'>0096655321222323</span>
</a>
<div class='mensaje-whatsapp'>madad2.com</div></div>
<div class='caja-chat hide'>
<div class='trix-one'>
<span>
<div class='fr-user'>محمد ماهر</div>
مرحبا 👋
<br/>
كيف لي أن أساعدك اليوم؟
<br/>
</span></div>
<div class='mensaje-whatsapp'><textarea id='chat-input' maxlength='400' placeholder='اكتب رسالتك' row='1'/>
<a href='javascript:void;' id='send-to-whatsapp'>إرسال</a></div></div>
<div id='go-number'/><a class='close-chat' href='javascript:void'>×</a>
</div>
<a class='adb-whatsapp' href='javascript:void' title='دردشة واتساب'><i class='fa fa-whatsapp'/></a>
<style>
/* CSS Whatsapp Chat */
#css-whatsapp{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(36,33,32,.28);bottom:90px;left:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:0.4s;transform:scale(1)}
a.adb-whatsapp {
background: #089d4b;
color: #fff;
position: fixed;
z-index: 98;
bottom: 29px;
left: 89px;
font-size: 15px;
padding: 18px 20px;
border-radius: 30px;
box-shadow: 0 1px 15px rgba(36,33,32,.28);
box-shadow: 0 2px 6px 4px rgba(78, 184, 59, 0.24);
-webkit-box-shadow: 0 2px 6px 4px rgba(78, 184, 59, 0.24);
-moz-box-shadow: 0 2px 6px 4px rgba(78, 184, 59, 0.24);
}
a.adb-whatsapp i{transform:scale(1.2);margin:0 0 0 0}
@media (max-width: 768px){
a.adb-whatsapp {
left: 60px;
}
}
.adb-header {
color: #fff;
padding: 20px;
}
.adb-header h3 {
margin: 0 0 10px;
font-size: 14px;
}
.adb-header p{font-size:14px;line-height:1.7;margin:0}
.adb-avatar{position:relative}.adb-avatar img{border-radius:100%;width:50px;float:right;margin:0 10px 0 0}
.adb-avatar::before {
content: "";
bottom: 0px;
left: 0px;
width: 10px;
height: 10px;
box-sizing: border-box;
background-color: rgb(74, 213, 4);
display: block;
position: absolute;
z-index: 1;
border-radius: 50%;
border-width: 2px;
border-style: solid;
border-color: rgb(255, 255, 255);
border-image: initial;
top: 39px;
right: 36px;
}
a.adb-dual{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:0.6s}
a.adb-dual:hover{background-color: rgb(230, 221, 212);}
.adb-dual {
background-color: #fff;
position: relative;
max-height: 382px;
padding: 20px 20px 20px 10px;
overflow: auto;
}
.my-info-chat-2 span {
display: block;
}
.my-info-chat span{display:block}
span.adb-base{font-size:12px;color:#333;}
span.adb-base-2{font-size:12px;color:#888;}
#box-label-w{font-size:12px;color:#888}
span.adb-base-b{margin:5px 0 0;font-size:15px;font-weight:700;color: #333;}
span.adb-base-b-2{margin:5px 0 0;font-size:12px;font-weight:200;color:#fff;}
#box-w-r{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}
#box-label-w,#box-w-r{color:#fff;}
span.number-whatsapp{display:none}
.mensaje-whatsapp{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
textarea#chat-input{border:none;width:80%;height:40px;outline:none;resize:none}
a#send-to-whatsapp{color:#555;margin:3px 0 0 7px;font-weight:700;padding:10px 3px;background:#eee;border-radius:10px}
.trix-one {
background-color: rgb(230, 221, 212);
padding: 30px;
position: relative;
overflow: auto;
}
.trix-one::before {
display: block;
position: absolute;
content: "";
right: 0px;
top: 0px;
height: 100%;
width: 100%;
z-index: 0;
opacity: 0.08;
background-image: url(https://1.bp.blogspot.com/-x7Ylv3Y6fvQ/Xulsc41aP1I/AAAAAAAAAFw/g9fr43WIC1UGyLOn0E0lLhAyi2ktCJxuQCLcBGAsYHQ/s1600/whatsapp.webp);
}
.trix-one span {
color: #333;
font-size: 14.2px;
line-height: 2;
display: inline-block;
max-width: calc(100% - 66px);
padding: 7px 14px 6px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 12px 0px 0px;
flex-direction: column;
background-color: rgb(255, 255, 255);
transform: translate3d(0px, 0px, 0px);
opacity: 1;
pointer-events: all;
visibility: visible;
touch-action: auto;
bottom: 0px;
left: 0px;
right: auto;
margin-right: 20px;
border-radius: 10px 0px 9px;
transition: opacity 0.3s ease 0s, margin 0.3s ease 0s, visibility 0.3s ease 0s;
}
.trix-one span::before {
content: "";
width:0;height:0;position:absolute;top:0;left:100%;border-width:7px;border-style:solid;border-color:#fff transparent transparent #fff;display:block;
}
.caja-chat .mensaje-whatsapp{display:flex}#go-number{display:none}
a.close-chat {
position: absolute;
top: 5px;
left: 15px;
color: #000;
font-size: 23px;
}
@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}
@media screen and (max-width:480px){#css-whatsapp{width:auto;right:5%;left:5%;font-size:80%}}
.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
.show{display:block;animation-name:showhide;animation-duration:0.1s;transform:scale(1);opacity:1}
.my-info-chat-2 {
display: flex;
}
.my-info-chat-2 .box-6 {
margin-right: 20px;
}
.my-info-chat-2 .box-7 {
width: 250px;
line-height: 1.6;
}
.fr-user {
font-size: 11px;
color: rgba(0, 0, 0, 0.4);
}
.red {
background-color: #f44336;
}
.pink {
background-color: #e91e63;
}
.purple {
background-color: #9c27b0;
}
.deep-purple {
background-color: #673ab7;
}
.indigo {
background-color: #3f51b5;
}
.blue {
background-color: #2196f3;
}
.light-blue {
background-color: #03a9f4;
}
.cyan {
background-color: #00bcd4;
}
.teal {
background-color: #009688;
}
.green {
background-color: #4caf50;
}
.light-green {
background-color: #8bc34a;
}
.lime {
background-color: #cddc39;
}
.yellow {
background-color: #ffeb3b;
}
.amber {
background-color: #ffc107;
}
.orange {
background-color: #ff9800;
}
.deep-orange {
background-color: #ff5722;
}
.brown {
background-color: #795548;
}
.grey {
background-color: #9e9e9e;
}
.grey-darken-4 {
background-color: #212121;
}
.black {
background-color: #000000;
}
.blue-grey {
background-color: #607d8b;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
<script type='text/javascript'>
//<![CDATA[
$(document).on("click","#send-to-whatsapp",function(){var a=document.getElementById("chat-input");if(""!=a.value){var b=$("#go-number").text(),c=document.getElementById("chat-input").value,d="https://web.whatsapp.com/send",e=b,f="&text="+c;if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))var d="whatsapp://send";var g=d+"?phone="+e+f;window.open(g, '_blank')}}),$(document).on("click",".adb-dual",function(){document.getElementById("go-number").innerHTML=$(this).children(".number-whatsapp").text(),$(".caja-chat,.get-new").addClass("show").removeClass("hide"),$(".box-chat,.adb-home-chat").addClass("hide").removeClass("show"),document.getElementById("box-w-r").innerHTML=$(this).children(".my-info-chat").children(".adb-base-b").text(),document.getElementById("box-label-w").innerHTML=$(this).children(".my-info-chat").children(".adb-base").text()}),$(document).on("click",".close-chat",function(){$("#css-whatsapp").addClass("hide").removeClass("show")}),$(document).on("click",".adb-whatsapp",function(){$("#css-whatsapp").addClass("show").removeClass("hide")});
//]]>
</script>
تخصيص الكود
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
</script>
https://1.bp.blogspot.com/-BxGKrm0dRmY/Xu2wOHnU3lI/AAAAAAABO1c/AoVQhJL20RkR5x9v3rXZ0KPDckewxf1xACLcBGAsYHQ/s80-c /mhmd.jpg
<div class='adb-header green'>
- red
- pink
- purple
- deep-purple
- indigo
- blue
- light-blue
- cyan
- teal
- green
- light-green
- lime
- yellow
- amber
- orange
- deep-orange
- brown
- grey
- grey-darken-4
- black
- blue-grey
إلى هنا نكون قد إنتهينا من شرح هذا الكود الجميل والسلام عليكم ورحمة الله وبركاته
COMMENTS