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

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

أضف زر واتساب للتواصل مع العملاء المحتملين في مدونتك على بلوجر حيث تسمح لزوارك بالمبادرة بالأتصال بك بسهولة.

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

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


  • من لوحة تحكم مدونتك أنقر على المظهر => انقر على ثلاثة نقاط ثم حدد تعديل 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

إذا كان في قالب مدونتك وأغلب القوالب متوفرة على هذه الإصدارات من الخط الممتاز الخاص بالإيقونات وأجاكس قم بحذفهم من الكود فقط إذا كان قالب مدونتك يتوفر على أحد من هذه الإصدارت أي إصدار يدعمه
<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'/> 

غير رابط الصور المشار إليها باللون الأصفر بأي صورة مرغوب فيها
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



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


مشاركات أقدم المقال التالي
6 تعليق
  • أبو جاد
    أبو جاد 04‏/08‏/2020، 2:00:00 ص

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

    • مداد الجليد
      مداد الجليد 04‏/08‏/2020، 7:53:00 ص

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

  • 3mar
    3mar 21‏/10‏/2020، 11:36:00 ص

    مرحبا أخي العزيز صاحب مدونة مداد الجليد
    عندي مشكلة بخصوص أضافة مواضيع ذات صلة في مدونتي

    فهي تظهر على سطح المكتب بشكل سليم لكن من الموبايل لا تظهر

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

    مع العلم أني أستخدم قالب بلوجر الافتراضي

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

    هذا رابط أحد المواضيع على سبيل المثال
    https://www.ustfhaam.com/2020/10/Parsley-tea.html

    • مداد الجليد
      مداد الجليد 21‏/10‏/2020، 10:27:00 م

      اهلا بك
      قم بتعطيل اصدار الجوال المخصص حتى تظهر لك
      تحياتي.

  • 3mar
    3mar 21‏/10‏/2020، 11:59:00 م

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

    • مداد الجليد
      مداد الجليد 22‏/10‏/2020، 7:59:00 ص

      بالتوفيق ان شاء الله

أضف تعليق
عنوان التعليق