عروض مركز بلوجر

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

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

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


أضف الكود التالي في آداة 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="*"/>

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


10تعليقات

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

  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>
      مع استبدال رمز # برابط صورة يعني استخدم صورة أيقونة بدلا من الخط

      حذف
  5. أستاذ عمرو زر الواتساب يظهر في شكل مربعات

    ردحذف
    الردود
    1. فقط اختلاف اصدار الخط لديك الأيقونات ستجد رموزها في الخط الاحدث هنا
      https://fontawesome.com/search?m=free&o=r

      حذف