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

السلام عليكم،

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

من خلال اضافة دردشة WhatsApp لمدونتك على بلوجر تستطيع عمل مجموعات دردشة لزوارك على المدونة، سيكون زوار متحمسون جداً لمزيد من الإستفادة.

طريقة إضافة دردشة الواتساب WhatsApp لمدونات بلوجر:

1- تطرق إلى لوحة التحكم على بلوجر

2- قم بتحديد المدونة المعنية

ثم بعد ذلك توجه إلى قسم التخطيط

4- حدد مكان للإضافة ثم أنقر على إضافة أداة

5- إختر أداة Html/JavaScript

6- الأن قم بنسخ الكود التالى مع تغيير الروابط فى الصندوق وقم بحفظ

<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;right:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}
a.blantershow-chat{background:linear-gradient(to right top,#00e676,#00e676);color:#fff;position:fixed;z-index:98;bottom:25px;right: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 right 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:left;margin:0 10px 0 0}
.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;left: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:'tajawal',sans-serif;width:100%;height:20px;outline:none;resize:none}
a#send-it{width:19%;color:#555;margin:-5px 0 0 5px;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:20px;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;left:5%;right: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}
</style>
<div class='hide' id='whatsapp-chat'>
<div class='header-chat'>
<div class='head-home'>
<h3>
مرحبا !</h3>
<p>
انقر على أحد ممثلينا أدناه للدردشة على WhatsApp أو أرسل لنا رسالة بريد إلكتروني إلى pro.arabic.net@gmail.com</p>
</div>
<div class='get-new hide'>
<div id='get-label'/>
<div id='get-nama'/>
</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'>+212617935191</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'>+212617935191</span>
</a>
<!-- Info Contact End -->
<div class='blanter-msg'>
اتصل بي من خلال الرقم  <b>+212617935191</b> متاح <i>12:00hs الى 00:00hs</i></div>
</div>
<div class='start-chat hide'>
<div class='first-msg'>
<span>مرحبا ! كيف اساعدك ؟</span></div>
<div class='blanter-msg'>
<textarea id='chat-input' maxlength='120' placeholder='اكتب رسالتك هنا' row='1'/>
<a href='javascript:void;' id='send-it'>ارسال</a></div>
</div>
<div id='get-number'/>
<a class='close-chat' href='javascript:void'>×</a>
</div>
<a class='blantershow-chat' href='javascript:void' title='غرفة دردشة'><i class='fa fa-whatsapp'/>كيف اساعدك ؟</a>

7- الأن قم بتوجه إلى القالب ثم تعديل Html وأضف الكود التالى فوق <body/> :

<script type='text/javascript'>
//<![CDATA[
/* Whatsapp Chat Widget by www.tharabic.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>

8- عليك القيام بالتعديلات التالية:

غير الرقم 212617935191+ بالرقم الخاص بك
غير 12:00hs إلى 00:00 حسب رغبتك والوقت الذى تود الإجابة عن الأسئلة

هناك تعليق واحد:

Unknown26 فبراير 2020 في 2:12 م
This is how my colleague Wesley Virgin's report starts in this SHOCKING and controversial video.

As a matter of fact, Wesley was in the military-and shortly after leaving-he revealed hidden, "self mind control" secrets that the CIA and others used to get whatever they want.

These are the exact same secrets lots of celebrities (especially those who "became famous out of nowhere") and top business people used to become wealthy and famous.

You probably know how you utilize only 10% of your brain.

That's really because the majority of your BRAINPOWER is UNCONSCIOUS.

Perhaps this thought has even taken place INSIDE OF YOUR own head... as it did in my good friend Wesley Virgin's head seven years ago, while driving an unlicensed, beat-up garbage bucket of a car without a driver's license and with $3.20 in his pocket.

"I'm very frustrated with living payroll to payroll! When will I finally make it?"

You've been a part of those those types of thoughts, isn't it so?

Your own success story is waiting to be written. All you need is to believe in YOURSELF.

Watch Wesley Virgin's Video Now!
ردحذف
الردود

إضافة تعليق

مواضيع مفضلة

الجمعة، 21 فبراير 2020

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

هناك تعليق واحد:

مواضيع شائعة