أضف زر الدردشة عبر واتساب في مدونة بلوجر

أصبح اليوم واتساب أداة تواصل مهمة للكثير حول العالم بفضل شعبيته التي يمكن ان نقول أن كل هاتف ذكي يتوفر على واتساب وحتى على الكمبيوتر.

يمكننا الآن إضافة زر التواصل عبر واتساب بسهولة في مدونات بلوجر بطريقة إحترافية يتميز الزر بتوافقه مع الهاتف والكمبيوتر ويمكن إضافته بخطوات سهلة

معاينة زر واتساب

طريقة إضافة الدردشة عبر واتساب في بلوجر

• من لوحة تحكم مدونتك أنقر على المظهر => انقر على ثلاثة نقاط ثم حدد تعديل 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS6ic2HlZMZZ3124sbBIvZBP0ddzFYnMiJOBnu9qSCmtkAqeJswftbt9H6v6x1e8scVWZL1Do6m9F84isDbZEYEDrzSYzq6g7Jng7V1nTZBW4AOwV6gS4IH42BaXGIJyeDB3GC1MsoMY/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS6ic2HlZMZZ3124sbBIvZBP0ddzFYnMiJOBnu9qSCmtkAqeJswftbt9H6v6x1e8scVWZL1Do6m9F84isDbZEYEDrzSYzq6g7Jng7V1nTZBW4AOwV6gS4IH42BaXGIJyeDB3GC1MsoMY/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'>&#215;</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: &quot;&quot;;
    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: &quot;&quot;;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    z-index: 0;
    opacity: 0.08;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBOLgElm05sdTrD6x6JNp5mQo6zB51oq1qjM-Pm1dCB80VU1GfTvESatV2hFiZ38RkNg6ZQks6KzR_JVtEoUrft6XSkh03uk8rEbhoCv5n_oG67GDxVvdHBD7baNvvfGrCjtL4_NENCaE0/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: &quot;&quot;;
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>  

تخصيص الكود:

قم بالتعديل على جميع النصوص المشار إليها باللون الأزرق وفق أختيارك

من المهم التعديل على رقم الهاتف المشار إليه باللون الأحمر برقم هاتفك بالرمز الدولي حتى يعمل بشكل صحيح مثلا رمز السعودية 00966 ثم باقي الرقم عليك إدخال رمز دولتك وحذف الصفر الأول وإدخال باقي رقم هاتفك الذي يتوفرعلى واتساب
0096655321222323

إذا كان في قالب مدونتك وأغلب القوالب متوفرة على هذه الإصدارات من الخط الممتاز الخاص بالإيقونات وأجاكس قم بحذفهم من الكود فقط إذا كان قالب مدونتك يتوفر على أحد من هذه الإصدارت أي إصدار يدعمه

غير رابط الصور المشار إليها باللون الأصفر بأي صورة مرغوب فيها
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS6ic2HlZMZZ3124sbBIvZBP0ddzFYnMiJOBnu9qSCmtkAqeJswftbt9H6v6x1e8scVWZL1Do6m9F84isDbZEYEDrzSYzq6g7Jng7V1nTZBW4AOwV6gS4IH42BaXGIJyeDB3GC1MsoMY/s80-c/mhmd.jpg
بعد إضافة الصورة الجديدة عدل على الحجم من خلال رابط الصورة بإضافة s80-c بدلًا من s1600

لتغيير اللون الإفتراضي للأيقونة عدل على الكود <div class='adb-header green'>
بتغيير إسم اللون 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

إلى هنا نكون قد إنتهينا من شرح هذا الكود الجميل والسلام عليكم ورحمة الله وبركاته.