اضافات بلوجر كمبيوتر جرافيك كتب الكترونية CSS ادوات سيو اكواد HTML البرمجة مواقع للتصميم
آخر الأخبار

استكشف في مدونة أوعي وشك عالم الابتكار

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

الصفحة الرئيسية
اضافات بلوجر
css

انشاء زر مواقع التواصل عائم للمدونات

مثل Telegram، Viber، الاتصال الهاتفي، و WhatsApp. كل زر يحتوي على أيقونة مميزة وتأثيرات مرئية عند التحويم (Hover).
wesam elngar
انشاء زر مواقع التواصل عائم للمدونات
اليوم اقدم لكم هذا الكود.هذا الكود يُنشئ مجموعة من الأزرار الثابتة (Floating Buttons) على صفحة الويب، والتي تتيح للمستخدمين الوصول بسرعة إلى خدمات مثل Telegram، Viber، الاتصال الهاتفي، و WhatsApp. كل زر يحتوي على أيقونة مميزة وتأثيرات مرئية عند التحويم (Hover). سأشرح الكود بالتفصيل:

  • الهيكل العام (HTML):

    
    <a href="https://t.me/xazbix" target="_blank" rel="nofollow">
  <span class="telegram-button"></span>
</a>

<a href="viber://chat?number=%2B70000000000" target="_blank" rel="nofollow">
  <span class="viber-button"></span>
</a>

<a href="tel:+70000000000" target="_blank" rel="nofollow">
  <span class="phone-button"></span>
</a>

<a href="https://api.whatsapp.com/send?phone=70000000000" target="_blank" rel="nofollow">
  <span class="whatsapp-button"></span>
</a>

    شرح الكود

    1. كل زر عبارة عن رابط <a> يحتوي على عنصر <span> يمثل الزر.

    2. يتم استخدام target="_blank" لفتح الرابط في نافذة جديدة.

    3. rel="nofollow" يُستخدم لإخبار محركات البحث بعدم متابعة الرابط (غالبًا لأغراض SEO).

    4. كل زر له كلاس Class مختلف يميزه عن الآخر:

      • telegram-button: زر Telegram.

      • viber-button: زر Viber.

      • phone-button: زر الاتصال الهاتفي.

      • whatsapp-button: زر WhatsApp.

  • التنسيق العام للأزرار (CSS):

    كل زر له تنسيق مشابه، لذا سأشرح تنسيق زر واحد (Telegram) كمثال، وسيكون الباقي مشابهًا مع تغيير الألوان والأيقونات.

    Telegram: 1

    
    .telegram-button {
  position: fixed; /* تثبيت الزر في مكانه */
  right: 20px; /* المسافة من اليمين */
  bottom: 20px; /* المسافة من الأسفل */
  transform: translate(-50%, -50%); /* توسيط الزر */
  border-radius: 50%; /* جعل الزر دائريًا */
  width: 60px; /* عرض الزر */
  height: 60px; /* ارتفاع الزر */
  z-index: 9999; /* التأكد من ظهور الزر فوق كل العناصر */
  background-color: #2CA5E0; /* لون خلفية الزر */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg..."); /* أيقونة SVG */
  background-size: 50%; /* حجم الأيقونة */
  background-repeat: no-repeat; /* منع تكرار الأيقونة */
  background-position: 50% 50%; /* توسيط الأيقونة */
}

    شرح الكود

    • position: fixed: يجعل الزر ثابتًا في مكانه حتى عند التمرير.

    • right و bottom: تحدد موقع الزر بالنسبة للزاوية اليمنى السفلية.

    • border-radius: 50%: يجعل الزر دائريًا.

    • background-image: يتم استخدام أيقونة SVG كخلفية للزر.

    • z-index: 9999: يضمن ظهور الزر فوق كل العناصر الأخرى.

  • تأثيرات التحويم Hover Effects

    يحتوي كل زر على تأثيرات مرئية عند التحويم، مثل ظهور موجات حول الزر.

    
    .telegram-button:before,
.telegram-button:after {
  content: " "; /* عناصر وهمية */
  display: block;
  position: absolute;
  border: 1px solid #2CA5E0; /* لون الحدود */
  left: -20px;
  right: -20px;
  top: -20px;
  bottom: -20px;
  border-radius: 50%; /* جعل العناصر دائرية */
  animation: border-animate 1.5s linear infinite; /* تطبيق الحركة */
  opacity: 0; /* إخفاء العناصر بشكل افتراضي */
}

.telegram-button:after {
  animation-delay: .5s; /* تأخير الحركة للعنصر الثاني */
}

@keyframes border-animate {
  0% {
    transform: scale(0.5); /* تصغير الحجم */
    opacity: 0; /* إخفاء العنصر */
  }
  50% {
    opacity: 1; /* إظهار العنصر */
  }
  100% {
    transform: scale(1.2); /* تكبير الحجم */
    opacity: 0; /* إخفاء العنصر */
  }
}

    شرح التأثيرات:

    • يتم استخدام العناصر الوهمية :before و :after لإنشاء موجات حول الزر.

    • animation: يتم تطبيق حركة border-animate على العناصر الوهمية.

    • @keyframes border-animate: تحدد الحركة، حيث تبدأ العناصر صغيرة ومخفية، ثم تكبر وتظهر، ثم تعود للاختفاء.

  • الأزرار الأخرى (Viber, Phone, WhatsApp):

    الأزرار الأخرى لها نفس التنسيق مع تغيير الألوان والأيقونات:

    • Viber Button:

      • لون الخلفية: background-color .

      • Viber أيقونة:background-image.

    • Phone Button:

      • لون الخلفية: background-color .

      • Phone أيقونة: background-image.

    • WhatsApp Button:

      • لون الخلفية: background-color .

      • WhatsApp أيقونة: background-image.

  • النتيجة النهائية:

    • تظهر الأزرار في الزاوية اليمنى السفلية من الصفحة.

    • عند التحويم على الزر، تظهر موجات حوله.

    • كل زر يؤدي إلى خدمة مختلفة:

      • Telegram: يفتح رابط Telegram.

      • Viber: يفتح محادثة Viber.

      • Phone: يفتح تطبيق الهاتف للاتصال.

      • WhatsApp: يفتح محادثة WhatsApp.

  • الكود كامل مع Html , CSS:

     
.telegram-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    z-index: 9999;
    background-color: #2CA5E0;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23FFF' d='M23.91 3.79L20.3 20.84c-.25 1.21-.98 1.5-2 .94l-5.5-4.07-2.66 2.57c-.3.3-.55.56-1.1.56-.72 0-.6-.27-.84-.95L6.3 13.7l-5.45-1.7c-1.18-.35-1.19-1.16.26-1.75l21.26-8.2c.97-.43 1.9.24 1.53 1.73z'/%3e%3c/svg%3e");
    background-size: 50%; 
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.telegram-button:before,
.telegram-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #2CA5E0;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: border-animate 1.5s linear infinite;
    opacity: 0;
}
.telegram-button:after{
    animation-delay: .5s;
}
@keyframes border-animate
{
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}



.viber-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    z-index: 9999;
    background-color: #665CAC;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23FFF' d='M11.398.002C9.473.028 5.331.344 3.014 2.467 1.294 4.177.693 6.698.623 9.82c-.06 3.11-.13 8.95 5.5 10.541v2.42s-.038.97.602 1.17c.79.25 1.24-.499 1.99-1.299l1.4-1.58c3.85.32 6.8-.419 7.14-.529.78-.25 5.181-.811 5.901-6.652.74-6.031-.36-9.831-2.34-11.551l-.01-.002c-.6-.55-3-2.3-8.37-2.32 0 0-.396-.025-1.038-.016zm.067 1.697c.545-.003.88.02.88.02 4.54.01 6.711 1.38 7.221 1.84 1.67 1.429 2.528 4.856 1.9 9.892-.6 4.88-4.17 5.19-4.83 5.4-.28.09-2.88.73-6.152.52 0 0-2.439 2.941-3.199 3.701-.12.13-.26.17-.35.15-.13-.03-.17-.19-.16-.41l.02-4.019c-4.771-1.32-4.491-6.302-4.441-8.902.06-2.6.55-4.732 2-6.172 1.957-1.77 5.475-2.01 7.11-2.02zm.36 2.6a.299.299 0 0 0-.3.299.3.3 0 0 0 .3.3 5.631 5.631 0 0 1 4.03 1.59c1.09 1.06 1.621 2.48 1.641 4.34a.3.3 0 0 0 .3.3v-.009a.3.3 0 0 0 .3-.3 6.451 6.451 0 0 0-1.81-4.76c-1.19-1.16-2.692-1.76-4.462-1.76zm-3.954.69a.955.955 0 0 0-.615.12h-.012c-.41.24-.788.54-1.148.94-.27.32-.421.639-.461.949a1.24 1.24 0 0 0 .05.541l.02.01a13.722 13.722 0 0 0 1.2 2.6 15.383 15.383 0 0 0 2.32 3.171l.03.04.04.03.03.03.03.03a15.603 15.603 0 0 0 3.18 2.33c1.32.72 2.122 1.06 2.602 1.2v.01c.14.04.268.06.398.06a1.84 1.84 0 0 0 1.102-.472c.39-.35.7-.738.93-1.148v-.01c.23-.43.15-.841-.18-1.121a13.632 13.632 0 0 0-2.15-1.54c-.51-.28-1.03-.11-1.24.17l-.45.569c-.23.28-.65.24-.65.24l-.012.01c-3.12-.8-3.95-3.959-3.95-3.959s-.04-.43.25-.65l.56-.45c.27-.22.46-.74.17-1.25a13.522 13.522 0 0 0-1.54-2.15.843.843 0 0 0-.504-.3zm4.473.89a.3.3 0 0 0 .002.6 3.78 3.78 0 0 1 2.65 1.15 3.5 3.5 0 0 1 .9 2.57.3.3 0 0 0 .3.299l.01.012a.3.3 0 0 0 .3-.301c.03-1.19-.34-2.19-1.07-2.99-.73-.8-1.75-1.25-3.05-1.34a.3.3 0 0 0-.042 0zm.49 1.619a.305.305 0 0 0-.018.611c.99.05 1.47.55 1.53 1.58a.3.3 0 0 0 .3.29h.01a.3.3 0 0 0 .29-.32c-.07-1.34-.8-2.091-2.1-2.161a.305.305 0 0 0-.012 0z'/%3e%3c/svg%3e");
    background-size: 50%; 
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.viber-button:before,
.viber-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #665CAC;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: border-animate 1.5s linear infinite;
    opacity: 0;
}
.viber-button:after{
    animation-delay: .5s;
}
@keyframes border-animate
{
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}





.phone-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    z-index: 9999;
    background-color: #337AB7;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-phone'%3e%3cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3e%3c/path%3e%3c/svg%3e");
    background-size: 50%; 
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.phone-button:before,
.phone-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #337AB7;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: border-animate 1.5s linear infinite;
    opacity: 0;
}
.phone-button:after{
    animation-delay: .5s;
}
@keyframes border-animate
{
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}




.whatsapp-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    z-index: 9999;
    background-color: #25D366;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23FFF' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3e%3c/svg%3e");    
    background-size: 50%; 
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.whatsapp-button:before,
.whatsapp-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #25D366;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: border-animate 1.5s linear infinite;
    opacity: 0;
}
.whatsapp-button:after{
    animation-delay: .5s;
}
@keyframes border-animate
{
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

    
    <a href="https://t.me/xazbix" target="_blank" rel="nofollow">
	<span class="telegram-button"></span>
</a>


<a href="viber://chat?number=%2B70000000000" target="_blank" rel="nofollow">
	<span class="viber-button"></span>
</a>

<a href="tel:+70000000000" target="_blank" rel="nofollow"> <span class="phone-button"></span>
  </a>
  
  <a href="https://api.whatsapp.com/send?phone=70000000000" target="_blank" rel="nofollow"> <span class="whatsapp-button"></span> </a>

إذا كان لديك أي أسئلة إضافية أو تحتاج إلى مزيد من التوضيحات، فاكتب لنا في التعليقات!

🌟 انتبه عزيزي أعضاء المجتمع! 🌟
نحن متحمسون لمشاركتك في مناقشاتنا الديناميكية. لضمان بيئة محترمة وشاملة للجميع، نطلب تعاونكم مع الإرشادات التالية:
1. احترام الخصوصية: يرجى عدم مشاركة معلومات حساسة أو شخصية في تعليقاتك.
2. انشر الإيجابية: نحن نتمسك بسياسة عدم التسامح مطلقًا مع خطاب الكراهية أو اللغة المسيئة. دعونا نحافظ على محادثاتنا محترمة وودية.
3. اللغة المفضلة: لا تتردد في التعبير عن نفسك باللغة الإنجليزية أو العربية. ستساعدنا هاتان اللغتان في الحفاظ على مناقشة واضحة ومتماسكة.
4. احترام التنوع: لتعزيز جو شامل، نطلب منك بكل احترام تجنب مناقشة المسائل الدينية في تعليقاتك.
تذكر أن مساهماتك قيمة، ونحن نقدر التزامك بجعل مجتمعنا مكانًا ترحيبيًا للجميع. دعونا نواصل التعلم والنمو معًا من خلال المناقشات البناءة والاحترام المتبادل.
شكرًا لكونك جزءًا من مجتمعنا اوعي وشك! 🌟

إرسال تعليق