شاشة الإنتظار

لغة القالب

الأدوات

الصفحات

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

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. حبيبي الغالي , وانا دائما انتظر دعمكم وتشجيعكم , سعيد بمرورك أخي منير

      حذف

عدد المواضيع