Безусловно, виджеты последних статей являются одними из самых востребованных виджетов среди пользователей блогов. В сети их представлено разнообразное количество модификаций: от времени эксплуатации, уровне шума и показа по хлопку.

Сегодняшним постом я поделюсь одним из таких замечательных виджетов последних статей в блог. Однако он отличается от стандартно предлагаемых гораздо большей функциональностью и красочностью. Его преимущества перед другими - отображение небольших миниатюр изображений и возможность указывать показ анонсов сообщений строго для ярлыков.

Пример виджета последних статей с миниатюрами изображений вы можете наблюдать непосредственно в этом блоге на главной странице. Надеюсь, он еще там есть.. А то знаете ли, не могу ни в чем найти совершенства.


При установке виджет самостоятельно подстраивается под дизайн блога, в котором он размещен, и нет как таковой необходимости его доводить до ума. Так как данный элемент декора работает с фидом вашего блога, то под заголовком выводимых статей присутствует их небольшой анонс. При наличии изображений в постах виджет автоматически отображает небольшие иконки картинок рядом с вступительным текстом статей. Если в каком-либо посте картинка отсутствует, он выводит небольшое изображение по умолчанию, которое, впрочем, вы можете подобрать сами.

Как я упоминал выше, одна из изюминок этого скрипта - возможность настраивать отображение анонсов статей строго для нужного ярлыка, а не для ленты всего блога.

Установка виджета последних статей с миниатюрами.

Проследуйте Дизайн > Изменить HTML. Так как потребуется правка шаблона, сохраните его резервную копию на компьютер для отката неудачных изменений.

В шаблоне найдите участок  ]]></b:skin> и сразу перед ним впишите стили:

/*** Featured Categories ***/
     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 {}

При некоторых знаниях CSS вы можете настроить их для более гармоничного вписания виджета в дизайн блога. Я же давать определения не буду. Это долго и скучно.

Следующий действием разыщите </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/AVvXsEi4q0oJ7nIj-5aKst-lIEP5KihMoMEPaTuvWPpXYUKZ8S3SAK5TpwSYC-Ni_pa2Ixofoto7SMpMQaIpuH15wxhSMNPqvvf_PMNGHKglaIHFdWj2BZc8oxhgRg1iq-4F79-VZAz5dWC3ohdI/';}

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>

В этом коде участок http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/
hAKuT9rJpFU/noimage.jpg вы можете заменить на адрес собственного изображения. В данном случае это картинка для показа по умолчанию, при отсутствии каких-либо изображений в анонсируемом посте.

Сохраните шаблон и перейдите во вкладку "Дизайн", в шаблоне вашего блога выберите место для виджета сообщений и добавьте гаджет HTML/JavaScript. В его поле впишите код, который и отвечает непосредственно за показ последних статей с миниатюрами изображений:
Данный код нужно настроить для более удобной работы препарируемого нами элемента.

Ниже я приведу обозначения из скрипта, которые вы должны редактировать по своим усмотрению и прихоти:

Как видно, виджет последних статей с миниатюрами изображений содержит обширные настройки и вы легко сможете настроить его по своему вкусу.

Таким образом, в блоге можно размещать любое количество таких элементов, каждый раз просто прописывая собственный адрес ярлыка.

На этом мне остается только пожелать всем удобного пользования.