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

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

shared0

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

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

shared1

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

قم بالتوجه إلى 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(https://althari.ws/wp-content/uploads/shared-star.gif) no-repeat right;
}

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

shared1

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

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

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