Widget de Posts Recentes em forma de lista

por Rô Zanchetta - 10 Julho 2009 às 20:23 | Comentários: 19


Modifiquei mais uma vez o script do widget de posts recentes. Para facilitar a customização transformei a tabela em uma lista de ítens. Isso permite que o widget fique na horizontal ou na vertical, de acordo com a preferência do usuário.

Também acrescentei uma query "start-index" para que você possa escolher quais os posts recentes a serem mostrados e retirei as variáveis de data e comentários que estavam sendo pouco usadas. Assim o código ficou mais enxuto e pode ser colocado diretamente no template.

Veja o código completo:

<div id='recent-posts'>
<h2> Posts Recentes </h2>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = &quot;http://endereço-de-sua-imagem-substituta&quot;;
showRandomImg = true;
imgwidth = 100;
imgheight = 100;
summaryPost = 0;
startpost = 1;
numposts = 6;
home_page = &quot;<data:blog.homepageUrl/>&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
// <!-- Based on a Script by Anhvo  http://www.vietwebguide.com/ -->
// <!--  Modified by BloggerSPhera - www.bloggersphera.com/ -->
// <!-- Recent Posts with Thumbnail for Blogger Blogs -->
// <!--  bloggersphera-version 7 - script showing posts in a unordered list -->
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s =  s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
document.write('<ul id="rec_posts">');
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
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 == 'alternate') {
posturl = entry.link[k].href;
break;
}
} 
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";     
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; 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!="")) img[i] = d;
var item = '<li class="rec_thumbs"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a> '+removeHtmlTag(postcontent,summaryPost)+'...</span></li>';
if(summaryPost == 0) { item = '<li class="rec_thumbs"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a></span></li>'; }
document.write(item);
j++;
}
document.write('</ul>');
}
document.write("<script src=""+home_page+"feeds/posts/default?max-results="+numposts+"&start-index="+startpost+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
//]]>
</script>
<div class='clear'/>
</div>

Se não conseguir copiar, veja a página com o código no link abaixo:

Código Posts Recentes

Copie o código e cole em seu template no local onde quer o Widget.

Por exemplo, se quer o widget em sua sidebar:

  1. Em "Layout" - "Editar HTML" - deixe a caixinha "Expandir Modelos de Widgets" desmarcada;
  2. Procure o trecho referente à sidebar: 
    <div id='sidebar-wrapper'>
  3. Abaixo dessa linha, cole todo o código do link. Já modifiquei o script de modo que não seja necessário colocar a url de seu blog;
  4. Altere o endereço da imagem substituta (imagem que será mostrada quando algum post não possuir imagens);
  5. Acerte as medidas das imagens conforme sua preferência;
  6. Quem ainda não conhece esse widget, consulte os outros posts a respeito;
  7. Em "startpost" você define se quer que os posts apareçam do último post para trás (startpost = 1;), do penúltimo para trás (startpost = 2;), do antepenúltimo para trás (startpost = 3;), etc...
  8. Em "numpost" define o número de posts que quer mostrar;
  9. Visualize o template e estando tudo ok, salve


Para aplicar estilos à lista você pode utilizar as "ids" e "class" definidas no script:

<div id='recent-posts'>
<ul id="rec_posts">
<li class="rec_thumbs">
<span> (para os textos)


Em próximo post darei algumas dicas para estilos.

BOOKMARKS:
  • Rec6
  • Uêba

Widget de Posts Recentes em forma de listaSocialTwist Tell-a-Friend