5 de out de 2012

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!

3 comentários:

  1. Oi flor :3 já te adicionei nos afiliados

    http://the-land-of-goodies.blogspot.com.br/

    ResponderExcluir
  2. Nossa , que tutorial perfeito tem tempo que eu pesquisava uma pagina dessa *-* Ajudou muito :)

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!