السلام عليكم متابعين وزوار مدونة إتقان ويب معنا إضافة جديدة لمنصة بلوجر وهي إضافة شاهد أيضا هذه الإضافة تقوم بالعرض التدوينات الموجودة في قسم ما في المدونة فمثلا إذا كنت في تدوينة ما كما في هذه التدوينة ستلاحظ أنه يوجد إضافة شاهد أيضا وفيها تدوينات مع صوريها ، وهذه التدوينات هي تابعة لقسم التدوينة الذي تم الدخول عليها.
شرح تركيب الإضافة :
- من لوحة تحكم القالب ثم إلي قسم القالب وبالضغط علي تحرير HTML.
- بعد ذلك قم بإضافة الأكواد التالية قبل الوسم }]]></b:skin>
/* related posts */
h3.related-h3 {padding: 5px 5px;border-bottom: 1px solid #eee;margin: 0 10px;font-family: Reda-font;color: $(mt.color);font-size: 22px;font-weight: 100;}
ul#related-posts {overflow: hidden;position: relative;}
ul#related-posts img {width: 100%;height: 131%;}
ul#related-posts {padding: 12px 13px 14px 0;background: #fff;border-bottom: 1px solid #eee;}
ul#related-posts li {float: right;width: 32%;margin-left: 1%;overflow: hidden;height: 170px;position:relative;margin-bottom: 1%;}
ul#related-posts a {color: #fff;}
ul#related-posts span.overlay2 {position: absolute;right: 0;left: 0;padding: 10px;color: #fff;font-family: Reda-font;font-size: 17px;bottom: 0;padding-top: 10px;background-image: -webkit-linear-gradient(transparent ,rgba(0, 0, 0, .7));background-image: -moz-linear-gradient(transparent ,rgba(0, 0, 0, .7));background-image: linear-gradient(rgba(0, 0, 0, 0) ,rgba(0, 0, 0, 0.83));}
#itqanwebsprot { float: right; color: #fff; padding: 7.9px; border-radius: 2px; height: 16px; margin-top: -18px; margin-right: 10px; margin-top: 6px; } #itqanwebsprot a { color: #fff; font-family: droid arabic naskh; }
/*==========================================================================
- ثم قم بإضافة الأكواد التالية كذلك بعد الوسم <data:post.body/>
- ستلاحظ أن يوجد منه ثلاثة ، الأخير هو المقصود.
<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/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.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="overlay2">'+relatedTitles[r]+'</span><img 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)}
$(document).ready(function() {
$('#related-posts img ,.post-thumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's640' );});
$('#related-posts img ,.post-thumbnail').attr('src', function(i, src) {return src.replace( '/default.jpg', '/mqdefault.jpg' );});
});
//]]>
</script>
<div class='related-posts'>
<h3 class='related-h3'>شاهد أيضا :</h3>
<script type='text/javascript'>
var defaultnoimage="http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
var maxresults=3;
</script>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>