لغة القالب

أبسط طريقة لإضافة زر الإتصال بالهاتف أو زر الواتساب لمدونات بلوجر

Admin
السبت, أغسطس 27, 2022

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

لكن لست هنا لوضع أكواد جافا سكريبت معقده أو شئ يسبب تعارض مع قالبك نحتاج أبسط شئ ممكن ويؤدي الغرض


أضف الكود التالي في آداة HTML/JavaScript

معاينة الكود ستجدها على اليسار طبعا الكود لن يعمل في المعاينة لأنني لم أضيف أرقام 😂

<style>

#PhoneWhats{position:fixed;width:48px;left:20px;bottom:10%;z-index: 5;}

#PhoneWhats a{display:block;width:48px;height:48px;text-align:center;text-decoration:none;margin-bottom:10px!important;border-radius:100%;color:#fff;font-size:24px;line-height:48px;transition:all .4s ease;padding:0!important;}

#PhoneWhats a img {width: 100% !important;height: 100% !important;padding: 5px !important;box-sizing: border-box;}

#PhoneWhats .fa-phone{background-color:#0492d7;}

#PhoneWhats .fa-whatsapp{background-color:#28b031;}

#PhoneWhats a:hover{background-color:#000!important;}

</style>

<div id="PhoneWhats">

<a class="fa fa-phone" href="tel:*"></a>

<a class="fa fa-whatsapp" href="https://wa.me/*" target="_blank" rel="nofollow"></a>

</div>

السطر الأزرق للهاتف والاخضر للواتساب يمكنك أن تبقي على كليهما او تستخدم واحد فقط وتحذف الآخر

استبدل رمز * في كل سطر برقم الهاتف مضاف له مفتاح الدولة 

خيارت إضافية

يمكنك أن تستخدم نفس مبدأ الروابط لتضيفها كروابط عادية بدون أيقونات مثال

<a href="tel:*">الهاتف</a>

<a href="https://wa.me/*" target="_blank" rel="nofollow">واتساب</a>

كذلك يمكن أن تضيف صور بدلاً من الأيقونات المعتمدة على الخط FontAwesome

يعني بدلا من كلمة الهاتف تضيف كود صورة

<img src="*"/>

تستبدل * برابط الصورة


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

  1. جزاك الله خير اخ عمرو علي مجهودك المتميز.

    فشكرآ لك

    ردحذف
  2. أشكرك أخي الكريم على الدعم والتشجيع
    وجزاك الله بالمثل ❤

    ردحذف
  3. جزاك الله خيرا أستاذ
    إستمر مواضيعك ومشاركاتك قيمة جدا تستحق منا التشجيع

    ردحذف
    الردود
    1. حبيبي الغالي , وانا دائما انتظر دعمكم وتشجيعكم , سعيد بمرورك أخي منير

      حذف
  4. كا العادة مميز دائما مستر عمرو كود رائع واضافة خفيفة جدا على القالب ولاكن للاسف الايقونات لا تظهر ويظهر بدلا منها مربعات بيضاء بالرغم من اضافة خط FontAwesome بالقالب ! فا الحل؟

    ردحذف
    الردود
    1. شكراً لك أستاذ محمد بالنسبة لما ذكرته حضرتك
      ممكن تجرب التالي
      هذا شكل الكود الطبيعي
      <a class="fa fa-phone" href="tel:*"></a>
      استبدله بهذا
      <a class="fa fa-phone" href="tel:*"><img src="#"/></a>
      مع استبدال رمز # برابط صورة يعني استخدم صورة أيقونة بدلا من الخط

      حذف

عدد المواضيع