Reino Kawaii

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 modelosPara 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 Speakers e Stylify your Blog