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

  Как установить виджет последние статьи с миниатюрами для каждого ярлыка

Зайдите в Шаблон -- Изменить HTML. Используя сочетание клавиш Ctrl+F найдите строчку  ]]></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 {}


            Дальше найдите строку </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://lh6.googleusercontent.com/-I_9XRyFJ160/TsX8wEnA2BI/AAAAAAAAB5Y/yAwyd8EAnyE/s70/noimage.jpg';}
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>
');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('
');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>


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

<script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 10;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Название_Ярлыка?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

                                            Дальше нужно сделать настройки:

Слова "Название Ярлыка" замените на точное наименование того ярлыка, анонсы которого должны отображаться;
var numposts = 4 - количество анонсов для отображения;
var numchars = 10 - количество текстовых знаков в каждом анонсе;
var showcommentnum - показ числа комментариев к статье либо запрет (true/false);
var showpostdate - показ или запрет отображения дат в анонсах (true/false, соответственно);
var showpostsummary - показ или запрет текстовых вступлений из постов (true/false).
Итог: в блоге можно размещать любое количество таких элементов, каждый раз просто прописывая собственный адрес ярлыка.

Вот и всё. Немного усилий и виджет последние статьи с миниатюрами для каждого ярлыка установлен. Желаю удачи. Не забываем нажимать на кнопочки, делиться с друзьями.


Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями в соцсетях:


10 коммент. :

  1. Сделал пошагово. Не отображает. Я долго искал такой виджет. Что я сделал не так? В чем может быть ошибка?
    http://exsperimenti.blogspot.com/

    ОтветитьУдалить
  2. если 4 анонса, то и ярлыка наверное нужно 4? Помогите плиз установить. А так же интересно как вы сделали краткие сообщения? У меня выпадают целые и могу регулировать только их количество на странице

    ОтветитьУдалить
  3. Может из за шаблонов.Где то устанавливаются,а в каких то нет.

    ОтветитьУдалить
  4. добрый день!
    я брала готовый схожий шаблон, но столкнулась с проблемой.
    в превьюшке выводится каждый раз по 4 строки, я пыталась найти в коде где бы поменять численное значение, чтобы увеличить. в итоге хочется вместо 4х строк получить 10-14. но куда в итоге тыкать и что менять?
    ссылка на тестовый блог, на котором пробую.
    http://testpmj.blogspot.ru/

    очень надеюсь на Ваш ответ ;(

    ОтветитьУдалить
    Ответы
    1. Да у вас по шаблону не понятно.Добавьте какие нибудь статейки.

      Удалить
    2. побольше сообщений? готово.
      ссылка на шаблон:
      http://btemplates.com/2013/blogger-template-galauness/

      Удалить
  5. А сколько Вы в самих настройках выставляете?

    ОтветитьУдалить
    Ответы
    1. количество строк\символов в превью? в том то и дело, что нет возможности задать самой, только где-то в глубине кода выставлен параметр, который никак не найду.
      у вас тоже нет идей как это исправить?

      Удалить
  6. Не работает , уж простите. Если что-то сделал не так, вроде бы понятным языком написанно, но не получилось, сделал тупо- пошагово.

    ОтветитьУдалить
    Ответы
    1. А Вы попробуйте вставить перед feeds ваш url блога.

      Удалить