DICA 19: CRIAR UM ÍNDICE DO BLOG 1 – MOSTRAR LINKS DE TODOS OS POSTS

DICA 19: CRIAR UM ÍNDICE DO BLOG 1 – MOSTRAR LINKS DE TODOS OS POSTS

Veja como fazer um índice no blog com o titulo e o link de todas as postagens, esse código mostrará o links de todos seus posts em ordem de publicação, colocando os mais recentes no final da lista.

Isso pode ajudar na divulgação do seu blog fazendo seus visitantes olharem mais paginas e assim tem mais hipóteses de gostar e voltar outras vezes no seu blog ou quem sabe até recomendar o blog para outras pessoas e assim atrair mais visitas.

Para criar um índice do blog com todas as postagens do blog, separadas por muito simples basta no editor do site ou blog seleccionar o página nova ou em branco com forme apreça no seu site ou blog e coloque:

Código de Exemplo:

<style type="text/css">
.todosposts {
border: 1px solid #000;
height: 250px;
width: 300px;
overflow: auto;
}
.todosposts a{
color: #00C;
text-decoration: none;
}
.todosposts a:hover{
color: #F00;
text-decoration: underline overline;
}
</style>
<div class="todosposts">
<script type="text/javascript">
function showrecentposts(json) {
document.write('');
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;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(Baca)";
readmorelink = readmorelink.link(posturl);
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";
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 (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (!standardstyling) document.write('</div><div class="bbrecpostsum"">');
if (showpostsummary == true) {
if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(postcontent);
if (standardstyling) document.write('</i>');}
else {
if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
if (standardstyling) document.write('</i>');}
}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
}
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src=" http://jj-stuff.blogspot.pt/feeds/posts/default?
orderby=published&alt=json-in-script&max-results=999
&callback=showrecentposts"></script></div>

Sabemos que é um código grande, mas as partes que precisam de alteração são poucas e fáceis de fazer, no início do código temos o seguinte trecho:

.todosposts {
border: 1px solid #000;
height: 250px;
width: 300px;
overflow: auto;
}
.todosposts a{
color: #00C;
text-decoration: none;
}
.todosposts a:hover{
color: #F00;
text-decoration: underline overline;
}

Na primeira linha podemos escolher outros tipos de bordas e o tamanho da caixa alterando os valores do estilo todosposts{..., veja as linhas: height: 250px; width: 300px. Se não quiser a caixa, mas mostrar somente a lista completa sem barra de deslocamento apague o trecho overflow: auto; e height: 250px.

Depois podemos editar completamente a aparência dos links alterando o estilo .todosposts a e .todosposts a:hover, veja aqui como fazer a formatação de texto dos links.

E na parte final do código temos a linha:

...script src=" http://jj-stuff.blogspot.pt//feeds/posts/default?
orderby=published&alt=json-in-script&max-re....

Aqui você deve colocar o endereço do seu blog e já está tudo pronto.

Também é possível criar uma lista com os posts de cada um dos marcadores do blog, para fazer isso no trecho onde colocamos o endereço do blog, modifique para ficar assim:

http://jj-stuff.blogspot.pt/feeds/posts/default/-/Efeitos?
orderby=published&alt=json-in-script&m......

A palavra Efeitos é o nosso marcador, mas se for utilizar isso precisa escrever o nome do marcador exactamente como está no seu blog, fizemos um teste e usando a palavra efeitos com letra minúscula não funcionou, portanto tem que ser igual está no marcador do blog.

FONTE: DICAS PARA BLOGS