Blogger أضافة بطاقة عرض معلومات تطبيقات الموبايل في بلوجر

[اليوناني]

​

​

أضافة بطاقة عرض معلومات تطبيقات الموبايل​

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

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

معاينة البطاقة

من هنــــــــــــــــــــــــــــــــــا

شرح التركيب
​

• نذهب الى المظهر
• نختارتعديل HTML
• نبحث بداخل اكواد القالب عن </head> و نضيف الكود التالي اعلاه

<style>
:root{--primary-color:#0066cc;--primary-hover:#0052a3;--bg-card:#ffffff;--text-main:#1d1d1f;--text-muted:#6e6e73;--border-color:#e5e5ea}
.mobile-app-card{direction:rtl;max-width:750px;margin:25px auto;background:var(--bg-card);border-radius:20px;border:1px solid var(--border-color);box-shadow:0 12px 32px rgba(0,0,0,0.05);padding:24px;box-sizing:border-box}
.mobile-card-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}
img.mobile-app-icon{width:80px!important;height:auto;border-radius:18px;object-fit:cover;box-shadow:0 6px 16px rgba(0,0,0,0.08);flex-shrink:0}
.mobile-header-info{display:flex;flex-direction:column;gap:6px}
.mobile-app-title{font-size:1.25rem;font-weight:700;color:var(--text-main);margin:0;line-height:1.4}
.mobile-badges-group{display:flex;gap:8px;flex-wrap:wrap}
.mobile-badge{display:inline-flex;align-items:center;gap:4px;background-color:#e8f2ff;color:var(--primary-color);font-size:0.75rem;font-weight:600;padding:4px 10px;border-radius:20px}
.mobile-badge-success{background-color:#e6f4ea;color:#137333}
.mobile-app-desc{color:var(--text-muted);font-size:0.92rem;line-height:1.6;margin:0 0 16px 0}
.mobile-features-list{list-style:none;padding:0;margin:0 0 20px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-size:0.85rem;color:var(--text-main)}
.mobile-features-list li::before{content:"✓";color:var(--primary-color);font-weight:bold;margin-left:6px}
.mobile-screenshots-container{margin-bottom:20px}
.mobile-screenshots-title{font-size:18px;font-weight:700;color:var(--text-main);margin-bottom:10px}
.mobile-screenshots-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.mobile-screenshots-scroll::-webkit-scrollbar{height:6px}
.mobile-screenshots-scroll::-webkit-scrollbar-thumb{background:#d1d1d6;border-radius:10px}
.mobile-app-shot{width:110px!important;height:auto;border-radius:12px;object-fit:cover;border:1px solid var(--border-color);flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,0.04)}
.mobile-grid-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:#fbfbfd;padding:16px;border-radius:14px;border:1px solid #f0f0f5;margin-bottom:20px}
.mobile-stat-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.mobile-stat-label{font-size:0.75rem;color:var(--text-muted)}
.mobile-stat-value{font-size:0.88rem;font-weight:700;color:var(--text-main)}
.mobile-card-actions{display:flex;gap:12px}
.mobile-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:12px;font-weight:600;font-size:0.95rem;text-decoration:none;transition:all 0.2s ease;cursor:pointer}
.mobile-btn-primary{background:var(--primary-color);color:#ffffff!important;border:none}
.mobile-btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}
.mobile-btn-secondary{background:#f2f2f7;color:var(--text-main)!important;border:1px solid var(--border-color)}
.mobile-btn-secondary:hover{background:#e5e5ea}
@media (max-width:576px){
.mobile-grid-stats{grid-template-columns:repeat(2,1fr);gap:12px}
.mobile-features-list{grid-template-columns:1fr}
.mobile-card-actions{flex-direction:column}
.mobile-app-icon{width:65px!important;height:65px!important}
.mobile-app-shot{width:110px;height:190px}
}
</style>

عند كتابة اي موضوع انتقل الى عرض HTML و الصق الكود التالي بداخله في المكان المناسب

<div class="mobile-app-card">
  <div class="mobile-card-header">
    <img class="mobile-app-icon" src="https://help.apple.com/assets/69F8EBBDF3B89A4F6E0C704C/69F8EBC43862495245036393/ar_EG/0db59df6e2dbd46a2ca6f529a9c52606.png" alt="آيقونة التطبيق">
    <div class="mobile-header-info">
      <h2 class="mobile-app-title">تطبيق أحترافي لتسجيل المكالمات تلقائياً</h2>
      <div class="mobile-badges-group">
        <span class="mobile-badge">نسخة كاملة أوفلاين</span>
        <span class="mobile-badge mobile-badge-success">🛡️ آمن ومفحوص</span>
      </div>
    </div>
  </div>


  <p class="mobile-app-desc">
    برنامج تسجيل المكالمات الاحترافي يتيح لك تسجيل جميع المكالمات الصادرة والواردة بجودة عالية وبشكل تلقائي بدون الحاجة للاتصال بالإنترنت.
  </p>


  <ul class="mobile-features-list">
   <li>تسجيل تلقائي بجودة MP3 عالية</li>
    <li>حماية التسجيلات برقم سري أو بصمة</li>
    <li>دعم الميكروفون والسماعة الخارجية</li>
    <li>نسخ احتياطي سحابي اختياري</li>
  </ul>


  <div class="mobile-screenshots-container">
    <div class="mobile-screenshots-title">لقطات من داخل التطبيق:</div>
    <div class="mobile-screenshots-scroll">
      <img class="mobile-app-shot" src="https://upload.wikimedia.org/wikipedia/ar/7/79/IOS_17_Homescreen.png" alt="الشاشة الرئيسية">
      <img class="mobile-app-shot" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCuFnQVtAFqPECchprmugbEQzCLiSaGsWUp7Xd_xgk4ANUSOAUzBOhTA&s=10" alt="سجل المكالمات">
      <img class="mobile-app-shot" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSey970DEmGtMKHRRarfcpDrzKqaQY1Qr5l6MGgGm4l09rSX8kJ4CIBmw0&s=10" alt="الإعدادات">
      <img class="mobile-app-shot" src="https://img.youm7.com/images/NewsPics/gallery/pics/8201544184571.jpg" alt="مشغل الصوت">
    </div>
  </div>


  <div class="mobile-grid-stats">
    <div class="mobile-stat-item">
      <span class="mobile-stat-label">الإصدار</span>
      <span class="mobile-stat-value">v26.3 (2025)</span>
    </div>
    <div class="mobile-stat-item">
      <span class="mobile-stat-label">التقييم</span>
      <span class="mobile-stat-value">⭐ 4.8 / 5</span>
    </div>
    <div class="mobile-stat-item">
      <span class="mobile-stat-label">النظام المطلوب</span>
      <span class="mobile-stat-value">Android 6.0+</span>
    </div>
    <div class="mobile-stat-item">
      <span class="mobile-stat-label">التحميلات</span>
      <span class="mobile-stat-value">89,793</span>
    </div>
  </div>


  <div class="mobile-card-actions">
    <a class="mobile-btn mobile-btn-primary" href="#" target="_blank" rel="nofollow">
     تحميل مباشر (APK)
    </a>
        <a class="mobile-btn mobile-btn-secondary" href="#" target="_blank" rel="nofollow">
       شرح الاستخدام
    </a>
  </div>
</div>

ثم قم بتغير النصوص بما تراه مناسب

​

 

[فخم الطلة]

🌺 موضوع يستحق القراءة فعلاً، شكراً لك على وقتك وجهدك 🌸 ​