مرحبا من جديد هل تبحث عن وسيلة لتسهيل تواصل زوار مدونتك معك؟ إذا كنت تفكر في إضافة زر Telegram عائم ومتحرك على موقعك، فأنت في المكان الصحيح. في هذا المقال، سنشرح لك خطوة بخطوة كيفية إضافة زر تيليجرام عائم ومتحرك إلى مدونة بلوجر الخاصة بك، مما يمنح زوارك تجربة مميزة وسهولة في الوصول إليك.
كيفية إضافة زر Telegram عائم في مدونتك بطريقة سهلة واحترافية |
ما أهمية زر تيليجرام العائم؟
زر Telegram العائم ليس مجرد إضافة جمالية لموقعك، بل هو وسيلة عملية تتيح للمستخدمين التواصل معك بسهولة وسرعة عبر تطبيق تيليجرام الشهير. هذه الميزة تزيد من تفاعل الزوار مع مدونتك وتعزز فرص بقائهم على اتصال دائم للحصول على التحديثات والمعلومات التي تقدمها.
كيفية إنشاء زر تيليجرام عائم بخطوات بسيطة
ستحتاج إلى كود مخصص لإنشاء الزر العائم. هذا الكود يتضمن تصميمًا متحركًا يظهر بشكل جذاب للمستخدمين. يمكنك تخصيص الكود ليتناسب مع تصميم مدونتك.
لإضافة زر تيليجرام عائم إلى مدونتك، اتبع الخطوات التالية:
</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>
</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>
بعد إضافة الكود، تأكد من حفظ التعديلات ثم قم بمعاينة مدونتك للتأكد من ظهور الزر بشكل صحيح.
تخصيص مظهر الزر
يمكنك تعديل لون الزر، حجمه، وموقعه على الشاشة باستخدام الكود. على سبيل المثال، إذا كنت تفضل ظهور الزر في الزاوية السفلية اليمنى، يمكنك ضبط إعدادات الكود بما يناسب ذلك.
فوائد زر تيليجرام العائم
- التواصل الفوري: يوفر للزوار طريقة مباشرة للتحدث معك دون الحاجة للبحث عن معلومات الاتصال.
- زيادة التفاعل: يتيح للزوار فرصة لطرح أسئلتهم أو تقديم ملاحظاتهم بسهولة.
- تحديثات مباشرة: يمكن للمستخدمين الاشتراك للحصول على آخر الأخبار والتحديثات من خلال تيليجرام.
نصائح عند إضافة الزر العائم
- تأكد من أن الزر لا يعيق تجربة المستخدم أثناء التصفح.
- اختر ألوانًا وتصميمًا يتماشى مع هوية مدونتك.
- أضف رسالة ترحيبية أو توضيحًا بجانب الزر ليعرف الزوار الغرض منه.
الأسئلة الشائعة:
1. هل يمكنني استخدام الزر العائم على جميع المدونات؟
نعم، يمكن استخدامه على أي مدونة بلوجر بسهولة.
2. هل يتطلب الأمر خبرة برمجية؟
لا، يمكنك إضافة الزر باستخدام الكود الذي نقدمه دون الحاجة لأي خبرة في البرمجة.
3. هل يمكن تخصيص مظهر الزر؟
بالتأكيد، يمكنك تغيير الألوان والحجم والموقع عبر تعديل الكود.
4. هل الزر العائم يؤثر على سرعة الموقع؟
إذا تم استخدام كود خفيف ومنظم، فلن يكون هناك تأثير كبير على سرعة مدونتك.
5. هل يمكنني إضافة أزرار أخرى بجانب تيليجرام؟
نعم، يمكنك إضافة أزرار أخرى مثل واتساب أو فيسبوك بنفس الطريقة.
ختامًا: إضافة زر تيليجرام عائم إلى مدونتك هو خطوة رائعة لتحسين تجربة المستخدم وزيادة التفاعل. باتباع الخطوات المذكورة أعلاه، ستتمكن من تقديم وسيلة تواصل مريحة ومميزة لزوارك. إذا كنت تتطلع إلى تحسين مدونتك أكثر، لا تتردد في تجربة ميزات أخرى تعزز من جاذبيتها.
from أصل للمعلوميات https://ift.tt/4mh5ONX
via IFTTT