Criar um índice do blog - Mostrar links de todos os posts

Aprenda a fazer um índice no blog com o titulo e o link de todas as postagens. Esse gadget servirá para atrair a atenção de seus leitores, e consequentemente os atrairá para ler outras postagens do seu blog, caso ele goste, o mesmo pode se tornar um leitor fiel e até mesmo divulgar seu blog para seus amigos e com isso você conseguirá mais visitas para seu blog.

Entre na página Layout, clique para Adicionar um Gadget e use a opção HTML/Javascript. Então cole o código abaixo:

<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://formandoblogueiro.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&max-results=999
&callback=showrecentposts"></script></div>

Será preciso fazer algumas alterações, apesar do código ser grande essas alterações são simples 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 rolagem 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,

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

...script src="http://formandoblogueiro.blogspot.com/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. Falamos aqui como fazer isso em um gadget, mas poderia ser muito útil também numa página extra do blogger, assim você teria um link para mostrar seu índice em vezes que carregar junto com cada página visitada.
Obrigado!


Você Pode Gostar Também de:
> Postagens Populares no Blog
> Top Comentaristas no Blogger
> Criar Widget Música