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

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

 طريقة التركيب

أولا وقبل كل شئ لا تنسى اخذ  نسخ إحتياطية من قالب مدونتك

تحرير القالب

توسيع عناصر الستايل بالضغط على سهم التوسيع

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

/* Related Posts Widget pro-bk.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;  لون الإطار

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='related-posts'>
    <script type='text/javascript'>//<![CDATA[
    var ry='<h3>مواضيع ذات صلة</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;لا يوجد مواضيع ذات صلة لهذه الفئة</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
    var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqPp8Rt56OK8ndOefbXSqzD52uKMQPnXnJbrPe_3ZKgVJfFmLpBQMYvwZzyEXoyOzlHWcFDhHMHy07P2Jy1ey4V6aWABGUge4CELMKf0OJ6WLJ_mfWu2eYJIYUTdmAedzmvhND1PODQ_f3/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
    //]]></script>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
 </div>
   </b:if>
     <div class='clear'/>

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

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>

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

اي مساعدة او استفسار اترك تعليق

في أمان الله