|
| كيف تضيف اداة لزري التواصل واتساب و مسنجر؟ |
السلام عليكم ورحمة الله وبركاته
مرحباً! اتمنى ان تكون بخير؛
صِوان محور الأبعاد الثلاث XYZ
طبعا ان كنت منشئ محتوى سواء تدوين او سمعي بصري او هما معاً، بلا شك ستحتاج بعض الاضافات من شأنها ان تكون عبارة عن قطع ويدجت مكملة، حاجتها تعتبر كمالية و منها ما ستحتاجه بإلحاح، هاته القطع فالغالب تشمل ترميز يكون عبارة عن html, css, js.
كيف اضيف زر مسنجر و واتس اب؟
لا تشغل بالك فالمسالة ليست معقدة و لن تحتاج لدارية موسعة عن لغات البرمجة هاته كل ما ستحتاجه هو متابعة الدرس والقراءة المتأنية و تتطرق لكل فقرة على حدة لتفهم هذا الدرس الذي سيوضح طريقة إضافة زر عائم تفاعلي للواتساب و الماسنجر لموقعك.
قبلا ذلك انوهك لان تشاهد معاينة حية لشكل العرض لهذه الأزرار تفضل في زيارة
بسلاسة ندخل في صلب الموضوع انت الآن و من خلال العنوان عرفت القطعة التي سنظيفها هي أزرار تفاعلية لوسائل التواصل، اولا تفضل بتعليق لتخبرني المصدر الذي قدمت منه هل هو من خلال مواقع التواصل الاجتماعي أو مباشرة من محرك البحث جوجل. ان كنت تبحث في محرك جوجل و وصلت الى هنا فانت في المكان الصحيح اما اذا صادفت رابط هذا الموضوع في احدى المواقع، سأخبرك إن اهمية ازرار الاتصال الاضافية ستسهل على زوارك الوصول اليك مباشرة و الاستفسار عن اي خلاصة أو فكرة تطرقت اليها في تدوينتك، و طبعا ان كنت تمتلك متجراً الكتروني فهذه القطعة مهمة لك جدا لأنها ستكون البوابة السريعة لزبائنك في الاتصال بك و ستتمكن من الرد بسرعة من خلال المنصة التي تتواجد بها بشكل مطول، و طبعا حتى الزبناء سيكون هذا جيد لهم جدا لانه معروف ان افضل وسائل وطرق التواصل الأشخاص تكون عن طريق فيسبوك و واتساب و تلجرام بشكل كبير.
تعد قطع ويدچت شئ اختياري لا ضرر من اضافتها فقط يلزم مراعات عدد القطع المضافة لموقع لتجنب فقدان جانب البساطة فعرض المحتوى، ربما تضيف جمالية لكنها تترك بعض التشويش على النقط المهمة المراد ايصالها ضمن المقال
وظيفة القطعة محدودة توجد امكانيات لاضافة زر احترافي لكن تتطلب سكريبتات لذلك هاته القطعة تعتمد بشكل اساسي على الارتباط المباشر فعلا سبيل المثال فتح واتساب على الهاتف اسرع من فتحه على جهاز الحاسوب
الى اي درجة القطعة متوافقة مع بلوجر؟
القطعة التي نتكلم عليها تهم واتس اب و ماسنجر و يمكنك من اضافة ازرار اخرى باستعمال نفس الترميز مع تغييرات بسيطة فقط سنتطرق اليها. من المعلوم ان العديد من القطع تكون مكروهة اذا كانت تستخدم سكريبتات لانه من المعلوم ان كل السكريبتات التي تحتاج اضافتها بين سدي الوسم head تجعل الموقع في عناء مع السرعة و التحميل و الاستجابة الى درجة سوء التقييم من الزوار وهذا يضر بترتيب الموقع و صداقتها مع محركات البحث بما يعنيه الأضرار بالسيو. لكن هاته القطعة لن تحتاج لاي سكريبت كل الأمر عبارة عن رمز css و html و لن تجد صعوبة في إضافتها كل ما عليك هو نسخ الكود من صندوق الاكواد اسفله.
<style>
.rawanbut{bottom:140px;left:28px;position:fixed;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(60deg,#3870F8 0,#ff00ff 100%);height:30px;width:30px;z-index:40;border-radius:100%;animation:rawanbut-noti 2s 0s ease-out infinite}
.rawanbut svg{fill:#fff;width:22px;height:22px;vertical-align:middle}
@keyframes rawanbut-noti{0%{box-shadow:0 0 0 0 #ff9eff}65%{box-shadow:0 0 0 10px #7955bd}100%{box-shadow:0 0 0 0 #3870F8}}
.rawanrung{animation:rawan-rung-lu 2s ease infinite}
@-webkit-keyframes rawan-rung-lu{0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}}
</style>
<a class='rawanbut' onclick='window.scrollTo({top: 0});' href="https://m.me/si1xyz" style='text-decoration:none' target='_blank' title='noti'>
<svg class='siwanerung' viewbox='0 0 32 32'><g><path d='M16,3C8.83,3,3,8.38,3,15a11.26,11.26,0,0,0,2.17,6.63A1,1,0,1,0,6.8,20.46,9.23,9.23,0,0,1,5,15C5,9.49,9.93,5,16,5S27,9.49,27,15,22.07,25,16,25a11.92,11.92,0,0,1-3.36-.48,1,1,0,0,0-.88.16L10,26V23.92a1,1,0,0,0-2,0V28a1,1,0,0,0,.55.89,1,1,0,0,0,1-.09l3-2.23A13.66,13.66,0,0,0,16,27c7.17,0,13-5.38,13-12S23.17,3,16,3Z'></path><path d='M8.45,19.89l5.35-2.67L15.59,19a2,2,0,0,0,2.82,0l6.3-6.29a1,1,0,0,0-1.16-1.6L18.2,13.78,16.41,12a2,2,0,0,0-2.82,0l-6.3,6.29A1,1,0,0,0,8,20,.93.93,0,0,0,8.45,19.89ZM15,13.41l2.29,2.3,0,0a.62.62,0,0,0,.17.11.51.51,0,0,0,.16.09l.17,0a.68.68,0,0,0,.2,0,1,1,0,0,0,.17,0,.56.56,0,0,0,.21-.06h0l.49-.24L17,17.59l-2.29-2.3,0,0a1.22,1.22,0,0,0-.19-.12.71.71,0,0,0-.15-.08l-.18,0A.65.65,0,0,0,14,15a1,1,0,0,0-.17,0,.56.56,0,0,0-.21.06h0l-.49.24Z'></path></g></svg>
</a>
<style>
.siwanebut{bottom:190px;left:28px;position:fixed;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(-60deg,#25D366 0,#25D366 100%);height:30px;width:30px;z-index:40;border-radius:100%;animation:siwanebut-noti 2s 0s ease-out infinite}
.siwanebut svg{fill:#fff;width:22px;height:22px;vertical-align:middle}
@keyframes siwanebut-noti{0%{box-shadow:0 0 0 0 #9cff9c}65%{box-shadow:0 0 0 10px #d4fffb}100%{box-shadow:0 0 0 0 #9cff9c}}
.siwanerung{animation:siwane-rung-lu 2s ease infinite}
@-webkit-keyframes siwane-rung-lu{0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}}
</style>
<a class='siwanebut' href="https://api.whatsapp.com/send?phone=212722464243" style='text-decoration:none' target='_blank' title='noti'>
<svg class='siwanerung' viewbox='0 0 32 32'><g><path d='M16,3A13,13,0,0,0,4.53,22.13L3,27.74a1,1,0,0,0,.27,1A1,1,0,0,0,4,29a.84.84,0,0,0,.27,0l5.91-1.65a1,1,0,0,0-.53-1.93L5.42,26.56l1.15-4.3a1,1,0,0,0-.1-.76A11,11,0,1,1,16,27a11.23,11.23,0,0,1-1.84-.15,1,1,0,0,0-1.15.82,1,1,0,0,0,.82,1.15A13,13,0,1,0,16,3Z'/><path d='M15,11.21l-1.16-1.6a2.06,2.06,0,0,0-1.5-.84,2.08,2.08,0,0,0-1.62.6l-1.2,1.2a2.81,2.81,0,0,0-.8,2.08c0,1.77,1.36,4,4,6.6,3.09,3,5.23,4,6.69,4a2.7,2.7,0,0,0,2-.81l1.2-1.2a2,2,0,0,0-.24-3.11L20.8,17a2.09,2.09,0,0,0-1.83-.3l-1.49.47a.53.53,0,0,1-.26-.09,11.42,11.42,0,0,1-2.35-2.26.31.31,0,0,1,0-.11c.13-.44.35-1.15.5-1.64A2,2,0,0,0,15,11.21Zm1.29,7.63a2.33,2.33,0,0,0,1.75.2l1.54-.46,1.61,1.25L20,21c-.48.47-2.25.33-5.86-3.21-3-2.91-3.41-4.5-3.41-5.18A.89.89,0,0,1,11,12l1.28-1.19,1.18,1.65c-.16.49-.39,1.22-.51,1.65A2.12,2.12,0,0,0,13,15.51,11.24,11.24,0,0,0,16.33,18.84Z'/></path></path></g></svg>
</a>
تعديل الكود
نسخت الكود ستحتاج لتطبيق محرر النصوص احترافي انصحك بتطبيق QuickEditor+ هو الانسب ان كنت تستعمل الهاتف اندرويد سيناسب حاجتك لبعض التعديلات البسيطة على الكود فقط تغير الاشياء التي تظهر مميزة في صندوق الأكواد مثلا رقم الهاتف لزر الواتساب ادرج رقمك الخاص.
المشاركات ذات الصلة
التعديل الثاني سيكون لرابط دردشة ماسنجر الخاصة بك هنا تغير اليوزر si1xyz باليوزر الخاص بحسابك فيسبوك او بصفحتك على فيسبوك.
باقي التخصيصات هي على حسب الرغبة لكن ساشرح لتوضيح، بامكانك تغير ظهور الأزرار والمكان الذي يناسب موقعك طبعا هي أزرار عائمة و متحركة من شأنها أن تكون اسفل واجهة الموقع و المكان المحدد أما في اليمين او اليسار.
هنا سيبقى الاختيار لك.
طريقة التركيب الرمز بعد تعديله
الان ستذهب لمدونتك في لوحة تحكم بلوجر و اتبع هاته الخطوات:
- ادخل على التخطيط
- في اي مكان اختر اضافة أداة
- اختر html/JavaScript من القائمة
- الصق الكود الذي نسخته
مبروك عليك اضافة القطعة
كيف اضيف زر اخر؟
طريقة اضافة زر آخر لمنصة معينة انت تستخدمها المسألة سهلة مثلا لنقل انك تحتاج لاضافة زر تلجرام. الطريقة سهلة جدا كل ما ستحتاج إليه هو ايقونة تلچرام بصيغة SVG و اضافة الرمز في مكان رمز ماسنجر او واتساب و يمكنك اضافة الازرار 3 معا لا مشكلة فكما وضحت لك اعلاه طريقة التعديل و ما تحتاج لتغييره ليتناسب مع حاجتك بالنسبة لتلچرام كل ما ستحتاجه غير الايقونة بصيغة SVG هو كود لون المستعمل في تلجرام و رابط قناتك او مجموعتك او حسابك حتى. طبعا لإضافة زر تلجرام لزري واتساب و ماسنجر ايضا ستحتاج لتغير مكان ظهور الزر حتى يتسنى للزائر ملاحظته بشكل مثالي. اذا وجهتك اي صعوبة في فهم الدرس تفضل بطرح سؤالك في تعليق او راسلني سيسعدني مساعدتك.
الحصيلة
رأيت طريقة اضافة هذه القطعة الامر سهل جدا يمكنك اختبار الزر في موقعك، ساكون سعيد بمشاركتك لهذا الدرس مع اصدقائك و أيضاً يمكنك مشاركة الأكواد على مدونتك ايضاً فقط انوه انه يتوجب ذكر المصدر للحفاظ على الجهد و حقوق الفكرة.
المصدر:
SiwaneXYZ
