Новое в блоге
Loading...
18 нояб. 2011 г.

Последние статьи с миниатюрами для каждого ярлыка

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

              Как установить виджет последних статей с миниатюрами 

Следуйте Шаблон -- Изменить 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).
Итог: в блоге можно размещать любое количество таких элементов, каждый раз просто прописывая собственный адрес ярлыка.
Всё. Немного повозились, зато результат будет нас радовать. Всего доброго.До новых встреч.

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

1 коммент. :

  1. ;(( не фурычит!!! название виджета есть, а постов нет. Ярлык в точности как и в постах, тоже с большой буквы..help :-?

    ОтветитьУдалить

 
Footer