wesamdev

طريقة إضافة زر الدردشة واتساب في بلوجر

0 0 Elnggar الجمعة، 20 نوفمبر 2020

يمكننا الآن إضافة زر التواصل عبر واتساب بسهولة في مدونات بلوجر بطريقة إحترافية يتميز الزر بتوافقه مع الهاتف والكمبيوتر ويمكن إضافته بخطوات سهلة.

أضف زر واتساب للتواصل مع العملاء المحتملين في مدونتك على بلوجر حيث تسمح لزوارك بالمبادرة بالأتصال بك بسهولة.

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

معاينة الذهاب الي الموقع

من لوحة تحكم مدونتك أنقر على المظهر => انقر على ثلاثة نقاط ثم حدد تعديل HTML

أسفل المحرر البرمجي ضع الكود التالي فوق رمز </body> مباشرةً

<div class='hide' id='css-whatsapp'>
<div class='adb-header green'>
<div class='adb-home-chat'>
<div class='my-info-chat-2'>
<svg class='WhatsApp' height='20px' style='enable-background:new 0 0 64 64;' version='1.1' viewBox='0 0 64 64' width='20px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><style type='text/css'>
 .st0{fill:#4267B2;}
 .st1{fill:url(#SVGID_1_);}
 .st2{fill:#FFFFFF;}
 .st3{fill:#C2191E;}
 .st4{fill:#1DA1F3;}
 .st5{fill:#FEFE00;}
 .st6{fill:#25D366;stroke:#FFFFFF;stroke-width:5;stroke-miterlimit:10;}
 .st7{fill:#CB2027;}
 .st8{fill:#0077B5;}
 .st9{fill:url(#SVGID_2_);}
 .st10{fill:url(#SVGID_3_);}
 .st11{fill:#FF004F;}
 .st12{fill:#00F7EF;}
 .st13{fill:#5181B8;}
 .st14{fill:#395976;}
 .st15{fill:#F58220;}
 .st16{fill:#E6162D;}
 .st17{fill:#FF9933;}
</style><g id='WA'><g><path class='st6' d='M5,59l12-3.3c4.3,2.7,9.5,4.3,15,4.3c15.5,0,28-12.5,28-28S47.5,4,32
,4S4,16.5,4,32c0,5.5,1.6,10.7,4.3,15    L5,59z'/><path class='st2' d='M45.9,39.6c-1.9,4-5.4,4.5-5.4,4.5c-3,0.6-6.8-0.7-9.8-2.1c-4.3-2-8-5.2-10.5-9.3c-1.1-1.9-2.1-4.1-2.2-6.2    c0,0-0.4-3.5,3-6.3c0.3-0.2,0.6-0.3,1-0.3l1.5,0c0.6,0,1.2,0.4,1.4,1l2.3,5.6c0.2,0.6,0.1,1.2-0.3,1.7l-1.5,1.6    c-0.5,0.5-0.5,1.2-0.2,1.8c0.1,0.2,0.3,0.5,0.6,0.8c1.8,2.4,4.2,4.2,6.9,5.4c0.4,0.2,0.7,0.3,1,0.4c0.7,0.2,1.3-0.1,1.7-0.6    l1.2-1.8c0.3-0.5,0.9-0.8,1.5-0.7l6,0.9c0.6,0.1,1.1,0.6,1.3,1.2l0.4,1.5C46,38.9,46,39.3,45.9,39.6z'/></g></g></svg>
<div class='box-6'>
</div>
<div class='box-7'>
<h3>يوم جميل</h3>
<span class='adb-base-b-2'>نحن هنا لمساعدتك! هل لديك سؤال؟ أنقر ادناه لبدأ الدردشة عبر واتساب.</span>
</div>
</div></div>
<div class='get-new hide'>
<div class='adb-avatar'><img src='https://1.bp.blogspot.com/-BxGKrm0dRmY/Xu2wOHnU3lI/AAAAAAABO1c/AoVQhJL20RkR5x9v3rXZ0KPDckewxf1xACLcBGAsYHQ/s80-c/mhmd.jpg'/></div>
     <div id='box-w-r'/>
     <div id='box-label-w'/>
   </div>
</div>
<div class='box-chat'>

<a class='adb-dual' href='javascript:void' title='شات واتساب'>
<div class='my-info-chat'>
<div class='adb-avatar'><img src='https://1.bp.blogspot.com/-BxGKrm0dRmY/Xu2wOHnU3lI/AAAAAAABO1c/AoVQhJL20RkR5x9v3rXZ0KPDckewxf1xACLcBGAsYHQ/s80-c/mhmd.jpg'/></div>
<span class='adb-base-b'>محمد ماهر</span>
<span class='adb-base'>المدير التنفيذي</span>
</div>
<span class='number-whatsapp'>0096655321222323</span>
</a>

<div class='mensaje-whatsapp'>madad2.com</div></div>
<div class='caja-chat hide'>
<div class='trix-one'>
<span>
<div class='fr-user'>محمد ماهر</div>
مرحبا 👋
<br/>
كيف لي أن أساعدك اليوم؟
<br/>
</span></div>
<div class='mensaje-whatsapp'><textarea id='chat-input' maxlength='400' placeholder='اكتب رسالتك' row='1'/>
<a href='javascript:void;' id='send-to-whatsapp'>إرسال</a></div></div>
<div id='go-number'/><a class='close-chat' href='javascript:void'>&#215;</a>
</div>
<a class='adb-whatsapp' href='javascript:void' title='دردشة واتساب'><i class='fa fa-whatsapp'/></a>

<style>
/* CSS Whatsapp Chat */
#css-whatsapp{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(36,33,32,.28);bottom:90px;left:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:0.4s;transform:scale(1)}
a.adb-whatsapp {
    background: #089d4b;
    color: #fff;
    position: fixed;
    z-index: 98;
    bottom: 29px;
    left: 89px;
    font-size: 15px;
    padding: 18px 20px;
    border-radius: 30px;
    box-shadow: 0 1px 15px rgba(36,33,32,.28);
    box-shadow: 0 2px 6px 4px rgba(78, 184, 59, 0.24);
    -webkit-box-shadow: 0 2px 6px 4px rgba(78, 184, 59, 0.24);
    -moz-box-shadow: 0 2px 6px 4px rgba(78, 184, 59, 0.24);
}
a.adb-whatsapp i{transform:scale(1.2);margin:0 0 0 0}
@media (max-width: 768px){
a.adb-whatsapp {
    left: 60px;
}
}
.adb-header {
    color: #fff;
    padding: 20px;
}
.adb-header h3 {
    margin: 0 0 10px;
    font-size: 14px;
}
.adb-header p{font-size:14px;line-height:1.7;margin:0}
.adb-avatar{position:relative}.adb-avatar img{border-radius:100%;width:50px;float:right;margin:0 10px 0 0}
.adb-avatar::before {
    content: &quot;&quot;;
    bottom: 0px;
    left: 0px;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    background-color: rgb(74, 213, 4);
    display: block;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    border-image: initial;
    top: 39px;
    right: 36px;
}
a.adb-dual{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:0.6s}
a.adb-dual:hover{background-color: rgb(230, 221, 212);}
.adb-dual {
    background-color: #fff;
    position: relative;
    max-height: 382px;
    padding: 20px 20px 20px 10px;
    overflow: auto;
}
.my-info-chat-2 span {
    display: block;
}
.my-info-chat span{display:block}
span.adb-base{font-size:12px;color:#333;}
span.adb-base-2{font-size:12px;color:#888;}
#box-label-w{font-size:12px;color:#888}
span.adb-base-b{margin:5px 0 0;font-size:15px;font-weight:700;color: #333;}
span.adb-base-b-2{margin:5px 0 0;font-size:12px;font-weight:200;color:#fff;}
#box-w-r{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}
#box-label-w,#box-w-r{color:#fff;}
span.number-whatsapp{display:none}
.mensaje-whatsapp{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
textarea#chat-input{border:none;width:80%;height:40px;outline:none;resize:none}
a#send-to-whatsapp{color:#555;margin:3px 0 0 7px;font-weight:700;padding:10px 3px;background:#eee;border-radius:10px}
.trix-one {
    background-color: rgb(230, 221, 212);
    padding: 30px;
    position: relative;
    overflow: auto;
}
.trix-one::before {
    display: block;
    position: absolute;
    content: &quot;&quot;;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    z-index: 0;
    opacity: 0.08;
    background-image: url(https://1.bp.blogspot.com/-x7Ylv3Y6fvQ/Xulsc41aP1I/AAAAAAAAAFw/g9fr43WIC1UGyLOn0E0lLhAyi2ktCJxuQCLcBGAsYHQ/s1600/whatsapp.webp);

}

.trix-one span {
    color: #333;
    font-size: 14.2px;
    line-height: 2;
    display: inline-block;
    max-width: calc(100% - 66px);
    padding: 7px 14px 6px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 12px 0px 0px;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    touch-action: auto;
    bottom: 0px;
    left: 0px;
    right: auto;
    margin-right: 20px;
    border-radius: 10px 0px 9px;
    transition: opacity 0.3s ease 0s, margin 0.3s ease 0s, visibility 0.3s ease 0s;
}
.trix-one span::before {

    content: &quot;&quot;;
width:0;height:0;position:absolute;top:0;left:100%;border-width:7px;border-style:solid;border-color:#fff transparent transparent #fff;display:block;

}
.caja-chat .mensaje-whatsapp{display:flex}#go-number{display:none}
a.close-chat {
    position: absolute;
    top: 5px;
    left: 15px;
    color: #000;
    font-size: 23px;
}
@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}
@media screen and (max-width:480px){#css-whatsapp{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:0.1s;transform:scale(1);opacity:1}
.my-info-chat-2 {
    display: flex;
}
.my-info-chat-2 .box-6 {
    margin-right: 20px;
}
.my-info-chat-2 .box-7 {
    width: 250px;
    line-height: 1.6;
}
.fr-user {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.4);
}
.red {
    background-color: #f44336;
}
.pink {
    background-color: #e91e63;
}
.purple {
    background-color: #9c27b0;
}
.deep-purple {
    background-color: #673ab7;
}
.indigo {
    background-color: #3f51b5;
}
.blue {
    background-color: #2196f3;
}
.light-blue {
    background-color: #03a9f4;
}
.cyan {
    background-color: #00bcd4;
}
.teal {
    background-color: #009688;
}
.green {
    background-color: #4caf50;
}
.light-green {
    background-color: #8bc34a;
}
.lime {
    background-color: #cddc39;
}
.yellow {
    background-color: #ffeb3b;
}
.amber {
    background-color: #ffc107;
}
.orange {
    background-color: #ff9800;
}
.deep-orange {
    background-color: #ff5722;
}
.brown {
    background-color: #795548;
}
.grey {
    background-color: #9e9e9e;
}
.grey-darken-4 {
    background-color: #212121;
}
.black {
    background-color: #000000;
}
.blue-grey {
    background-color: #607d8b;
}  
</style>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/> 
<script type='text/javascript'>
//<![CDATA[
$(document).on("click","#send-to-whatsapp",function(){var a=document.getElementById("chat-input");if(""!=a.value){var b=$("#go-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",".adb-dual",function(){document.getElementById("go-number").innerHTML=$(this).children(".number-whatsapp").text(),$(".caja-chat,.get-new").addClass("show").removeClass("hide"),$(".box-chat,.adb-home-chat").addClass("hide").removeClass("show"),document.getElementById("box-w-r").innerHTML=$(this).children(".my-info-chat").children(".adb-base-b").text(),document.getElementById("box-label-w").innerHTML=$(this).children(".my-info-chat").children(".adb-base").text()}),$(document).on("click",".close-chat",function(){$("#css-whatsapp").addClass("hide").removeClass("show")}),$(document).on("click",".adb-whatsapp",function(){$("#css-whatsapp").addClass("show").removeClass("hide")});
//]]>
</script>

تخصيص الكود

قم بالتعديل على جميع النصوص المشار إليها باللون pink وفق أختيارك.

من المهم التعديل على رقم الهاتف المشار إليه باللون الأحمر برقم هاتفك بالرمز الدولي حتى يعمل بشكل صحيح مثلا رمز السعودية 00966 ثم باقي الرقم عليك إدخال رمز دولتك وحذف الصفر الأول وإدخال باقي رقم هاتفك الذي يتوفرعلى واتساب 0096655321222323

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

غير رابط الصور المشار إليها باللون الأصفر بأي صورة مرغوب فيها.

https://1.bp.blogspot.com/-BxGKrm0dRmY/Xu2wOHnU3lI/AAAAAAABO1c/AoVQhJL20RkR5x9v3rXZ0KPDckewxf1xACLcBGAsYHQ/s80-c /mhmd.jpg

بعد إضافة الصورة الجديدة عدل على الحجم من خلال رابط الصورة بإضافة s80-c بدلًا من s1600.

لتغيير اللون الإفتراضي للأيقونة عدل على الكود.


<div class='adb-header green'>

بتغيير إسم اللون green بإسم لون آخر من القائمة:

red
pink
purple
deep-purple
indigo
blue
light-blue
cyan
teal
green
light-green
lime
yellow
amber
orange
deep-orange
brown
grey
grey-darken-4
black
blue-grey

إلى هنا نكون قد إنتهينا من شرح هذا الكود الجميل والسلام عليكم ورحمة الله وبركاته

باركودالتدوينة

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

الاقسام

اضافات بلوجر

COMMENTS

BLOGGER

من فضلك حبا وليس امر اترك تعليقك

FACEBOOK

DISQUS

من انا$hide=mobile

wesam elngar

السلام عليكم اسمي وسام النجار من مصر مطور ويب ومصمم جرافيك متخصص في الوقت الحالي برمجة بلوجر بشكل عام, لدي خبره كبيره في التعامل مع بلوجر, أللغات التي أتعامل معها HTML CSS JS JQ خدمات التصميم متوقفة في الوقت الحالي, بنسبة إلى بلوجر لو لديك مشكله في قالب مدونتك أو لديك قالب تريد تعريبه أو تريد برمجة قالب لمدونتك من الصفر أو تريد تجهيز SEO أوحل مشاكله فنحن في خدمتك في أي وقت وأسعار مناسبة إن شاء الله.

Wesam

$show=home$type=slider$meta=0$snip=0$hide=mobile$rm=0$cate=20$source=random-posts

$show=home$type=three$author=hide$hide=mobile$comment=hide$rm=hide$count=3$source=random-posts

$type=ticker$hide=mobile$cols=4

افلام هندية$type=sticky$count=4$show=home

$show=home

|روبوتات_$type=slider$source=random-posts$snippet=hide$cate=20$show=home

|اضافات بلوجر$type=three$m=0$rm=0$h=400$c=3$show=home

$show=home