10772047211989472
recent
آخر الأخبار

اضافة أرسال رسالة الي مدير الموقع عبر واتسآب الي بلوجر

الخط
اضافة أرسال رسالة الي مدير الموقع عبر واتسآب الي بلوجر

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


صوره من الإضافة


شرح التركيب

1 - توجه إلى لوحة تحكم بلوجر

2 - ثم على تبويب المظهر ثم تعديل HTML

3 - ابحث عن هذه الوسم <head> وتقوم بلصق الكود التالي اسفله مباشر

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

4 - ابحث عن هذه الوسم </head> وتقوم بلصق الكود التالي فوقه مباشر

<style>
div#pelajar {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -99;
opacity: 0;
transition:.5s;
background: rgba(0,0,0,0.5);
}
div#pelajar.active{
z-index: 9999;
opacity: 1;
}
div#whatsapp {
position: fixed;
top: 50%;
left: 50%;
max-width: 480px;
width: 95%;
background: #fff;
transform: translate(-50%,-50%);
z-index: -1;
opacity: 0;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
transition:.5s;
}
div#whatsapp.active {
z-index: 999999;
opacity: 1;
}
p.wa-title {
margin: 0;
padding: 15px;
font-size: 16px;
text-align: center;
font-weight: bold;
background: #2ecc71;
color: #fff;
}
.wa-body {
padding: 14px;
display: flex;
flex-wrap: wrap;
width: 100%;
box-sizing: border-box;
}
.wa-input {
border: 1px solid #ddd;
border-radius: 3px;
line-height: 32px;
padding: 0 10px;
box-shadow: inset 0 0 2px rgba(0,0,0,0.1);
}
.wa-input.bagi {
width: 48%;
margin: 1%;
margin-bottom: 10px;
}
.wa-input.full {
width: 98%;
resize: none;
min-height: 150px;
margin: 0 1%;
}
a.submit {
line-height: 24px;
padding: 10px 15px;
width: 100%;
max-width: 200px;
text-align: center;
background: #2ecc71;
margin: 14px auto 0 auto;
display: block;
color: #fff;
border-radius: 3px;
cursor: pointer;
}
span.wa-x {
position: absolute;
top: 5px;
right: 5px;
height: 30px;
width: 30px;
/* background: #222; */
border: 2px solid #fff;
border-radius: 50px;
corsor:pointer;
}
a#wa-icon {
position: fixed;
bottom: 30px;
left: 30px;
line-height: 0;
border-radius: 30px;
background: #2ecc71;
padding: 0;
height: 60px;
width: 60px;
color: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
/* filter: invert(100%); */
z-index:99;
}
a#wa-icon::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
span.wa-x::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: 3px;
width: 50%;
background: #fff;
transform: translate(-50%,-50%);
}
@media (max-width: 480px){
.wa-input.bagi {
width: 100%;
margin: 0;
margin-bottom: 10px;
}
a#wa-icon {bottom:10px;left:10px;}
.wa-input.full {
width: 100%;
margin: 0;
}
}
  </style>

5 - الخطوة الآخرة، ابحث عن هذه الوسم </body> وتقوم بلصق الكود التالي فوقه مباشر

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<a class='fa fa-whatsapp fa-3x animated infinite rubberBand' href='javascript:void(0);' id='wa-icon' onclick='openModal()'></a>
<div class='pelajar' id='pelajar'>
</div>
<div id='whatsapp'>
<span class='wa-x' onclick='closeModal()'></span>
<p class='wa-title'>أرسال رسالة الي مدير الموقع عبر واتسآب</p>
<div class='wa-body'>
<input class='tujuan' type='hidden' value='06666666'/>
<!-- No. WhatsApp -->
<input class='nama wa-input bagi' placeholder='رقم الهاتف' type='text'/>
<input class='email wa-input bagi' placeholder='البريد الالكتروني' type='email'/>
<textarea class='pesan wa-input full' placeholder='الرسالة'></textarea>
<a class='submit'>أرسال</a>
</div>
</div>
<script type='text/javascript'>
function closeModal() {
document.getElementById('pelajar').classList.remove('active')
document.getElementById('whatsapp').classList.remove('active')
}
function openModal() {
document.getElementById('pelajar').classList.add('active')
document.getElementById('whatsapp').classList.add('active')
}


// Onclick Whatsapp Sent!
$('#whatsapp .submit').click(WhatsApp);


var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
function WhatsApp() {
    var ph = '';
    if ($('#whatsapp .nama').val() == '') { // Cek Nama
        ph = $('#whatsapp .nama').attr('placeholder');
        alert('يرجى ادخال ' + ph);
        $('#whatsapp .nama').focus();
        return false;
    } else if ($('#whatsapp .email').val() == '') { // Cek Email
        ph = $('#whatsapp .email').attr('placeholder');
        alert('يرجى ادخال ' + ph);
        $('#whatsapp .email').focus();
        return false;
    } else if (reg.test($('#whatsapp .email').val()) == false) { // Cek Validasi Email
        alert('عنوان البريد الإلكتروني غير صالح.');
        $('#whatsapp .email').focus();
         return false;
    } else if ($('#whatsapp .pesan').val() == '') { // Cek Pesan
        ph = $('#whatsapp .pesan').attr('placeholder');
        alert('يرجى ادخال ' + ph);
        $('#whatsapp .pesan').focus();
        return false;
    } else {
        if (!confirm("هل قمت بتثبيت واتسآب")) {
            window.open("https://www.whatsapp.com/download/");
        } else {
            // Check Device (Mobile/Desktop)
            var url_wa = 'https://web.whatsapp.com/send';
            if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
                url_wa = 'whatsapp://send/';
            }
            // Get Value
            var tujuan = $('#whatsapp .tujuan').val(),
                    via_url = location.href,
                    nama = $('#whatsapp .nama').val(),
                    email = $('#whatsapp .email').val(),
                    pesan = $('#whatsapp .pesan').val();
         
            var w = 960,
                    h = 540,
                    left = Number((screen.width / 2) - (w / 2)),
                    tops = Number((screen.height / 2) - (h / 2)),
                    popupWindow = window.open(this.href, '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width=' + w + ', height=' + h + ', top=' + tops + ', left=' + left);
            popupWindow.focus();
            return false;
        }
    }
}
</script>

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

إرسال تعليق

صديقي. إذا أعجبك الموضوع رجاءً قم بإضافة تعليق على الموضوع لتشجيعنا

نموذج الاتصال
الاسمبريد إلكترونيرسالة