اضافة صندوق دردشة واتساب احترافي لمدونة بلوجر

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

شرح اضافة صندوق دردشة واتساب  احترافي جدا لمدونة بلوجر

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

الاضافة مهمة جدا و طريقة تركيب الاضافة غاية بالسهولة و يمكنك التعديل على النصوص كيفما شئت

شرح تركيب الاضافة 

الأكواد الخاصة بالاضافة

• أولا - الذهاب الى المظهر و البحث عن ]]></b:skin> و تلصق الاكواد التالية اعلاها

/* CSS Multiple Whatsapp Chat */

body{font-family:tajawal;direction:rtl;text-align:right}

a:link{text-decoration:none;}

a:visited{text-decoration:none;}

a:hover{text-decoration:none;}

#whatsapp-chat{font-family:tajawal;position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;left:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}

a.blantershow-chat{background:linear-gradient(to left top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;left:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)}

a.blantershow-chat i{transform:scale(1.2);margin:0 0 0 10px}.header-chat{background:linear-gradient(to left top,#6f96f3,#164ed2);color:#fff;padding:20px}

.header-chat h3{margin:0 0 10px}.header-chat p{font-size:14px;margin-top: 15px;line-height:1.7;}

.info-avatar{position:relative}.info-avatar img{border-radius:100%;width:50px;float:right;margin:0 0 0 10px}

.info-avatar:before{content:'\f232';z-index:1;

 font-fmily:"Font Awesome 5 Brands";background:#23ab23;color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;right:30px}

a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s}

a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888}

#get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none}

.blanter-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}

textarea#chat-input{border:none;font-family:'Arial',sans-serif;width:100%;height:20px;outline:none;resize:none}

a#send-it{color:#555;width:40px;margin:-5px 5px 0 0;font-weight:700;padding:8px;background:#eee;border-radius:10px}

.first-msg{background:#f5f5f5;padding:30px;text-align:center}

.first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block}

.start-chat .blanter-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;left:15px;color:#fff;font-size:30px}

@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}

@media screen and (max-width:480px){#whatsapp-chat{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:1.5s;transform:scale(1);opacity:1}

i.fab.fa-whatsapp {font-family: "Font Awesome 5 Brands"!important;}

.info-avatar:before {font-family: 'Font Awesome 5 Brands';}

h53 {font-size: 22px; font-weight: 600;}

• ثانيا - البحث عن </body> و تقوم بلصق الاكواد التالية اعلاها

   <script type='text/javascript'>

//<![CDATA[ 

/* Whatsapp Chat Widget by www.imintweb.com */

$(document).on("click","#send-it",function(){var a=document.getElementById("chat-input");if(""!=a.value){var b=$("#get-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",".informasi",function(){document.getElementById("get-number").innerHTML=$(this).children(".my-number").text(),$(".start-chat,.get-new").addClass("show").removeClass("hide"),$(".home-chat,.head-home").addClass("hide").removeClass("show"),document.getElementById("get-nama").innerHTML=$(this).children(".info-chat").children(".chat-nama").text(),document.getElementById("get-label").innerHTML=$(this).children(".info-chat").children(".chat-label").text()}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".blantershow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});

 //]]>

</script>

• ثالثا - قم بالحفظ

• رابعا - الذهاب الى التنسيق وأختيار اداة جديدة و لصق الكود التالي بداخلها

<div id='whatsapp-chat' class='hide'>

<div class='header-chat'>

<div class='head-home'><h53>مرحباً بكم</h53>

<p>للأستفسار أضغط فوق أحدى صور ممثلينا أدناه للدردشة عبر تطبيق WhatsApp أو مراسلتنا على البريد الإلكتروني علي user@gmail.com</p></div>

<div class='get-new hide'><div id='get-label'></div><div id='get-nama'></div></div></div>

<div class='home-chat'>

<!-- Info Contact Start -->

<a class='informasi' href='javascript:void' title='Chat Whatsapp'>

<div class='info-avatar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMt6OKB4OEeOHOv4LC5aQ14TP4mNAYYvQgBi6bSPhXWCSuzJdiD9trguTR5CMxZeHhBAdTbd53mufX5n2D8L7S4p5Ya5BwPzVWiT5apPYnAxW7eERAxcgs20vn5FRJcwWojlVW80eqIk/s70/supportmale.png'/></div>

<div class='info-chat'>

<span class='chat-label'>الدعم</span>

<span class='chat-nama'>خدمة العملاء 1</span>

</div><span class='my-number'>20281977094280</span>

</a>

<!-- Info Contact End -->

<!-- Info Contact Start -->

<a class='informasi' href='javascript:void' title='Chat Whatsapp'>

<div class='info-avatar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG6bt1EJFlARJjvPlg2EYIJzaFUHL2aiI8ZJ_6UcnBRBQFpaAfk20klMXhhnESDm-w_m5g8kdE2-QvH_naZtF1TSAW8gOOmR0q2lTlxj9b6DynDMPqR7_A3sgoTUUn5W-raSYvfFTK00k/s70/supportfemale.png'/></div>

<div class='info-chat'>

<span class='chat-label'>المبيعات</span>

<span class='chat-nama'>خدمة العملاء 2</span>

</div><span class='my-number'>20222222222</span>

</a>

<!-- Info Contact End -->

<div class='blanter-msg'>أتصل بنا علي <b>202123456789</b> من <i>0:00 إلي 24:00</i></div></div>

<div class='start-chat hide'>

<div class='first-msg'><span>مرحبا! ماذا يمكنني أن أفعل لك؟

</span></div>

<div class='blanter-msg'><textarea id='chat-input' placeholder='اكتب ردا' maxlength='120' row='1'></textarea>

<a href='javascript:void;' id='send-it'>إرسال</a></div></div>

<div id='get-number'></div><a class='close-chat' href='javascript:void'>×</a>

</div>

<a class='blantershow-chat' href='javascript:void' title='Show Chat'><i class='fab fa-whatsapp'></i>كيف أستطيع مساعدتك؟</a>

<link href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' rel='stylesheet' type='text/css'/>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<link href='https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500&display=swap' rel='stylesheet'/>

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>

<link href='https://use.fontawesome.com/releases/v5.10.2/css/all.css' media='print' onload='this.media="all"' rel='stylesheet'/>

التعديلات 

يمكنك تعديل ما تريد من النصوص الموجدودة بداخل الكود

و في النهاية قم بالحفظ و مبروك عليك الاضافة