إضافة زر التواصل عبر واتس اب فى بلوجر
 |
إنشاء صفحة الإتصال عبر رقمك على واتس اب
إنشاء صفحة اتصل بنا عبر الواتس آب لمدونات بلوجر
كيفية انشاء صفحة الاتصال بك ؟ او مراسلتك عبر حسابك على الواتساب مباشرة بواسطة رقم هاتفك
السلام عليكم من جديد اهلا ومرحبا بكم في مدونة سيوتكس، موضوع اليوم مهم الي حد ما الى اصحاب مدونات بلوجر والذين قد بدأو فى الربح من الانترنت وقد قمنا بالفعل بشرح كيفية الربح من الانترنت للمبتديئين ٢٠٢٠، ولكي لا نخرج عن موضوع اليوم الذي سيهم كل مدون فى بلوجر معنا اليوم إضافة من أهم إضافات بلوجر، وهي اضافة صفحة إتصل بنا او راسلنا لاكن هذه مرة لن تكون اعتيادية ومن يتصل بك او يرسل اليك رسالة تصل عبر بريدك الإليكترونى، لا هذه المرة سوف تصلك رسالة عبر حسابك على الواتس اب.
أهمية اضافة صفحة اتصل بنا فى بلوجر
كما نعلم فان من اهم الامور الاساسية التي يجب ان تتوفر على اي موقع او مدونة هي طرق الاتصال بادارة الموقع أو صاحب مدونة , وطبعا هذا يسهل على الزوار و المتابعين او حتى من يريدون ان يتصلو معا من اجل تقديم خدمات لهم او الاعلان عندك فى مدونتك فهذا الامر اصبح سهل جداً ، وهناك الكثير من وسائل الاتصال التي نجدها الآن و أشهرها عبر الايميل , لكن كما نرى هناك مواقع كبيرة من توفر لزوارها أو أعضائها خاصية الاتصال بها مباشرة وذلك لسهولة التواصل ولأهمية الامر وايضا اذا لم يكن مهتم برسائل الايميل انت يا صحاب المدونة فهذه ستسهل عليك التواصل مع متابعينك جدا، ونحن اليوم نقدم لكم صفحة التواصل بالواتساب التى يعد من اشهر التطبيقات و الأكثر استخداما فى العالم الى موقعك او مدونة بلوجر من أجل تسهيل الاتصال بك او مراسلتك عبر الواتس آب.
قد يعجبك ايضاً
أسرار تصدر محركات البحث جوجل بعد التحديثات
كيف تجعل موقعك أول نتائج البحث في جوجل
جميع اسرار السيو فى مقالة لتصدر محركات البحث
اضافة زر التواصل عبر الواتس اب لمدونات بلوجر
- قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر Dashboard
- إنتقل للمدونة >> ثم إلى الصفحات >> ثم قم بإنشاء صفحة جديدة بعنوان مثلا Archive او على حسب ما تحب.
- إنتقل من وضع التأليف إلى HTML ثم إمسح الأكواد الموجودة داخل المحرر
- قم الآن بنسخ الأكواد التالية وضعها داخل حقل المحرر.
<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">
<input class="validate" id="wa_name" name="name" required="" type="text" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>اسمك</label>
</div>
<div class="datainput">
<input class="validate" id="wa_email" name="email" required="" type="email" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>عنوان البريد الإلكتروني</label>
</div>
<div class="datainput">
<select id="wa_select">
<option hidden='hidden' selected='selected' value='default'>نوع الطلب</option>
<option value="1">تبادل اعلاني</option>
<option value="2">الانضمام للموقع</option>
<option value="3">تطوير موقع</option>
</select>
</div>
<div class="datainput">
<input class="validate" id="wa_number" name="count" required="" type="number" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>رقم هاتفك</label>
</div>
<div class="datainput">
<input class="validate" id="wa_url" name="url" required="" type="url" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>URL/عنوان الموقع</label>
<p>يجب استخدام http:// أو https://</p>
</div>
<div class="datainput">
<textarea id='wa_textarea' placeholder='' maxlength='5000' row='1' required=""></textarea>
<span class="highlight"></span><span class="bar"></span>
<label>وصف</label>
</div>
<a class="send_form" href="javascript:void" type="submit" title="Send to Whatsapp">Send to Whatsapp</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 = '00201000000000',
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' +
'*Name* : ' + input_name1 + '%0A' +
'*Email Address* : ' + input_email1 + '%0A' +
'*Select Option* : ' + input_select1 + '%0A' +
'*Input Number* : ' + input_number1 + '%0A' +
'*URL/Link* : ' + input_url1 + '%0A' +
'*Description* : ' + 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>
قم بتغير الرقم المظلل باللون الاحمر الى رقم هاتفك،ثم قم بحفظ التغييرات ومبروك عليك 😉اذا واجهت اى مشكلة ضعها بالتعليقات.
تعليقات
إرسال تعليق
قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )