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

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

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

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

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