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

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

---

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

• يظهر الروابط الخاصة بموقع محدد فقط كأزرار جميلة.

• تصميم عصري متجاوب مع مختلف الأجهزة (هاتف، تابلت، كمبيوتر).

• يمكن تخصيص ألوانه بسهولة ليناسب ستايل منتداك.

---

طريقة التركيب:

1. من لوحة إدارة المنتدى، اذهب إلى:
   مظهر المنتدى > ألوان > ورقة تصميم CSS.

2. أضف الكود التالي في نهاية ورقة الـCSS الخاصة بك:

صندوق الكود

/* ========================================================== تصميم الروابط بواسطة: جاك سبارو - مدونة القرصان رابط الموقع: https://zx303.blogspot.com/ يُمنع إزالة الحقوق - جميع الحقوق محفوظة © ========================================================== */ a[href^="http://zx303.blogspot.com"] { display: inline-flex; align-items: center; justify-content: center; flex-direction: row-reverse; gap: 8px; position: relative; background: #3498db; color: transparent; font-size: 0; font-weight: bold; text-decoration: none; border-radius: 8px; transition: 0.3s ease; padding: 12px 20px 12px 10px; overflow: hidden; &::after { content: "تحميل الملف الآن"; color: white; font-size: 18px; font-weight: bold; white-space: nowrap; position: relative; } &:before { content: ""; background: url(https://cdn.jsdelivr.net/emojione/assets/png/1f449.png?v=2.2.7) no-repeat center; background-size: contain; width: 20px; height: 20px; display: inline-block; margin-left: 8px; } &:hover { background: #2980b9; transform: scale(1.05); } } /* ========================================================== تصميم الروابط بواسطة: جاك سبارو - مدونة القرصان رابط الموقع: https://zx303.blogspot.com/ يُمنع إزالة الحقوق - جميع الحقوق محفوظة © ========================================================== */

📌 ملاحظة:

• قم بتغيير رابط مدونة القرصان الموجود في الكود  (https://zx303.blogspot.com) إلى الرابط الذي تريد تحويلة لزر.

• غيّر نص الزر (تحميل الملف الآن) إلى النص الذي يناسبك.

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