تت
بالتأكيد! يسعدني مساعدتك في إنشاء كود HTML و CSS مطابق تمامًا للصورة التي أرسلتها، ليمكنك استخدامه في مدونة بلوجر.
لقد قمت بتصميم الكود ليكون متجاوبًا (يعمل بشكل جيد على الكمبيوتر والجوال) وسهل التعديل.
---
### الكود النهائي لمنشور بلوجر
للحصول على نفس النتيجة 100%، اتبع الخطوات التالية:
1. اذهب إلى لوحة تحكم بلوجر وأنشئ "مشاركة جديدة".
2. في محرر المشاركات، اضغط على أيقونة القلم `` واختر "**عرض HTML**".
3. **انسخ كل الكود** أدناه والصقه في محرر HTML.
4. قم بتغيير `رابط_الصورة_هنا` بروابط الصور الخاصة بك لكل أداة.
5. قم بتغيير علامة `#` في الروابط (`href="#"`) إلى الرابط الفعلي لكل أداة.
```html
```
### ملاحظات هامة:
* **الصور:** لقد قمت بقص الصور من لقطة الشاشة التي أرسلتها ورفعتها لك على موقع `imgur` لتكون جاهزة للاستخدام مباشرة. إذا أردت استخدام صورك الخاصة، فقط استبدل الروابط الموجودة.
* **الخط:** الكود يحتوي على سطر لاستيراد خط `Tajawal` من جوجل، وهو خط عربي جميل ومقارب جداً لما في الصورة.
* **الروابط:** جميع البطاقات حاليًا لا توجه إلى أي صفحة (`href="#"`). يجب عليك تعديلها لتوجيه الزوار إلى الصفحات الصحيحة.
بهذا الكود، ستحصل على نتيجة متطابقة للتصميم الذي تريده على مدونتك. بالتوفيق
