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

></b:skin> أو </style> /* CSS Multiple Whatsapp Chat */ #whatsapp-chat{position:fixed;background:#fff;width:350px;border-radius:10px;box-sha ..

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

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

دليل انكور للمواقع

ماذا تحتاج وماذا تستطيع ان تقدم؟

#أنقذوا_حي_الشيخ_جراح #الحرية_لفلسطين #الأقصى_في_خطر




القوانين العامة لشركة انكور التطويرية | وجب على الجميع القراءة والالتزام
تم اتاحة روابط التحميل للزوار .. يمكنك الان التحميل دون الحاجة للتسجيل والرد




أهلا وسهلا بك زائرنا الكريم في شركة انكور التطويرية، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .


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

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


لا يمكنك الرد على هذا الموضوع لا يمكنك إضافة موضوع جديد


Admin
.:: مؤسس انكور ::.
معلومات الكاتب ▼
تاريخ الإنضمام : 15-01-2020
رقم العضوية : 1
المشاركات : 1807
الدولة : فلسطين
الجنس : ذكر
تاريخ الميلاد : 11-9-1998
الدعوات : 13
قوة السمعة : 340
موقعي : زيارة موقعي
 offline 

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

إضافة صندوق دردشة واتساب لمدونات بلوجر اصدار 2
اقدم لكم اضافة لمدونات بلوجر وهي عبارة عن دردشة واتس اب جانبية في المدونة
طريقة أضافة دردشة واتساب لموقعك بعددة حسابات وأرقام
إضافة صندوق دردشة واتساب لمدونات بلوجر اصدار 2
معاينة الاضافة :
إضافة صندوق دردشة واتساب لمدونات بلوجر اصدار 2
إضافة صندوق دردشة واتساب لمدونات بلوجر اصدار 2
اولا التوجه إلي بلوجر > المظهر  > تعديل HTML
اضف كود CSS التالي مباشرة فوق الوسم  ]]></b:skin> أو </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 / Javas c r i p t ، في الواقع يمكن وضعه في أي مكان ، إذا قمت بتحرير HTML ، فيمكنك وضعه أعلى رمز Javas c r i p t في الخطوة التالية.
<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.

ضع Javas c r i p t أسفل اليمين أعلى الكود </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>


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

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



:. كاتب الموضوع Admin ، المصدر: إضافة صندوق دردشة واتساب لمدونات بلوجر اصدار 2 .:


Yqhtm wk],r ]v]am ,hjshf gl],khj fg,[v hw]hv 2

توقيع :Admin
للتواصل مع الادارة بشأن اي موضوع : اضغط هنا





المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
صندوق المحادثة cyb الاصدار الثانى (الدردشة) Admin
0 363 Admin

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

« حصري اضافة السبحة الالكترونية فلاش في بلوجر | اضافة صندوق اشتراك في القائمة البريدية »

 











وسوم المنتدى







الساعة الآن 01:15 مساء


جميع حقوق تصميم الاستايل محفوظة لابو كريم وتحويل الاستايل لسليمان


RSS 2.0XML Site MapArchiveTeamContactCalendarStatic Forum
الاقسام العامة خدمات انكور تطوير المواقع و المنتديات اصحاب المواقع والمنتديات اقسام التصميم مكتبة السكربتات دورات انكور تقنيات ودروس الارشفة المكتب الاداري دليل المواقع مدونة انكور