في البداية، لدي مشكلة مع عنوان هذه التدوينة؛ على الأرجح، لم أوفّق في عنوانها ولهذا فيمكنك أن تقترح علي عنواناً أفضل. على أي حال، دعوني أشرح الفكرة:
يمكنك أن تضيف شريط صور مربعة إلى مدونة ووردبريس المجانية والمدفوعة (لا أدري إذا تنجح هذه الطريقة مع المدونات المجانية الأخرى ولكن، كل شيء ممكن مع HTML و CSS و يبقى السؤال: هل تتيح هذه المدونات المجانية امكانية تحرير قوالبها؟) ويمكنك إضافته إلى موقعك أو إلي أي تصميم. هذه الصور لها أحجام ثابتة (مثال 64X64 بيكسل) وتوجد مسافة فاصلة بينها ويمكنك تنسيقها بأكثر من طريقة باستخدام CSS. هذه الصور، يمكنك إضافتها إلى أعلى المدونة أو إلى أسفلها أو في شريط القائمة الجانبية لأكثر من حاجة:
-
عرض صور توضيحية لأهم التصنيفات في مدونتك، فبهذا يستطيع القارىء تصفحها (كما أفعل حالياً في ر.ض.).
-
أو لمدونتك الشخصية بعرض أيقونات لحساباتك في الشبكات الإجتماعية (مصل تويتر وغيرها).
-
أو لعرض أيقونات الخلاصات والإشتراك في القائمة البريدية وغير ذلك.
هذه أمثلة مصوّرة:
أحد التصاميم لمدونتي الشخصية:
من رحلة ضَوْء:
لقد جهّزتُ لك كود HTML وكود CSS لهذه الغاية. لن أشرح تفاصيلهما لأنني أفترض أن لدى المهتم معرفة ولو أساسية في HTML و CSS. على أية حال، إن نظرة لهذه الأكواد أو التعديل عليها سيعطيك فكرة واضحة. (لا يمكن التعلم دون التجارب!)
في الكود المرفق عدّل الآتي: مكان الصور واسماءها في مدونتك / الروابط / الوصف title … الخ.
كذلك، سأوضح الطريقة في مدونات ووردبريس المدفوعة، فقط:
من أين أحصل على أيقونات مناسبة؟ لأيقونات الخلاصات RSS انظر هذه التدوينة. للأيقونات الأخرى، ابحث في محرك البحث الرائع هذا المتخصص في الأيقونات أو جرب إحدى هذه المحركات الأخرى أو ابحث في موقع flickr بهذه الطريقة كمثال: firefox icons. كما أنني سأنشر قريباً، تدوينة لما أعتقد بأنه أفضل مجموعة الأيقونات المجانية.
الطريقة (ووردبيس فقط):
أولاً: أين تريد أن تضيفها؟ في أعلى المدونة؟ في أسفلها؟ في شريط القائمة الجانبية Sidebar؟
لأعلى المدونة: افتح ملف header.php
لأسفل المدونة: افتح ملف footer.php
لللقائمة الجانبية: افتح sidebar.php
ثانياً: حمّل كود HTML هذا، ثم أضفه في المكان المناسب في أحد الملفات أعلاه (في المكان الذي تريد أن تظهر فيه).
ثالثاً: ارفع أيقونات الصور إلى مجلد imgaes في مدونتك. في هذا الكود، جميع الصور بمقاس 64 بيكسل للطول والعرض.
رابعاً: أضف كود CSS التالي إلى ملف Style.css في مدونتك:
#social{float:left; margin-left:20px; margin-top:-8px}
#social img{margin:50px 10px 0px 0; padding:5px; border:0px solid #dadada; width:60px; height:60px}
آي فون/آي بود
استفتاءات
الأمن والحماية
التدوين
التسوق الإلكتروني
الجوّال
الكمبيوتر المحمول
اللغة الإنجليزية
النسخ الإحتياطي
الوسائط
برامج
تصميم وتطوير
تطوير الذات
تعلّم كيف
تنظيم الوقت
جي ميل
ذاكرة الفلاش
زيادة الإنتاجية
سطح المكتب
عام
فيرفوكس
كروم
لينوكس
مشاكل وحلول
مقالات تقنية
مواقع وخدمات
هندسية
وندوز
ووردبريس
اشكرك على تدوينك المفيدة والرائعة بارك الله فيك
وبإذن الله سيتم التطبيق
أعتقد أنه بالإمكان القيام بنفس الشئ فى مدونات الوردبريس المجانية أيضاً من خلال كتابة كود ال HTML كما نشاء و وضع كود ال CSS بطريقة Inline وبهذا يكون قد تم إضافة الصورة بالتنسيق الذى نريده
لكن لا يوجد سوى موضع واحد متاح فى هذه الحالة هو القائمة الجانبية Sidebar
والطريقة سبق أن وضحتها فى تدوينة سابقة
Apperence » مربعات القائمة الجانبية » إضافة نص ( وبه نضع الكود )
وبالتالى يعيب هذه الطريقة كثرة ما يحتويه ال Sidebar وهو ما قد لا يفضله البعض
يمكن أن يكون العنوان : كيف تضيف الصور إلى القوائم في مدونتك ؟
أو كيف تضيف الصور إلى تصنيفاتك ؟ أو كيف تضيع إيقونات في مدونتك ؟
بالنسبة لى استخدم طريقة أسهل لمن ليس لديهم معرفة بـ css و هي رفع الصورة إلى المدونة و من ثم وضع كود الصورة في مربعات القائمة الجانبية ..
شكراً مهندس مهدي ..
ماشاء الله
تدوينة رائعة .. شرح مفصل ووافي
بارك الله فيك
مهدي , فهمت الفكرة
بالنسبة لمدونتك , حقيقة لم تعجبني صور الايقونات في اسفل الصفحة
اولا لا يوجد تناسق بين اشكال الايقونات , اقصد ( ان السمة مفقودة )
ثانيا بامكانك الحصول على ايقونات ذات شفافية و انعكاس خفيف لكي تبدو اجمل
ثالثا التباين بين الخلفية السوداء والمربع الابيض هو ما يزعج الناظر
مجرد رأي..
.
أتفق معك أخي خالد بشأن عدم توافق الصور مع تصميم المدونة
.
هذه هي المواضيع التي نبحث عنها!!!!!!
بهذا الشكل سوف نرتقي والله
شكراً أحلا مهدي واحلا مدونة الي الامام دائماً
واتمنى يكون المواضيع كلها مفيدة نفس هذه
تحياتي واحترماتي
شكرا لك على هذه المعلومة المفيدة أخي مهدي..سأجربها و سأوافيك بالنتيجة
تمت بعد جهدٍ جهيد : (
شكراً لك م. مهدي
@ أوّاه: هذا جيد. مدونتك تبدو أفضل بكثيرالآن …
الطريقة سهلة، لم أتوقع أنك كنت لتحتاج إلى كل هذا الجهد؟
* الإطار الأخضر حول الصور وعناوين التدوينات غير مناسب. أنصح بتغييره. فيما يتعلق بالإطار الأخضر حول عناوين التدوينات، أنصح باستخدام لون أزرق على درجة أعلى من درجة الأزرق في خلفية العناوين.
كذلك، فكّر بتغيير لون الإطار الأخضر في مربعات الصور.
مجرد رأي …