Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Menus Vanessa S.

Menu com galeria de imagens em destaque

Hoje você vai aprender como criar um menu bem diferente que pode ser usado para mostrar as postagens em destaques no seu blog.
Neste menu, as imagens se apresentam de tamanho grande, e quando passamos o mouse em cima delas, aparecerá um breve resumo das informações contidas(legenda) e o título do post em questão.
Quando o leitor paira seu mouse sobre a imagem, ela é redimensionada como uma miniatura. Isso permitirá ao usuário visualizar o título e uma legenda das informações que deseja.
Bom, como imagens valem mais que mil palavras, deem uma olhada no menu em funcionamento para você conseguir entender e visualizar melhor o efeito ao qual me refiro.

(Clique na imagem abaixo)
DEMO

Para conseguir este efeito, é necessária a incorporação de um script à base da biblioteca JQuery, inserção de CSS e HTML em seu template.
Se quiser instalar este menu em seu blog, siga os seguintes passo:

1. Instalar o Javascript:

Copie o código abaixo e cole-o antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function()
{
$(&#39;.galleryImage&#39;).hover(
function()
{

$(this).find(&#39;img&#39;).animate(
{ width:100,
marginTop:10,
marginLeft:10
}, 500);

},
function()
{

$(this).find(&#39;img&#39;).animate(
{width:325,
marginTop:0,
marginLeft:0
},300);

});
});
</script>

2. Aplicar estilos CSS:

Vá em “modelo”, entre na edição HTML do seu template, não precisa clicar em “expandir modelos de widgets” e procure pela tag ]]></b:skin>
e cole o seguinte código logo ACIMA dela:

/* Gallery Container
----------------- */
.galleryContainer{
width: 900px; /*largura total*/
}
.galleryImage { /* imagens iniciais da galeria*/
 background-color:#000; /* escolha aqui a cor do background */
 width:200px;
 height:200px;
 overflow:hidden;
 margin:5px;
 float:left;
border:2px solid #333; /* escolha aqui a cor e largura da borda */
}
.info{
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
font-family:arial; /* escolha aqui tipo de fonte do texto*/
padding:3px 5px 10px 5px;
}
.info h2{ /* títulos*/
color:#ccc; /* cor da fonte do título */
font-size:110%; /* tamanho da fonte do título */
}
.info p { /* texto da legenda*/
color:#fff; /* cor da fonte do texto */
padding:3px 3px 5px 3px;
font-size:80%; /* tamanho da fonte do texto */
}
.clear {
clear:both;
margin-top:10px;
}

(edite os campos destacados de acordo com as cores e modelo do seu template)

3. Escolhendo local que ficará o menu galeria:

Agora escolha o local onde quer posicionar o seu menu.
No meu exemplo eu escolhi instala-lo logo abaixo do cabeçalho.
Se quiser instalar seu menu logo abaixo do cabeçalho, você deverá verificar se no seu template existe uma coluna visivel. Caso não haja, é necessário que você habilite-a no seu template.
Veremos como fazer isso, a seguir.

Vá na edição HTML do seu blog, NÃO marque “Expandir Modelos de Widgets” e procure por:

'crosscol-overflow' showaddelement='no'

onde está 'no' , troque por : 'yes'
Salve!

Se voltar no menu “layout”, verá que existe mais um campo para “Adicionar Gadget” abaixo do cabeçalho.

4. Aplicar o HTML para o Menu Galeria em Destaque:

Agora vá para “Layout”, escolha o local que você quer instalar a galeria, clique em “adicionar um gadget”, escolha o modo HTML/javascript e cole o seguinte código:

<div class="galleryContainer">
<div class="galleryImage">
<img src="ENDEREÇO-DA-SUA-IMAGEM" />
<div class="info">
<h2><a href="LINK-DA-POSTAGEM">Título</a></h2>
Escreva aqui o texto de apresentação do post (legenda)
</div>
</div>
<div class="galleryImage">
<img src="ENDEREÇO-DA-SUA-IMAGEM" />
<div class="info">
<h2><a href="LINK-DA-POSTAGEM">Título</a></h2>
Escreva aqui o texto de apresentação do post(legenda).
</div>
</div>
<div class="galleryImage">
<img src="ENDEREÇO-DA-SUA-IMAGEM" />
<div class="info">
<h2><a href="LINK-DA-POSTAGEM">Título</a></h2>
Escreva aqui o texto de apresentação do post(legenda).
</div>
</div>
<div class="galleryImage">
<img src="ENDEREÇO-DA-SUA-IMAGEM" />
<div class="info">
<h2><a href="LINK-DA-POSTAGEM">Título</a></h2>
Texto de apresentação do post(legenda).
</div>
</div>
</div>

 

Não esqueça de fazer as modificações necessárias.
Quando quiser mudar o destaque, basta trocar a imagem escolhida e substituir as informações de titulo, imagens e legenda.
[alerta]A funcionalidade deste script pode variar de acordo com o template.
Templates que possuem muitos scripts, acabam gerando “conflitos” entre si. Caso este script não funcione em seu blog, leia este artigo: Por que alguns scripts não funcionam no meu blog.[/alerta]

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

17 Comentários

  1. Regina disse:

    Oi Cláu amei seu Blog e a galeria de imagens deu certinho! Até adaptei para alguns banners de sites afiliados que faço parte. Gostaria de saber como colocar várias fotos em uma dessas galerias. Tipo fotos de eventos, onde o leitor ao clicar abre a página com as fotos. Penso que terei de criar uma página no blog com as fotos e então como ref:LINK DA PÁGINA. É ISSO?
    Eu vou tentar, só postei a mensagem pq talvez tenha outros com a mesma dúvida.

  2. .:: Clau ::. disse:

    Niko
    No código do 2º passo tem a marcação do que cada trecho representa.
    Altere o widht e height para o valor que vc quer.

  3. Niko disse:

    aki queria deixar os quadradinhus menores, como faço??
    T+

    (otimo blog !!)

  4. Abner disse:

    blog e nota 10.

  5. Nauan disse:

    Não está querendo copiar os arquivos javascript e html.

  6. Fernando disse:

    Obrigado Clau!!!

  7. ::Clau:: disse:

    @Fernando:
    Opa, pera lá, beijos na minha boca não…só meu marido que pode =P
    Sobre o link, tenta usar este código:
    <a target="_blank" href="LINK-DA-POSTAGEM">Título</a>

  8. Fernando disse:

    Clau, os links estão abrindo na mesma janela do meu blog. Como faço pra que abra em outra janela? bjoo!!

  9. Fernando disse:

    muito bom esse script. aki deu certinho.
    dois beijos na sua boca!!! vlw mesmo =D

  10. Hard2Style disse:

    Não achei nada sobre minha dúvida em seu blog,
    então vim pedir atraves desse comentário.

    Minha dúvida é a seguinte: Tenho um template que quando eu faço algum post que contenha imagem,depois de publicado ela se reduz. Como faço para tirar isso, e deixar a imagem do tamanho que eu quero ?

    Creio que deva ser algo no HTML no template. Mas nao consigo achar.

    Tens como me ajudar ?
    Obrigado

  11. ::Clau:: disse:

    @Kássio:
    Realmente o erro foi meu, o CSS é para ser colado ACIMA desta tag.
    Muito obrigada por me alertar, já corrigi a postagem.
    Volte sempre!

  12. Kássio disse:

    oLÁ, sempre visito seu site gosto muito do seu trabalho e deixa eu te avisar uma coisinha, eu coloquei o codigo de estilo CSS abaixo da tag ]]> mas deu errado, ficou aparecendo todo o codigo no layout da pagina, ai coloquei ACIMA da tag e funcionou perfeitamente, é so um detalhe mas é pra te ajudar, pra vc conferir comigo funcionou assim!
    abs e excelente site!

  13. ::Clau:: disse:

    @Allex:
    Vc deve ter visto este js em funcionamento apenas como galeria de imagens, mas não como menu com links, pois eu adaptei o js original, e apliquei o efeito q ele causa, criando um menu para destacar postagens, com os links de cada postagem.
    Obrigada pela visita e volte sempre!

  14. Admin disse:

    desculpe ai neh mais eu já vi esse js em algum lugar mesmo assim interesante essa postagem

  15. Júlio Marcondes Soares de Oliveira disse:

    é @francinelson encardiu pro teu lado,
    Plagiar é crime magrão.

  16. ::Clau:: disse:

    @francinelson:
    É gostou né Francinelson? Só espero que não vá plagiar e copiar este tb, que nem vc fez com tantos outros posts meus…
    fala sério!

  17. francinelson disse:

    muito legal adorei !
    xd!
    🙂

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.