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

Hamza2000

السلام عليكم

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

بإمكانك معاينة حية للإضافة : مـن هـنا

كيفية تركيب أضافة دردشة واتساب

1 . التوجه إلي بلوجر > المظهر > من ثم تعديل HTML
2 . اضف كود CSS التالي مباشرة فوق الوسم ]]></b:skin>

CSS:

/* 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;line-height:1.7;margin:0}
.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}

4 .بعدها مباشرة ابحث عن كلمة </body> بنقر على " ctrl+f " وأضفه تحتها مباشرة الكود التالي :

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")});
//]]>

5 . واخير خطوة هي التوجه إلي بلوجر > التنسيق > من ثم إضافة أداة > ثم ‏اختار HTML/JavaScript

واضف هدا الكود :

HTML:

<div id='whatsapp-chat' class='hide'>
<div class='header-chat'>
<div class='head-home'><h3>مرحباً</h3>
<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://2.bp.blogspot.com/-y6xNA_8TpFo/XXWzkdYk0MI/AAAAAAAAA5s/RCzTBJ_FbMwVt5AEZKekwQqiDNqdNQJjgCLcBGAs/s70/supportmale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>الدعم</span>
<span class='chat-nama'>خدمة العملاء 1</span>
</div><span class='my-number'>اضف رقم هاتف هنا</span>
</a>
<!-- Info Contact End -->
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://4.bp.blogspot.com/-X1Xs2iRKabY/XXWzkqQ-iDI/AAAAAAAAA5w/HSyhR0gIXvUzlAx5XgaZzmlrCJkTgrOFQCLcBGAs/s70/supportfemale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>المبيعات</span>
<span class='chat-nama'>خدمة العملاء 2</span>
</div><span class='my-number'>اضف رقم هاتف هنا</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'/>

ملاحظة : لا تنسى بتعديل وإضافة رقم هاتف الخاص بك

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

Hamza2000

مشرف خدمات المواقع وتطويرها

معلومات العضو

كيفية تركيب أضافة دردشة واتساب

الأعضاء المتواجدون

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

Hamza2000

مشرف خدمات المواقع وتطويرها

معلومات العضو

كيفية تركيب أضافة دردشة واتساب ​

الأعضاء المتواجدون

كيفية تركيب أضافة دردشة واتساب