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

[Admin]

بسم الله الرحمن الرحيم



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

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

طريقة أضافة دردشة واتساب لموقعك بعددة حسابات وأرقام

معاينة الاضافة :

اولا التوجه إلي بلوجر > المظهر  > تعديل HTML

اضف كود CSS التالي مباشرة فوق الوسم  ]]> أو </style>

/* CSS Multiple Whatsapp Chat */
#whatsapp-chat{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-family:"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}

بالنسبة إلى HTML ، يمكنك وضعه في التخطيط> إضافة أداة > HTML / Javascript ، في الواقع يمكن وضعه في أي مكان ، إذا قمت بتحرير HTML ، فيمكنك وضعه أعلى رمز Javascript في الخطوة التالية.

<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'>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://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'>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>

بالنسبة لأرقام whatsapp ، لا تستخدم علامة الجمع + ، رموز البلد فقط مثل 20.



ضع Javascript أسفل اليمين أعلى الكود

<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>

قم بحفظ القالب

يرجى ملاحظة أن خط هذه الأداة سوف يتبع تلقائيا الخط الافتراضي للقالب الذي تستخدمه. تأكد من تثبيت الخطوط الخاصة وأيضًا مكاتب CSS الخارجية مثل Awesome Fonts وأيضًا jQuery.



بالتوفيق للجميع

والسلام ختام​

 

[gesho]

موضوعك رائع ... ننتظر جديدك ​