معرفة رمز الواي فاي - طريقة معرفة باسورد الواي فاي المتصل به

إضافة أزرار متابعة متحركة أنيقة على منصة بلوجر

في هذا الشرح ستضيف صندوق متابعة احترافي (واتساب + تيليجرام) بتصميم RTL متجاوب، يظهر بجانب بعض على الكمبيوتر وتحت بعض على الهاتف، مع وميض (Glow) بلون كل منصة — بدون مكتبات خارجية وبدون مشاكل PageSpeed.

RTL Responsive Grid No Libraries PageSpeed Friendly New Tab Links.

إضافة أزرار متابعة (واتساب وتيليجرام) على منصة بلوجر | زيادة عدد المتابعين بسرعة!.

✅ مميزات صندوق المتابعة المتحرك

• متوافق RTL بالكامل للمحتوى العربي.
• شبكي: على الكمبيوتر الزرين جنب بعض، وعلى الهاتف كل زر تحت الثاني.
• Glow/وميض حول البوكس بلون كل منصة (واحد للواتساب وآخر للتيليجرام).
• الأيقونة والزر يأخذان لون المنصة لظهور احترافي وحيوي.
• بدون ملفات خارجية (SVG داخلي + CSS فقط).
• الرابط يفتح في نافذة جديدة لزيادة التحويل بدون خروج من المقال.

💡 ملاحظة: لو كانت “قناة” الأفضل زرها اشترك الآن، ولو “جروب” تيليجرام الأفضل انضم الآن.

🧩 تركيب الكود داخل قالب Blogger (قبل/بعد <data:post.body/>)

✅ ابحث داخل القالب عن هذا السطر:
Add Before or after <data:post.body/> in Blogger Theme code.

ثم ضع الكود قبله أو بعده حسب المكان الذي تريد ظهور الأزرار فيه داخل المقال.

الخطوات:
1) Blogger → المظهر (Theme)
2) اضغط تعديل HTML
3) استخدم البحث (Ctrl+F) واكتب:
<data:post.body/>
4) ضع الكود قبله أو بعده
5) احفظ القالب

مهم:
- ضع CSS أولًا ثم HTML بعده مباشرة.
- هذا الكود “مغلق” داخل كلاس خاص به، ولن يغيّر تصميم الموقع.
- لا تضف هوامش خارجية حتى يملأ عرض الحاوية بالكامل.

✅ الأفضل للأداء: ضع CSS مرة واحدة داخل القالب، ثم يمكنك استدعاء HTML في أي مكان تريد.

📌 طرق التركيب الأخرى (اختيارية)

داخل المقال (HTML):
افتح المحرر → HTML → الصق الكود → نشر.

داخل التخطيط (HTML/JavaScript):
Blogger → التخطيط → أضف أداة HTML/JavaScript → الصق الكود → حفظ.

👀 معاينة الشكل النهائي

قناة واتساب

انضم الآن

قناة تيليجرام

انضم الآن

📌 الكود الكامل (انسخه والصقه مباشرة)

انسخ الكود التالي وضعه قبل/بعد <data:post.body/> داخل القالب

✅ تم النسخ

<!-- Social Follow Buttons (RTL + Glow + Responsive Grid elsabagh) -->
<style>
  :root{
    --site:#1b5a84;   /* لون موقعك */
    --card-bg:#f4f9fd;
    --border:rgba(0,0,0,.08);
    --wa:#25d366;
    --wa-dark:#128c7e;
    --tg:#0088cc;
    --tg-dark:#005f8f;
  }
  .sf-wrap{
    margin:0;
    direction:rtl;
    font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  }
  .sf-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  @media (max-width:600px){
    .sf-grid{ grid-template-columns:1fr; }
  }
  .sf-card{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--card-bg);
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    overflow:hidden;
  }
  .sf-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:12px;
    border:1px solid transparent;
    pointer-events:none;
    animation:sf-pulse 1.2s infinite;
  }
  @keyframes sf-pulse{
    0%,100%{ opacity:.25; filter:blur(.2px); }
    50%{ opacity:1; filter:blur(0); }
  }
  .sf-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  .sf-title{
    font-weight:900;
    font-size:15px;
    color:var(--site);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .sf-icon{
    width:28px;
    height:28px;
    flex:0 0 28px;
  }
  .sf-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 16px;
    border-radius:10px;
    font-weight:900;
    font-size:14px;
    text-decoration:none;
    color:#fff !important;
    white-space:nowrap;
    flex:0 0 auto;
    transition:transform .15s ease, filter .15s ease, background .15s ease;
    will-change:transform;
  }
  .sf-btn:hover{ transform:translateY(-1px); filter:brightness(.95); }
  .sf-btn:active{ transform:translateY(0); }

  .sf-whatsapp .sf-icon path{ fill:var(--wa-dark); }
  .sf-whatsapp .sf-btn{ background:var(--wa); }
  .sf-whatsapp::before{ border-color:var(--wa); }

  .sf-telegram .sf-icon path{ fill:var(--tg); }
  .sf-telegram .sf-btn{ background:var(--tg); }
  .sf-telegram::before{ border-color:var(--tg); }

  @media (prefers-reduced-motion:reduce){
    .sf-card::before{ animation:none; opacity:.6; }
    .sf-btn{ transition:none; }
    .sf-btn:hover{ transform:none; }
  }
</style>

<div class='sf-wrap'>
  <div class='sf-grid'>

    <!-- WhatsApp Channel -->
    <div aria-label='قناة واتساب' class='sf-card sf-whatsapp' role='region'>
      <div class='sf-left'>
        <svg aria-hidden='true' class='sf-icon' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'>
          <path d='M11.42 9.49c-.19-.09-1.1-.54-1.27-.61s-.29-.09-.42.1-.48.6-.59.73-.21.14-.4 0a5.13 5.13 0 0 1-1.49-.92 5.25 5.25 0 0 1-1-1.29c-.11-.18 0-.28.08-.38s.18-.21.28-.32a1.39 1.39 0 0 0 .18-.31.38.38 0 0 0 0-.33c0-.09-.42-1-.58-1.37s-.3-.32-.41-.32h-.4a.72.72 0 0 0-.5.23 2.1 2.1 0 0 0-.65 1.55A3.59 3.59 0 0 0 5 8.2 8.32 8.32 0 0 0 8.19 11c.44.19.78.3 1.05.39a2.53 2.53 0 0 0 1.17.07 1.93 1.93 0 0 0 1.26-.88 1.67 1.67 0 0 0 .11-.88c-.05-.07-.17-.12-.36-.21z'/>
          <path d='M13.29 2.68A7.36 7.36 0 0 0 8 .5a7.44 7.44 0 0 0-6.41 11.15l-1 3.85 3.94-1a7.4 7.4 0 0 0 3.55.9H8a7.44 7.44 0 0 0 5.29-12.72zM8 14.12a6.12 6.12 0 0 1-3.15-.87l-.22-.13-2.34.61.62-2.28-.14-.23a6.18 6.18 0 0 1 9.6-7.65 6.12 6.12 0 0 1 1.81 4.37A6.19 6.19 0 0 1 8 14.12z'/>
        </svg>
        <div class='sf-title'>قناة واتساب</div>
      </div>

      <a aria-label='الاشتراك في قناة واتساب' class='sf-btn' href='https://whatsapp.com/channel/0029VbBk2Ws89inhYuOh2y0t' rel='nofollow noopener noreferrer' target='_blank'>
        انضم الآن
      </a>
    </div>

    <!-- Telegram Channel -->
    <div aria-label='قناة تيليجرام' class='sf-card sf-telegram' role='region'>
      <div class='sf-left'>
        <svg aria-hidden='true' class='sf-icon' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
          <path d='M19.2,4.4L2.9,10.7c-1.1,0.4-1.1,1.1-0.2,1.3l4.1,1.3l1.6,4.8c0.2,0.5,0.1,0.7,0.6,0.7c0.4,0,0.6-0.2,0.8-0.4 c0.1-0.1,1-1,2-2l4.2,3.1c0.8,0.4,1.3,0.2,1.5-0.7l2.8-13.1C20.6,4.6,19.9,4,19.2,4.4z M17.1,7.4l-7.8,7.1L9,17.8L7.4,13l9.2-5.8 C17,6.9,17.4,7.1,17.1,7.4z'/>
        </svg>
        <div class='sf-title'>قناة تيليجرام</div>
      </div>

      <a aria-label='الاشتراك في قناة تيليجرام' class='sf-btn' href='https://t.me/TOPFOLLOW0' rel='nofollow noopener noreferrer' target='_blank'>
        انضم الآن
      </a>
    </div>

  </div>
</div>
<!-- End Social Follow Buttons -->

✅ إذا أردت منع أي تأثير على القالب 100% عند وضعه داخل المقال: ضع الكود داخل عنصر حاوي واحد فقط مثل: <div class="els-social">...</div> (ونحن فعلنا ذلك في المعاينة هنا).

⚙️ طريقة التعديل السريع

• تغيير رابط واتساب: عدل href داخل زر واتساب فقط.
• تغيير رابط تيليجرام: عدل href داخل زر تيليجرام فقط.
• تغيير لون الموقع: عدل المتغير --site (حاليًا #1b5a84).
• تغيير النص: بدل انضم الآن إلى اشترك الآن حسب نوع القناة/الجروب.

❓ أسئلة شائعة

هل سيُتلف الكود تنسيق الموقع؟
لا. لأننا “قفلنا” تنسيقات الاسكربت و الأزرار داخل .els-social.

أريد الأزرار بعرض كامل بدون أي فراغات
تم ضبط ذلك: لا يوجد هوامش خارجية، والحاوية تملأ العرض 100%.

هل يمكن إضافة منصة ثالثة بنفس التصميم؟
نعم. ممكن تعدل براحتك (اسم المنصة + الرابط + اللون) وضفها بنفس النمط.

إحصائيات المقال

..

متواجدون ...

👁️

مشاهدات ...

📝

كلمات 0

⏱️

قراءة 0 دقيقة

📅

نشر 28/02/2026

♻️

تحديث 28/02/2026

هل لديك استفسار؟ نحن هنا للمساعدة

تواصل

تعديل المقال