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

 

كيفية انشاء صفحة الاتصال بك او مراسلتك عبر حسابك على الواتساب مباشرة.

كما نعلم فان من اهم الامور الاساسية التي يجب ان تتوفر على اي موقع او مدونة هي طرق الاتصال بادارة الموقع أو صاحب مدونة , وطبعا هذا يسهل على الزوار و المتابعين او حتى من يريدون ان يتصلو معا من اجل تقديم خدمات لهم او الاعلان عندك . 

 وهناك الكثير من وسائل الاتصال التي نجدها الآن و أشهرها عبر الايميل , لكن كما نرى هناك مواقع كبيرة من توفر لزوارها أو أعضائها خاصية الاتصال بها مباشرة .

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

شرح طريقة التركيب :

1. قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر Dashboard.
2. إنتقل للمدونة >> ثم إلى الصفحات >> ثم قم بإنشاء صفحة جديدة بعنوان مثلا contact-us.
3.  إنتقل من وضع التأليف إلى HTML ثم إمسح الأكواد الموجودة داخل المحرر قم الآن بنسخ الأكواد التالية وضعها داخل حقل المحرر.

<div style="text-align: center;">يمكنك تواصل معنا هنا عبر الواتساب مع بعض خيارت</div><div style="text-align: center;">اذا أردت للانضمام الى فريق Panda Team يرجى اختيار الانضمام الى الفريق مع كتابة مهنتك او موهبتك او خبرتك في التطبيقات&nbsp;</div><div style="text-align: center;"><br /></div><div>&nbsp;

<style type="text/css"> 
/* Input Field CSS */
.datainput{position:relative;margin:5px 0 20px}.datainput p{font-size:12px;background:#eee;display:inline-block;padding:5px 15px;border-radius:.5rem}.whatsapp-form textarea{min-height:120px}.datainput select{padding:12px 0;color:#555;font-size:14px;width:100%;border:0;border-bottom:1px solid #ddd;outline:none;background:#fff}.datainput input,.datainput textarea{text-align: right;font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.datainput input:focus,.datainput textarea:focus{outline:none}.datainput label{color:#999;font-size:14px;font-weight:400;position:absolute;pointer-events:none;right:0;top:18px;transition:.2s ease all}.datainput input:focus~label,.datainput input:valid~label,.datainput textarea:focus~label,.datainput textarea:valid~label{top:-10px;font-size:14px;color:#21a51f}#notif-license span{font-size:40px}#notif-license{display:none;position:fixed}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#21a51f;transition:.2s ease all}.bar:before{right:50%}.bar:after{left:50%}.datainput input:focus~.bar:before,.datainput input:focus~.bar:after,.datainput textarea:focus~.bar:before,.datainput textarea:focus~.bar:after{width:50%}.indigox{background:#3f51b5}.orangex{background:#ff9800}.pinkx{background:#e91e63}.bluex{background:#2196F3}.purplex{background:#9c27b0}.redx{background:#F44336}.greenx{background:#4CAF50}.highlight{background: none !important;position:absolute;height:50%;width:100px;top:25%;right:0;pointer-events:none;opacity:.5}.datainput input:focus~.highlight,.datainput textarea:focus~.highlight{animation:inputHighlighter .3s ease}.datainput input:focus~label,.datainput input:valid~label,.datainput textarea:focus~label,.datainput textarea:valid~label{top:-10px;font-size:13px;color:#21a51f}

/* Default Whatsapp Form CSS by www.idblanter.com */
form.whatsapp-form {
    box-shadow: 0 1px 6px rgba(32,33,36,.28);
    border-radius: .5rem;
    padding: 20px;
    box-sizing: border-box;
    color: #444;
    font-size: 14px;
    line-height: 1.5;
}
 .whatsapp-form a.send_form {
    color: #fff;
    background: #21a51f;
    text-decoration: none;
    display: inline-block;
    padding: 10px 25px;
    border-radius: .3rem;
    font-weight: 700;
    letter-spacing: .5px;
    font-size: 15px;
}
#text-info span {
    display: block;
    padding: 10px 15px;
    text-align: center;
    font-weight: 700;
    margin: 15px 0;
    border-radius: .5rem;
}
#text-info span.yes {
    background: #c6ffc5;
    color: #0ea904;
}
#text-info span.no {
    background: #ffc5c5;
    color: #ce0404;
}
.whatsapp-form{
  width:100%;
  max-width:700px;
  margin:0 auto;
  box-sizing:border-box;
}</style><form class="whatsapp-form">
<div class="datainput">
<span style="font-family: inherit;"><input class="validate" id="wa_name" name="name" required="" type="text" value="" />
<span class="highlight"></span><span class="bar"></span>
<label>اسمك</label>
</span></div>
<div class="datainput">
<span style="font-family: inherit;"><input class="validate" id="wa_email" name="email" required="" type="email" value="" />
<span class="highlight"></span><span class="bar"></span>
<label>عنوان البريد الإلكتروني</label>
</span></div>
<div class="datainput">
<select id="wa_select">
  <option hidden="hidden" selected="selected" value="default">نوع الطلب</option>
   <option value="2">الانضمام لفريق Panda Team</option>
  <option value="1">تبادل اعلاني</option>
  <option value="2">الانضمام للموقع</option>
  <option value="4">رابط معطوب</option>
  <option value="5">أعلن معكم</option>
    <option value="3">أطلب تطبيق</option>

</select><span style="font-family: inherit;">
</span></div>
<div class="datainput">
<span style="font-family: inherit;"><input class="validate" id="wa_number" name="count" required="" type="number" value="" />
<span class="highlight"></span><span class="bar"></span>
<label>رقم هاتفك</label>
</span></div>
<div class="datainput">
<span style="font-family: inherit;"><input class="validate" id="wa_url" name="url" required="" type="url" value="" />
<span class="highlight"></span><span class="bar"></span>
<label>URL/عنوان الموقع</label>
</span><p><span style="font-family: inherit;">يجب استخدام http:// أو https://</span></p>
</div>
<div class="datainput">
<span style="font-family: inherit;"><textarea id="wa_textarea" maxlength="5000" placeholder="" required="" row="1"></textarea>
<span class="highlight"></span><span class="bar"></span>
<label>وصف</label>
</span></div>
<a class="send_form" href="javascript:void" title="Send to Whatsapp" type="submit"><i aria-hidden="true" class="fa fa-whatsapp"></i>
<span style="font-family: inherit;">ارسال عبر واتساب</span></a>
<div id="text-info"></div>
</form>
<script type="text/javascript"> 
//<![CDATA[ 
$(document).on('click','.send_form', function(){
var input_blanter = document.getElementById('wa_email');

/* Whatsapp Settings */
var walink = 'https://web.whatsapp.com/send',
    phone = '213698039179',
    walink2 = 'مرحبا اريد ',
    text_yes = 'تم ارسال.',
    text_no = 'املأ جميع النماذج ثم انقر فوق إرسال.';

/* Smartphone Support */
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var walink = 'whatsapp://send';
}

if("" != input_blanter.value){

 /* Call Input Form */
var input_select1 = $("#wa_select :selected").text(),
    input_name1 = $("#wa_name").val(),
    input_email1 = $("#wa_email").val(),
    input_number1 = $("#wa_number").val(),
    input_url1 = $("#wa_url").val(),
    input_textarea1 = $("#wa_textarea").val();

/* Final Whatsapp URL */
var blanter_whatsapp = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' +
    '*الاسم* : ' + input_name1 + '%0A' +
    '*بريد الالكتروني* : ' + input_email1 + '%0A' +
    '*خيار* : ' + input_select1 + '%0A' +
    '*رقم الهاتف* : ' + input_number1 + '%0A' +
    '*رابط أو موقع* : ' + input_url1 + '%0A' +
    '*وصف* : ' + input_textarea1 + '%0A';

/* Whatsapp Window Open */
window.open(blanter_whatsapp,'_blank');
document.getElementById("text-info").innerHTML = '<span class="yes">'+text_yes+'</span>';
} else {
document.getElementById("text-info").innerHTML = '<span class="no">'+text_no+'</span>';
}
});
//]]> 
</script></div>

ملاحظة؟
قم باستبدال هذا الرقم 213698039179 برقمك على الواتس أب مع معرف الدولة.