طريقة إضافة أداة اقرأ أيضاً داخل مقالات بلوجر باستخدام أكواد HTML و CSS

مرحباً بك في مدونتي Wowo Labs. من أهم أسرار نجاح المدونات وتصدرها في محركات 

البحث هو تحسين تجربة المستخدم وزيادة التنقل الداخلي بين المقالات. اليوم، أشارك معكم

 كوداً مخصصاً ونظيفاً جداً (HTML + CSS) قمت بتصميمه وتعديله ليعرض روابط "اقرأ أيضاً"

  كأزرار بنفسجية مطفية فاخرة مع نصوص باللون الأصفر الملكي المشع لتخطف أنظار الزوار

هذا الكود يتميز بمرونة تامة وبدون مقاسات ثابتة، ليتناسب تلقائياً مع كافة شاشات الجوال 

والكمبيوتر دون تخريب مظهر القالب.

 

 

⬇️ كود الأداة الجاهز للنسخ (ضعه داخل المقال):

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

 

                                                              

 

 

 فقط غيرو الروابط والاسماء والالوان

📄 الكود الكامل لأداة (اقرأ أيضاً)

<!--كود أقسام اقرأ أيضاً - عناوين فقط-->
<div class="read-more-container">
    <span class="read-more-title">اقرأ أيضاً:</span>
    <a class="read-more-link" href="https://wowolabs.com">   ملصقات أسماء بالونات   </a>
    <a class="read-more-link" href="https://wowolabs.com">  ملصقات اللمبات مجانية    </a>
    <a class="read-more-link" href="https://wowolabs.com">  تحميل حروف كوكيز ملصقات PNG   </a>
</div>

<style>
/* تنسيق الحاوية لتكون مرنة وبدون مقاسات ثابتة */
.read-more-container {
    display: flex !important;
    flex-direction: column !important; /* ترتيب العناوين تحت بعضها */
    gap: 10px !important; /* مسافة بسيطة بين العناوين */
    margin: 20px 0 !important;
    padding: 0 !important;
}

/* كلمة اقرأ أيضاً */
.read-more-title {
    color: #FFD700 !important; /* لون أصفر */
    font-weight: bold !important;
    font-size: 18px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* تنسيق عناوين المواضيع كأزرار بنفسجية والخط أصفر */
.read-more-link {
    display: block !important;
    background-color: #4A2E80 !important; /* خلفية بنفسجي مطفي ملكي */
    color: #FFD700 !important; /* لون الخط أصفر */
    padding: 10px 15px !important; /* مساحة داخلية موزونة للنص */
    border-radius: 6px !important; /* زوايا دائرية خفيفة */
    text-decoration: none !important;
    font-size: 16px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    border: none !important;
    box-shadow: none !important;
}
</style>