المكتبة التعليمية

أضف صندوق مواضيع مميزة في موقعك / مدونتك

مواضيع مميزة
كُتب بواسطة نسمة محمد
مواضيع مميزة

مواضيع مميزة

قم بالتوجه إلى Google Reader ثم اتجه إلى Your Stuff واختر Shared items، هنا حيث تجد مواضيعك المشاركة ثم اضغط على Add a Clip to your web site or blog.

shared2 أضف صندوق مواضيع مميزة في موقعك / مدونتك

بعدها ستظهر لك هذه الصفحة

shared3 أضف صندوق مواضيع مميزة في موقعك / مدونتك

قم بجعل Title فارغاً لكي يتم إزالته تماماً واختر من Color scheme بالخيار None، ثم اختر عدد المواضيع المميزة التي تريد أن تعرض بدل الرقم 5 أو اجعلها 5 كما تريد، ثم قم بنسخ الكود الذي في الصندوق الأسفل من الصفحة.

shared4 أضف صندوق مواضيع مميزة في موقعك / مدونتك

ستجد أنه تقريباً قد تم تفرغت جميع الألوان والحدود التي على القائمة وأصبحت فارغة من التصميم وهذا ما نحتاج إليه لكي نقوم بوضع اللمسات التي نريدها بشكل خاص لنا في مدونتنا أو يتم أخذ استخدام التصميم الافتراضي في الموقع أو المدونة كتصميم القوائم بشكل عام، فبعد نسخ الكود يمكنك لصقه في أي مكان في موقعك أو مدونتك، سنقوم بلصقه في إحدى القوائم الجانبية التي لدينا في المدونة في Wordperss، ننسخ الكود ونلصقه في قائمة من نوع (نص) كالتالي:

shared5 أضف صندوق مواضيع مميزة في موقعك / مدونتك

بعدها سنجد أنه تم وضعها بشكل شبه عادي في المدونة على الأقل بشكل عادي وليس بتصميم وشكل مختلف عن المدونة ومن اليسار إلى اليمين، فسنقوم بتصميمها بشكل جميل باستخدام الـ CSS، أيضاً وسنخفي Read more.. ليمكننا إضافتها بشكل أفضل لو أردنا في أسفل القائمة بأي شكل نريده.

shared6 أضف صندوق مواضيع مميزة في موقعك / مدونتك

سنقوم الآن بشرح الـ HTML الموجودة لهذه القامة بشكل مبسط بالصورة التالية:

shared7 أضف صندوق مواضيع مميزة في موقعك / مدونتك

يمكنك الآن استخدام الـ CSS لعمل أي شيء تقريباً، أنا شخصياً أخفيت Read more باستخدام الكود التالي:

.f {
display: none;
}

وكذلك قمت بتنسيق <li> وهي القائمة بحيث جعلت في كل قائمة حد في أسفل بلون رصاصي خفيف ووضعت صورة نجمة على اليمين، وكذلك أضفت مسافات بين كل قائمة ليكون شكلها جميلاً وذلك بالكود التالي:

#readerpublishermodule0 li {
border-bottom: 1px solid #A5A5A5;
padding: 5px 20px 5px 0;
background: url(http://althari.ws/wp-content/uploads/shared-star.gif) no-repeat right;
}

لتكون النتيجة كالتالي:

shared1 أضف صندوق مواضيع مميزة في موقعك / مدونتك

يمكنك معرفة اكواد الـ CSS وتعلمها باستخدام احد هذه الروابط

 

المصدر: عالم التقنية

عن الكاتب

نسمة محمد

اترك تعليقا

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.