طريقة وكيفية اضافة كود آخر المواضيع حسب التصنيف مع مصغرات الصور لمدونات البلوجر

 آخر المواضيع حسب التصنيف ,آخر المواضيع كل تصنيف على حدى ,اضافة آخر المواضيع الى مدونات البلوجر
بسم الله الرحمان الرحيم و الصلاة و السلام على اشرف المرسلين سيدنا محمد صلى الله عليه و سلم  اما بعد اخواني ,اليوم ساقوم بشرح اضافة بسيطة جدا لمدونات البلوجر الاضافة: عبارة عن اضافةآخرالمواضيع لكل تصنيف على حدى مع صور مصغرة اضافة رائعة :

نبدأ بشرح الاضافة: 




الخطوة الاولى:1-نذهب الى=> تصميم=>تحرير html 
نضع العلامة في خانة 'توسيع قوالب عناصر واجهة المستخدم'
 ثم نبحث عن :

 ]]></b:skin>

و نضع قبلها مباشرة هذا الكود :

/*** Recent Labels Gadget Css ***/
img.label_thumb{
float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}

.label_with_thumbs strong {}

ثم نبحث عن :

</head>

و نضع قبلها:

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=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=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_jKknzhxbBeFvI_JyeWxkT3-QBAemP1qGJwbCr7GQ7mGyxvEftD13RoqBm4s-ukJmpP00ujWDR58whmfq75uyv7Vr-PK_AxnLOBVk9bDJP3yhRY3Me0cZbBiDP2J_vs4PA0fqh_fAsdXT/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

 ثم احفظ القالب

الخطوة الثانية 2- الان نذهب الى =عناصر الصفحة و نقوم باضافة ادة html/javascript

و نضع هذا الكود :

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/تصنيف?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

اللون الاحمر 'تصنيف' نضع بدلها التصنيف الذي نريد و نحفظ الاداة 

اللون الاخضر'3' عدد المواضيع المراد عرضها