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

السلام عليكم ورحمة الله وبركاته

اخترنا لكم اليوم اضافة جميلة لموضيع ذات الصلة بشكل جميل بالصورة حين يقوم الزائر بالاشارة اليها يظهر الوصف داخل الصورة 


صورة الاضافة


كيفية الاضافة 
اذهب الى لوحة التحكم في مدونتك ثم اذهب الى قالب المدونة اضغط على تحرير html 


الان ابحث عن الرمز ]]></b:skin> 


اذا كنت لا تعرف كيث تبحث عن الاكواد في قالب مدونتك انظر الى 


الصورة هنـــــــا

بعد ان تجد الرمز ]]></b:skin>  اضف الكود التالي فوقه مباشر

ul#related-posts{font:14px Oswald;list-style:none;text-transform:none;margin:10px 0;padding:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:4px solid #bbb;display:block;height:95px;position:relative;width:90px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:89px;line-height:16px;position:absolute;width:84px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:url(http://4.bp.blogspot.com/-_OsD_ywyB2s/UTs7tp7tOwI/AAAAAAAAJTw/M_VUXlPKKkE/s1600/transparant-namkna-blogspot-com.png);display:block!important;}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);border:4px solid #666}

الان ابحث عن الرمز :
<div class=’post-footer-line post-footer-line-1′>
ملاحظة اذا وجدث اثنين نفس الرمز المشار اليه او ثلاثة اختر اخر واحد ثم الصق الكود التالي تحت مباشر

<b:if cond=’data:blog.pageType == &quot;item&quot;’><h2>شــاهــد ايـضــا:</h2><script type=’text/javascript’>var defaultnoimage=&quot;http://4.bp.blogspot.com/-eFxebIsMq80/UTs7_D-hKWI/AAAAAAAAJT4/fzHhnKKhGO8/s1600/no-image-namkna-blogspot-com.jpg&quot;;var maxresults=5;</script><script type=’text/javascript’>//<![CDATA[var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf(“<img”);b=s.indexOf(“src=””,a);c=s.indexOf(“””,b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=””)){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!==’undefined’)thumburl[relatedTitlesNum]=defaultnoimage;else thumburl[relatedTitlesNum]=”http://1.bp.blogspot.com/-cor1eIoGLeY/UTs8TtCAxzI/AAAAAAAAJUA/s6DwSc2vfk4/s1600/noimage-namkna-blogspot-com-1.png”}}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+”…”;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel==’alternate’){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!==’undefined’)splitbarcolor=splittercolor;else splitbarcolor=”#d4eaf2″;for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i–}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write(‘<ul id=”related-posts”>’);while(i<relatedTitles.length&&i<20&&i<maxresults){document.write(‘<li><a’);document.write(‘ href=”‘+relatedUrls[r]+'”><span class=”overlay” style=”display:none;”>’+relatedTitles[r]+'</span><img style=”width:90px;height:90px;border:0px;” src=”‘+thumburl[r]+'”/></a></li>’);i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write(‘</ul>’);relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}//]]></script><b:loop values=’data:post.labels’ var=’label’><b:if cond=’data:label.isLast != &quot;true&quot;’></b:if><script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;’ type=’text/javascript’/></b:loop>
<script type=’text/javascript’>removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);</script></b:if>    

 يمكنك تغيير عدد الموضيع بالرمز المشار اليه var maxresults=5;


ثم اختر حفظ وشاهد النتائج




ملاحظة:
لمعرفة عدد الرموز الموجودة بالقالب مثل هذا الرمز
 <div class=’post-footer-line post-footer-line-1′>
عند البحث باستخدام ctrl+f اضغط enter عدة مرات في كل مرة سيظهر لك الرموز بالترتيب 🙂