Menu Fofo com Imagens (Dynamic Views)


Oi :3 Hoje vou mostrar para vocês como editar e adicionar imagens no menu de páginas abaixo do cabeçalho em visualizações dinâmicas. Como eu disse no primeiro tutorial para esse tipo de modelo do blogger, é muito fácil!!! Só necessita um pouco de atenção.
Vamos lá!
Bom, nos modelos dinâmicos, logo abaixo da header bar (cabeçalho) aparece uma barra com os nomes de todos esses modelos; quando você adiciona o gadget de páginas, os nomes automaticamente se transformam em nomes de suas páginas, mas a opção com os nomes dos modelos continua lá; caso você queira transformá-lo em um menu mais fofo, vamos ter que editar isso.
Então a primeira coisa a ser feita é ativar o gadget de páginas: Layout-Elementos da Página-Adicionar um novo Gadget-Páginas. Agora podemos dar início às edições ^-^ Acesse Modelo-Personalizar-Avançado-Adicionar CSS; sempre que adicionar ou modificar um código dê um Enter para atualizar e ver como fica e se a visualização não estiver com as mudanças, clique em Aplicar ao Blog e veja como fica fora da área de visualização. Qualquer coisa é só remover o que adicionou.

1-Desativando os nomes dos modelos
Para desativar todos os nomes de modelos, adicione este código ao CSS:
#views{
display: none !important;
}
 
#header #pages, #header #pages:before{
border-left: 0px !important;
}
Resultado:
2-Adicionar Menu com Imagens
Agora que apenas as páginas estão sendo visualizadas abaixo do menu, vamos deixá-lo fofo substituindo as palavras por imagens. A primeira coisa a fazer é criar as imagens a serem usadas em um editor de imagens. Como eu fiz no meu, criando imagens para substituir o nome de cada uma das páginas do blog; usei o Photoshop, mas dá para fazer tranquilo no Photoscape e no Pixlr. O ideal é que tenham tamanho de no máximo 150px de largura e 30px de altura. Quando terminar, hospede as imagens em algum site, como Picasa ou Photobucket por exemplo; nós vamos precisar da URL delas.
Vamos adicionar o CSS no blog:
#pages.tabs ul{
margin-left: 5px !important;
}
  
#header .tabs li {
display: inline-block;
height: auto;
line-height: auto;
margin: 0px;
}
 
#pages.tabs ul li:nth-child(1) a:link{
background: url('URL DA IMAGEM') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 150px !important;
height: 30px;
}
 
#pages.tabs ul li:nth-child(2) a:link{
background: url('URL DA IMAGEM') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 150px !important;
height: 30px;
}
  
#pages.tabs ul li:nth-child(3) a:link{
background: url('URL DA IMAGEM') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 150px !important;
height: 30px;
}
Para adicionar mais páginas, vá repetindo essa parte do código, mudando apenas o número 4, 5, 6...:
#pages.tabs ul li:nth-child(4) a:link{
background: url('URL DA IMAGEM') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 150px !important;
height: 30px;
}
As áreas destacadas com cor mais forte são as que devem ser substituídas; em background, cole a URL da imagem que deseja usar em seu menu; width e height se referem a largura e altura que sua imagem possui, que não precisa ser necessariamente 150x30, pode ser menor. Lembre-se do truque de ajustar o tamanho da imagem sem editor, mudando o número após o "s" em imagens hospedadas no Picasa, assim:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfXTIFsXqgDLywQowsvlgeFaYNm4ZBTGrEzGTSaTLpF_Lb-XLuh6f6Ms8GZfPLSAkdBGMVlVuPI7XupfZeB-dY_jgMuNbWT9K8TK3Gx0W0n7ZaPsWXxbNEc_Jsw95bb6Jsde-YFJdAcP4/1600/Kawaii_Panda_by_strawberikogal.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfXTIFsXqgDLywQowsvlgeFaYNm4ZBTGrEzGTSaTLpF_Lb-XLuh6f6Ms8GZfPLSAkdBGMVlVuPI7XupfZeB-dY_jgMuNbWT9K8TK3Gx0W0n7ZaPsWXxbNEc_Jsw95bb6Jsde-YFJdAcP4/240/Kawaii_Panda_by_strawberikogal.jpg

Vale lembrar também que as imagens devem ser adicionadas de acordo com a ordem em que suas páginas aparecem, conforme você organizou em "Páginas" do seu blog.
Pronto! Só isso!....Epa...e a barra preta que é o plano de fundo do menu?? Se assim como eu você não consegue se dar muito bem com ela, personalize!!!

3.Personalizando a Barra de Páginas
Vamos deixá-la arredondada e com a cor que quiser! Para isso, adicione ao CSS esse código:
#header .header-drawer {background-color: #fcc !important;border-radius: 20px 20px 20px 20px !important;}
Basta mudar a cor #fcc por outro código de cor que você mais gostar e alterar os números em border- radius para definir a forma e tamanho do arredondamento.
Agora sim, tá pronto!!!!
Fácil, extremamente fácil neh :3 Espero que tenham gostado e beijus<3

Aprender esses tutoriais foi possível graças a Southern SpeakersStylify your Blog






Postar um comentário

5 Comentários

  1. Oii fofa , obrigado pelo tuto , estava tentando tirar aquela barra que os visitantes selecionam o modelo , e você foi o único que achei ,faça mais tutoriais sobre visualizações dinâmicas , tchau tchau ^^

    ResponderExcluir
    Respostas
    1. Obrigada ^^ Vou procurar aprender mais sobre modelos dinâmicos para compartilhar com vocês ^^
      Beijus...

      Excluir
  2. Não sou de comentar, mas tu fizeste meu dia de novo!
    Obrigada, florzinha!

    ResponderExcluir
  3. Nossa eu to amando o blog *-* , ta mim ajudando muuito , continue assim amore :3

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up