يحتاج الكثير من أصحاب المواقع إلي إضافة زر عائم علي مدونة بلوجر سواء أكان زر اتصال عائم، أو كان الزر يؤدي إلي إجراء تقني آخر.
 |
| إضافة زر عائم |
تعطي إضافة زر عائم علي موقعك في بلوجر، فكرة إحترافية عن الموقع كما أنها تحسن تجربة المستخدم بشكل كبير، فتسهل إتخاذ الإجراءات والتنقل في الموقع.
طريقة إضافة زر عائم إلي بلوجر.
إن إضافة زر عائم علي مدونتك في بلوجر بشكل عام ليس شيئا صعباً، لكن قد يراه المدونون الجدد غير ذي العلم بالبرمجة وأكوادها أمراً معقداً، ولذلك فنحن هنا.
يعتمد إنشاء زر عائم في الأساس علي لغة البرمجة Java Script، وهي لغة من أسهل لغات البرمجة الموجودة، وبالتلعيمات التي سنقدمها لك لن تكون في حاجة إلي تعلم اللغة كاملة من أجل إضافة الأزرار العائمة.
دعنا نذكر مثالاًَ ونقوم بشرحه، قم بالنظر إلي الكود البرمجي التالي.
الكود البرمجي السابق هو كود مسئول عن إنشاء زر ماسنجر عائم ومتحرك، دعنا نقوم بشرحه وشرح التعديل عليه.
من <style> إلي </style> هو الكود البرمجي المسئول عن شكل وحركة الزر ومكانه:
- يمكنك من خلال bottom:140px;left:28px;position التحكم في مكان الزر، بذكر إحداثيات المكان، واختيار يسار ام يمين كما تري فالإفتراضي في الكود هو اليسار Left.
- يمكنك من خلال height:30px;width:30px في السطر الثالث تغيير حجم الزر من خلال تغيير أبعاده، عرضه وارتفاعه.
- ولتغيير لوني التدريج في الزر سيكون من خلال تعديل الألوان من linear-gradient(60deg,#3870F8 0,#ff00ff في السطر الثاني.
- يمكنك تغيير ألوان نبض الزر أيضاً من {0%{box-shadow:0 0 0 0 #ff9eff}65%{box-shadow:0 0 0 10px #7955bd}100%{box-shadow:0 0 0 0 #3870F8}} في السطر السابع.
- وفي السطر السادس يوجد svg{fill:#fff;width:22px;height:22px الذي يمكنك من خلاله تعديل حجم الأيقونة الداخلية للزر.
ويشير <a class= بعد ذلك إلي الأمر الذي سينفذ عند الضغط علي الزر والمذكور هنا انه عند الضغط علي الزر سيتم الإنتقال إلي الرابط الموجود بعد href=
والآن كيف تغير أيقونة الزر العائم؟ هذه هي مسئولية الكود svg class= وهو ما يوضع بعده الصورة بصيغة SVG البرمجية.
كيفية إضافة زر اتصال عائم إلي مدونة بلوجر؟
يتسائل بعض من أصحاب المواقع عن طريقة إضافة زر اتصال عائم إلي بلوجر، وإضافة هذا الزر سيكون بالكيفية السالف ذكرها مع تغيير الأكواد البرمجية اللازمة.
سنحتاج إلي تغيير كود الأيقونة الداخلية للزر لتصبح تناسب زر الإتصال، كما سيتوجب علينا وضع الكود البرمجي الوظيفي للاتصال.
لتكون الصورة النهائية للزر كما هو موجود في صندوق الأكواد تحت العلامة "كود زر اتصال عائم".
كيفية إضافة زر واتساب عائم إلي المدونة؟
كالكودين السابقين إن أردت إضافة زر للمراسلة علي الواتساب في موقعك الإلكتروني سيتوجب علينا إجراء بعض التعديلات، كتغيير اللون، تغيير الأيقونة، وتغيير الكود الوظيفي بالطبع.
بعد إجراء التعديلات اللازمة سوف يصبح الكود بتعديلاتنا في فريق عمل صفارة كما هو في صندوق الأكواد تحت العلامة الأخيرة.
بعد قراءة المقال كاملاً من المفترض ان تكون تعلمت طريقة إضافة زر عائم إلي مدونتك علي بلوجر بكل سهولة سواء أكان زر إتصال او غيره، معتمداً علي بعض المعلومات البسيطة التي قدمناها لك.
لا تنسي اذا قمت بإضافة أكثر من زر عائم في نفس الوقت أن تقوم يوضعهم في أماكن مختلفة حتي لا يحدث خطأ برمجي.
