اضافة اضف لمدونتك اداة تابعنا علي مواقع التواصل بشكل جذاب

[ahmed2]

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


مميزات الكود:

1. تصميم مرن وجذاب: الأزرار مصممة لتكون دائرية ولها تأثير تمدد وتفاعل عند مرور الماوس، مما يجعلها ملفتة للنظر وجذابة للزوار.

2. سهولة التخصيص: يمكن تغيير الروابط الخاصة بشبكات التواصل الاجتماعي (مثل رابط الصفحة على فيسبوك أو القناة على يوتيوب) بسهولة عن طريق تعديل القيم في وسم `<a>` لكل زر.

3. متجاوبة مع كافة الأجهزة: التصميم المتبع يعتمد على تقنيات CSS الحديثة مثل Flexbox وTransitions، مما يجعله متجاوبًا مع مختلف أحجام الشاشات والأجهزة.

4. إبقاء المستخدمين على الموقع: وجود أزرار وسائل التواصل الاجتماعي يشجع الزوار على متابعة تحديثات الموقع عبر منصات مختلفة، مما يساعد في الحفاظ على التفاعل مع المحتوى وزيادة الزيارات المتكررة.

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

كيفية دمج الكود في موقع أو مدونة بلوجر:

1. إضافة الكود إلى المدونة: يمكن إدراج الكود مباشرة من التخطيط

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

3. تأكد من تضمين مكتبة Font Awesome: يتطلب الكود المكتبة لتضمين الأيقونات المستخدمة. إذا لم تكن المكتبة مضمنة بالفعل في موقعك، يمكنك إضافتها باستخدام الوسم `<link>` الموجود في الكود التالي

كود المكتبه

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>

كود الاداه

<style>
    .social-button {
        display: flex;
        align-items: center;
        color: white;
        text-decoration: none;
        border-radius: 50px;
        padding: 10px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s, width 0.3s;
        width: 25px;
        overflow: hidden;
        position: fixed;
        left: 0;
        margin-bottom: 10px;
        z-index: 1234;
  }

    .social-button:not(:first-child) {
        margin-top: 10px;
    }

    .social-button:hover {
        width: 200px;
    }

    .social-button i {
        margin-right: 10px;
        font-size: 24px;
        transition: transform 0.3s;
    }

    .social-button:hover i {
        transform: scale(1.1);
    }

    .social-text {
        position: absolute;
        left: 60px;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .social-button:hover .social-text {
        opacity: 1;
    }

    .facebook {
        background-color: #3b5998;
        top: 100px;
    }

    .whatsapp {
        background-color: #25D366;
        top: 160px;
    }

    .youtube {
        background-color: #FF0000;
        top: 220px;
    }

    .x {
        background-color: #000000;
        top: 280px;
    }

    .telegram {
        background-color: #0088cc;
        top: 340px;
    }
</style>

<a href="https://facebook.com/YourPage" target="_blank" class="social-button facebook">
    <i class="fab fa-facebook-f"></i>
    <span class="social-text">تابعنا على فيسبوك</span>
</a>

<a href="https://wa.me/YourNumber" target="_blank" class="social-button whatsapp">
    <i class="fab fa-whatsapp"></i>
    <span class="social-text">تابعنا على واتساب</span>
</a>

<a href="https://youtube.com/YourChannel" target="_blank" class="social-button youtube">
    <i class="fab fa-youtube"></i>
    <span class="social-text">تابعنا على يوتيوب</span>
</a>

<a href="https://x.com/YourProfile" target="_blank" class="social-button x">
    <i class="fab fa-twitter"></i>
    <span class="social-text">تابعنا على X</span>
</a>

<a href="https://t.me/YourChannel" target="_blank" class="social-button telegram">
    <i class="fab fa-telegram-plane"></i>
    <span class="social-text">تابعنا على تيليجرام</span>
</a>

رابط المعاينه
اضغط هـــنـــا



الختام

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

 

[theba]

 

[المشاغب]

بارك الله فيك عزيزي

 

[فخم الطلة]

شكرا جزيلا ،،

 

[Mostadaf]

شكرا لك جميل جدا

 

[Mostadaf]

شكرا لك جميل جدا