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

أصبح الكثيرين يستخدمون Google Reader ويقومون بمشاركة المواضيع مع بعضهم بعضا، أجد أحياناً مواضيع مشاركه يومياً أكثر من 30 موضوع مميز من الأصدقاء لـ 57 صديق، طبعاً ليس هذا هو موضوعنا ولكن موضوعنا عندما تكون استخدمت Google Reader لمشاهدة المواضيع الجديدة يومياً ستصادفك مواضيع مميزة تود أن تشارك بها الجميع، طبعاً بإمكانك مشاركتها الجميع بالضغط على Share فستكون في المواضيع المميزة التي شاركت بها الجميع فهذه القائمة بالمواضيع المميزة يمكنك نشرها في أي مكان في (تويتر، فيس بوك، في صفحة المواضيع المشاركة الخاصة بك والمزيد..). حسناً تريد أن تظهر المواضيع المميزة في مدونتك؟ ستكون هذه نقلة جميلة وأنت تتصفح المواضيع ستقوم بمشاركة المواضيع التي تتصفحها لزوار موقعك، سنتطرق في هذا الموضوع بطريقة إضافتها بسهولة وطريقة تصميمها بشكل أنيق بأي شكل تريده.

أنا جربت إضافات كثيره للوردبريس للأسف أغلبها لا تدعم اللغة العربية، لكن وجدت طريقه أفضل وأسهل من دون استخدام أي إضافة، حيث تمكنك باستخدامها في أي مكان وبالتصميم الذي يعجبك بشكل كامل من الكود الذي يطرحه لك Google Reader.

هنا مثال على ذلك في مدونتي:

لنبدأ بسم الله

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

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

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

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

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

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

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

.f {
display: none;
}

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

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

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

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

• دروس W3Schools CSS
• موقع CSS Basics
• بالعربي من موقع HTML.net CSS

آخر موقع استخدمت هذه الطريقة له هو موقع المهندسة وعد الشدي، قمت بتصميم المدونة وأضفت بشكل بسيط الآلوان وجعلت القائمة تظهر أنيقه بألوان القالب وتظهر من اليمين إلى اليسار.

أعجبني حيث يمكنني تحرير التصميم بأي شكل وأحببت أن أفيدكم بها وإن شاء الله أكون أفدتكم، أطيب تحياتي.