كود أداة "اقرأ أيضاً" بأزرار بنفسجية فاخرة لبلوجر
مرحباً بك في مدونتي Wowo Labs. من أهم أسرار نجاح المدونات وتصدرها في محركات البحث هو تحسين تجربة المستخدم وزيادة التنقل الداخلي بين المقالات. اليوم، أشارك معكم كوداً مخصصاً ونظيفاً جداً (HTML + CSS) قمت بتصميمه وتعديله ليعرض روابط "اقرأ أيضاً" كأزرار بنفسجية مطفية فاخرة مع نصوص باللون الأصفر الصريح المشع لتخطف أنظار الزوار.
هذا الكود يتميز بمرونة تامة وبدون مقاسات ثابتة، ليتناسب تلقائياً مع كافة شاشات الجوال والكمبيوتر دون تخريب مظهر القالب. ولضمان تكامل التصميم الاحترافي، يُنصح بدمج هذا الكود مع تحسينات بصرية أخرى، مثل ما شرحناه سابقاً في مقال CSS لتخصيص صور المعاينة باحترافية. كما أن تنظيم واجهة التدوينة لا يكتمل إلا بضبط النصوص المصاحبة، وهو ما يمكنك تحقيقه بسهولة باستخدام كود اختصار وصف التدوينة لسطر واحد (CSS) ليتناسق تماماً مع أزرار القراءة الإضافية.
01 طريقة التركيب والصور التوضيحية
لكي تضع هذه الأزرار الاحترافية داخل موضوعك، قم بتحويل محرر بلوجر إلى عرض HTML، وضع هذا الكود في المكان المناسب لك، مع تبديل روابط المقالات بالروابط الخاصة بك:
فقط غيّروا الروابط والأسماء والألوان حسب رغبتكم.
02 الكود الجاهز مع ميزة النسخ
<!--كود أقسام اقرأ أيضاً - عناوين فقط-->
<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: #FFE600 !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: #B829F7 !important; /* خلفية بنفسجي مطفي أساسي */
color: #FFE600 !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>
التعليقات
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.