إضافة مواضيع ذات الصلة لمدونات بلوجر مع ملخصات

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

إضافة مواضيع ذات الصلة لمدونات بلوجر مع ملخصات

تركيب الإضافة الكود الأول
أضف هذا الكود فوق الوسم </head>

مع مراعاة ان الرقم 4 هو عدد المواضيع

والرقم 88 هو طول احرف الملخص

تركيب الإضافة الكود الثاني

أضف الكود السابق بعد أحد الاكواد التالية

تركيب الإضافة الكود الثالث مرحلة التنسيق

أضف الكود التالي فوق الوسم]]></b:skin>

/*Related www.igli4.com Posts*/
#related_posts {
background-color: #fff;
margin-top: 10px;
overflow: hidden;
padding: 0 27px 5px;
}
#related_posts h4 {
border-bottom: 1px solid #eee;
color: #777;
font-size: 16px;
font-weight: normal;
height: 48px;
line-height: 48px;
margin: -8px -8px 10px;
text-align: center;
}
#related_posts ul {
list-style: outside none none;
margin: 0;
padding: 0;
}
#related_posts li {
background-color: rgba(59, 59, 59, 0.8);
box-sizing: border-box;
float: right;
height: 76px;
margin-bottom: 4px;
margin-left: 5px;
overflow: hidden;
padding: 5px;
transition: all 0.4s ease 0s;
width: 341px;
}
#related_posts li:nth-child(2n+1) {background-color: #D03F42; margin-left: 0;}
#related_posts li:hover {box-shadow: 0 -80px rgb(59, 89, 152) inset;}
#related_posts li img {
border: 3px solid #fff;
border-radius: 100%;
float: right;
height: 60px;
margin-left: 5px;
width: 60px;
}
#related_posts .news-text {color: #fff; font: 12px/2em tahoma;}
#related_posts .relinkjdulx {
color: #fff;
display: block;
font-size: 12px;
font-weight: bold;
line-height: 1.8em;
}
#related_posts .relinkjdulx::before {
content: "";
height: 100%;
position: absolute;
width: 100%;
}

1- هذا #777 هو لون خلفية كلمة مواضيع ذات صلة

2- وهذا #FFFFFF هو لون الكلمة

3- هذا #eee هو لون خلفية المواضيع

4- هذا #bbb هو لون الإطار

5- أما الرقم 46% هو مقاس الموضوعات ان جعلته أ:ثر مثلا 90% أو 100% سيصبح في كل سطر موضوع واحد وليس مقسم

6- وان صغرته مثلاً لـ 29% سيصبح في السطر ثلاث مواضيع

7- هذا #ddd هو لون خلفية المواضيع عند تمرير الماوس

8- هذا #fff لون خلفية الصور

9- وهذا #777 لون اطار الصور

10- أما الرقم 60 والمتكرر مرتين هو عرض وارتفاع الصور

11- في حالة وجدت الإضافة مزاحة لليمين قم بتقليل هذا الرقم -50 او اجعله 0

12- هذه اكثر النقاط أهمية في التنسيق ويمكنك بقليل من الدراية بالـ CSS أن تغير الكثير بمظهر الإضافة دمتم في امان الله

عالم تكنولوجيا والمعلوميات|جديد المواضيع و الأخبار التقنية

إضافة مواضيع ذات الصلة لمدونات بلوجر مع ملخصات

Default