إضافة مواضيع ذات صلة مع تأثير التلميحات

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

قم بالدخول الى تحرير القالب ولا تنسى نسختك الإحتياطية ثم قم بتوسيع عناصر الستايل بالضغط على سهم التوسيع

ثم فوق الوسم ]]> أضف الكود التالي

/* Related Posts Widget cnmu.blogspot.com
----------------------------------------------- */

.related-post .post-thumbnail {
 z-index: 1;
 position: relative;
 width: 98px;
 height: 98px;
 margin: 0;
 display: block;
box-shadow:none;
}
.related-post {
 float: right;
 position: relative;
 width: 98px;
 height: 98px;
 margin: 4px 8px 6px 0;
 background: #fff;
padding:3px 0 3px 3px;
border:1px solid #000;
 }
.related-post .related-post-title {
 display: none;
 float: right;
 background: #000;
 color: #fff;
border:2px solid #ccc;
border-radius:4px;
 text-shadow: none;
 font-weight: bold;
 padding: 6px;
 position: absolute;
 top: -20px;
 right: -5px;
 z-index: 2;
 width: 110px;
 -webkit-box-shadow: 0 0 2px #444;
 -moz-box-shadow: 0 0 2px #444;
 box-shadow: 0 0 2px #444;
}
.related-post:hover .related-post-title {display: block;}
#related-posts h3 {background:#ddd; padding:4px 12px 4px 12px; color:#000; font-size:15px; font-weight:bold; display:inline; text-align:right; border:2px solid #000; border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;float:right; margin:10px;}

بعض التنسيقات :

الرقم 98 الاحمر عدله في المرتين لتغير ارتفاع الصور
الرقم 98 الأزرق عدله في المرتين أيضا لتغير عرض الصور
الثلاث الألوان المحدده في الأكواد التالية قم بتغييرها لتعديل الوان التلميحات
 background: #000; الخلفية
 color: #fff; لون الخط
border:2px solid #ccc; إطار التلميحات

 وهذه الأكواد لتعديل الوان كلمة مواضيع ذات صلة
background:#ddd; الخلفية
color:#000  لون الخط
border:2px solid #000;  لون الإطار

ثم ننتقل للكود التالي

 
  
    

يمكنك تعديل العبارات المحدده باللون الأحمر بعبارات أخرى
والرقم 5 عدله لزيادة او إنقاص عدد المواضيع المعروضه

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

ملاحظة في حالة عدم ظهور الإضافة فالسبب يكون أن الوسم متكرر في القالب أحدهم فعال وتظهر تحته الإضافة والآخر ليس كذلك وحينها تنقل الكود تحت الآخر وتركيب موفق بإذن الله