wesamdev

افلام هندية$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

wesamdev

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

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



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


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



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




من لوحة تحكم مدونتك أنقر على المظهر => انقر على ثلاثة نقاط ثم حدد تعديل 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
إذا كان في قالب مدونتك وأغلب القوالب متوفرة على هذه الإصدارات من الخط الممتاز الخاص بالإيقونات وأجاكس قم بحذفهم من الكود فقط إذا كان قالب مدونتك يتوفر على أحد من هذه الإصدارت أي إصدار يدعمه.


<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>  

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

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
إلى هنا نكون قد إنتهينا من شرح هذا الكود الجميل والسلام عليكم ورحمة الله وبركاته

COMMENTS

BLOGGER
الاسم

اخبار,45,اداة للكمبيوتر,7,اضافات بلوجر,88,افلام اجنبي,9,افلام روسية,32,افلام عربي مترجمة الي الروسية,1,افلام قديمة,2,افلام هندي,8,البرمجة,8,الجديد في التكنولوجيا,46,العاب,9,النمر,7,اليوتيوب,16,اندرويد,15,اندرويد استوديو,3,برامج كمبيوتر,11,بلوجر,8,تركيا,6,تصميم,3,تطبيقات,20,جافاسكريبت,3,حوادث,5,حول العالم,65,حيوانات,25,خلفيات,1,دروس HTML| بالعربية,2,روبوتات,8,روسيا,60,سياحة,4,سيارات,12,سياسة,16,شروحات,34,شريط الاخبار,1,صحتي,2,طائرات,22,فن,35,قناة الوعي نور,4,قناة قعدة تاريخ,8,قوالب بلوجر,3,كتب الكترونية,7,مالتي ميديا,6,متصفح,2,محليات,4,مسلسل لعبة الحبار,1,مسلسلات اجنبية,2,مسلسلات رمضان 2022,1,مسلسلات رمضان 2120,1,مصر والعرب,1,معدات حربية,34,معدات زراعية,6,مقالات,99,مواصلات النقل,1,مواقع للتصميم,14,وثائقي,14,وسوم بلوجر,2,ويندوز,15,Antivirus,3,Button,1,c++,1,css,37,HTML,11,wesam,2,
rtl
item
Wesam: طريقة إضافة زر الدردشة واتساب في بلوجر
طريقة إضافة زر الدردشة واتساب في بلوجر
يمكننا الآن إضافة زر التواصل عبر واتساب بسهولة في مدونات بلوجر بطريقة إحترافية يتميز الزر بتوافقه مع الهاتف والكمبيوتر ويمكن إضافته بخطوات سهلة.
https://1.bp.blogspot.com/-4Cc9nJyREdY/X7giJGxfOMI/AAAAAAAATQk/D4sFeYm7It43YebWw96PTN-X6mLVt8lxwCLcBGAsYHQ/s16000/20201120_230644.jpg
https://1.bp.blogspot.com/-4Cc9nJyREdY/X7giJGxfOMI/AAAAAAAATQk/D4sFeYm7It43YebWw96PTN-X6mLVt8lxwCLcBGAsYHQ/s72-c/20201120_230644.jpg
Wesam
https://www.wesamdev.com/2020/11/blog-post_94.html
https://www.wesamdev.com/
https://www.wesamdev.com/
https://www.wesamdev.com/2020/11/blog-post_94.html
true
1297279864306511161
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content