Criando um mapa do blog

Oi pessoal!!!

Hoje vou ensinar a fazer um mapa do blog, de uma maneira muito fácil. Esse mapa é o que eu uso na página de Goodies, ele é muito fácil de personalizar e o melhor... atualiza sozinho!! As postagens fica separada por marcador, o que é ótimo para organizar melhor o blog.

Para ver, é só olhar a página de Goodies do blog, mas como eu posso ter mudado o lay (nunca se sabe), veja um preview aqui.

Antes que eu me esqueça, o Widget é do Abu Farhan e eu personalizei as cores e o modelo.

Crie uma nova página, e no lugar de escrever em HTML cole:

<style type="text/css">
.label p {
font-size: 120%;  /*--edite tamanho da fonte--*/
background: #D1A0E5;  /*--edite cor de fundo--*/
-moz-border-radius: 10px; /*--borda arredondada--*/
-webkit-border-radius: 10px;
border-radius: 10px;
background-position: center; /*--posição do plano de fundo--*/
border: 1px dashed #B900FC; /*--edite cor e estilo de borda--*/
margin-top: 35px;
padding: 10px;
width: 95%;
text-decoration:none;
}
.label p:hover{
font-size: 120%;
background: #D1A0E5; /*--edite cor de fundo quando passa o mouse--*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px dotted #B900FC; /*--cor e estilo de borda quando passa o mouse--*/
}
.label p a:link{
color:#FFFFFF;  /*--edite cor do link do titulo--*/
text-decoration:none;
}
.label p a:hover{ /*--edite cor do link do titulo quando passa o mouse--*/
color:#8018A5;
}
.label li {
margin:0;
border-bottom:1px dashed #8C00FF;  /*--edite cor e estilo de borda--*/
}
.label li:hover {
padding-left: 15px;
border-width: 1px;
border-style: left;
border-color: #DB9DEF;
box-shadow: inset 350px 0 0px 0 #ECCAF7;
 -webkit-transition: all 0.30s;
margin:0;
border-bottom:1px dashed #8C00FF;
}
</style>
<br />
<div class="label">
<script src="http://static.tumblr.com/fmf4w4k/H3Dn5ql09/indice-categoria.js">
</script>
<script src="LINKDOSEUBLOG/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script><span style="font-size: 70%;">Custom <a href="http://chacomanjos.blogspot.com/2012/10/criando-um-mapa-do-blog.html" target="_blank">Chá com Anjos</a> |Widget by <a href="http://www.abu-farhan.com/" target="_blank">Abu Farhan</a></span>
</div>

Entendendo o código:

.label p { --- título das categorias

.label p:hover { ---hover do título dos Gadgets

.label p a:link { ---link do título das categorias

.label p a:hover{ ---link do título dos Gadgets quando passa o mouse

.label li { ---itens da lista

.label li:hover { ---itens da lista quando passa o mouse

Se quiser, troque o plano de fundo por uma imagem. Não se esqueça de trocar a parte de vermelho pelo link do seu blog, deixando apenas uma barra ( / ).

Não retire os créditos!

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar