كيفية إضافة زر Telegram عائم في مدونتك بطريقة سهلة واحترافية

مرحبا من جديد هل تبحث عن وسيلة لتسهيل تواصل زوار مدونتك معك؟ إذا كنت تفكر في إضافة زر Telegram عائم ومتحرك على موقعك، فأنت في المكان الصحيح. في هذا المقال، سنشرح لك خطوة بخطوة كيفية إضافة زر تيليجرام عائم ومتحرك إلى مدونة بلوجر الخاصة بك، مما يمنح زوارك تجربة مميزة وسهولة في الوصول إليك.

ما أهمية زر تيليجرام العائم؟

زر Telegram العائم ليس مجرد إضافة جمالية لموقعك، بل هو وسيلة عملية تتيح للمستخدمين التواصل معك بسهولة وسرعة عبر تطبيق تيليجرام الشهير. هذه الميزة تزيد من تفاعل الزوار مع مدونتك وتعزز فرص بقائهم على اتصال دائم للحصول على التحديثات والمعلومات التي تقدمها.

كيفية إنشاء زر تيليجرام عائم بخطوات بسيطة

ستحتاج إلى كود مخصص لإنشاء الزر العائم. هذا الكود يتضمن تصميمًا متحركًا يظهر بشكل جذاب للمستخدمين. يمكنك تخصيص الكود ليتناسب مع تصميم مدونتك.

لإضافة زر تيليجرام عائم إلى مدونتك، اتبع الخطوات التالية:

1. اذهب إلى مدونة بلوجر.
2. انتقل إلى تحرير HTML.
3. الآن ابحث عن الكود التالي.
4. الآن قم بلصق الكود التالي في أسفل العلامة </footer>.

   ملاحظة: لنسخ الاكواد ادناء أنقر مرتين حتى يتم النسخ.

   <a class='telegram-float' href='https://t.me/teckyaaryan' target='_blank'>
   		<div class='telegram-icon'>
   			<svg viewBox='0 0 64 64'><path d='M56.4,8.2l-51.2,20c-1.7,0.6-1.6,3,0.1,3.5l9.7,2.9c2.1,0.6,3.8,2.2,4.4,4.3l3.8,12.1c0.5,1.6,2.5,2.1,3.7,0.9 l5.2-5.3c0.9-0.9,2.2-1,3.2-0.3l11.5,8.4c1.6,1.2,3.9,0.3,4.3-1.7l8.7-41.8C60.4,9.1,58.4,7.4,56.4,8.2z M50,17.4L29.4,35.6 c-1.1,1-1.9,2.4-2,3.9c-0.2,1.5-2.3,1.7-2.8,0.3l-0.9-3c-0.7-2.2,0.2-4.5,2.1-5.7l23.5-14.6C49.9,16.1,50.5,16.9,50,17.4z'/></svg>
   </div>
   </a>

   يجب عليك تغيب رابط تيليجرام الشخصي الخاص بك في الكود أعلى بلون الأحمر.

5. الآن قم بإضافة كود CSS ولصقه فوق العلامة </head>.

   <style>
   .telegram-float {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 1000;
   }
   .telegram-icon {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background-color: #0088cc;
     display: flex;
     justify-content: center;
     align-items: center;
     animation-name: pulse;
   	animation-duration: 1.5s;
   	animation-timing-function: ease-out;
   	animation-iteration-count: infinite;
   }
         @keyframes pulse {
   	0% {
   		box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.5);
   	}
   	80% {
   		box-shadow: 0 0 0 14px rgba(0, 136, 204, 0);
   	}
   }
   .telegram-icon svg {
     fill: #fff;
     width: 30px;
     height: 30px;
   }
   </style>

6. الآن احفظ كود HTML.

بعد إضافة الكود، تأكد من حفظ التعديلات ثم قم بمعاينة مدونتك للتأكد من ظهور الزر بشكل صحيح.

تخصيص مظهر الزر

يمكنك تعديل لون الزر، حجمه، وموقعه على الشاشة باستخدام الكود. على سبيل المثال، إذا كنت تفضل ظهور الزر في الزاوية السفلية اليمنى، يمكنك ضبط إعدادات الكود بما يناسب ذلك.

فوائد زر تيليجرام العائم

• التواصل الفوري: يوفر للزوار طريقة مباشرة للتحدث معك دون الحاجة للبحث عن معلومات الاتصال.
• زيادة التفاعل: يتيح للزوار فرصة لطرح أسئلتهم أو تقديم ملاحظاتهم بسهولة.
• تحديثات مباشرة: يمكن للمستخدمين الاشتراك للحصول على آخر الأخبار والتحديثات من خلال تيليجرام.

نصائح عند إضافة الزر العائم

• تأكد من أن الزر لا يعيق تجربة المستخدم أثناء التصفح.
• اختر ألوانًا وتصميمًا يتماشى مع هوية مدونتك.
• أضف رسالة ترحيبية أو توضيحًا بجانب الزر ليعرف الزوار الغرض منه.

الخاتمة

إضافة زر تيليجرام عائم إلى مدونتك هو خطوة رائعة لتحسين تجربة المستخدم وزيادة التفاعل. باتباع الخطوات المذكورة أعلاه، ستتمكن من تقديم وسيلة تواصل مريحة ومميزة لزوارك.

إذا كنت تتطلع إلى تحسين مدونتك أكثر، لا تتردد في تجربة ميزات أخرى تعزز من جاذبيتها.

الاسالة شائعة

هل يمكنني استخدام الزر العائم على جميع المدونات؟

نعم، يمكن استخدامه على أي مدونة بلوجر بسهولة.

هل يتطلب الأمر خبرة برمجية؟

لا، يمكنك إضافة الزر باستخدام الكود الذي نقدمه دون الحاجة لأي خبرة في البرمجة.

هل يمكن تخصيص مظهر الزر؟

بالتأكيد، يمكنك تغيير الألوان والحجم والموقع عبر تعديل الكود.

هل الزر العائم يؤثر على سرعة الموقع؟

إذا تم استخدام كود خفيف ومنظم، فلن يكون هناك تأثير كبير على سرعة مدونتك.

هل يمكنني إضافة أزرار أخرى بجانب تيليجرام؟

نعم، يمكنك إضافة أزرار أخرى مثل واتساب أو فيسبوك بنفس الطريقة.

ولا تنس الاشتراك في النشرة البريدية ليصلك كل جديد حول التدوين، أدوات الذكاء الاصطناعي، والربح من المحتوى.

أصل للمعلوميات

المصدر:
www.asltk1.com

وفي النهاية!

يسعدنا أنك وصلت إلى نهاية هذا الدليل حول كيفية إضافة زر Telegram عائم في مدونتك بطريقة سهلة واحترافية، والذي حرصنا فيه على تقديم شرح مفصل خطوة بخطوة. إذا وجدت المحتوى مفيداً، فلا تبخل بمشاركته مع أصدقائك، ولا تنسى متابعة مدونتنا لاكتشاف المزيد من الشروحات والأدوات.

تنويه!

المحتوى محمي بموجب قانون DMCA. يمنع نسخ أو إعادة نشر المحتوى دون إذن مسبق.
جميع الحقوق محفوظة © أصل للمعلوميات.