Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1501102909
Vida do cache: 1501146109
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

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

Hospedagem - 728 x 90

Menus

Menu com Imagens em Efeito Persiana

A biblioteca MooTools permite vários efeitos interessantes que podem ser aplicados em galerias de imagens, por exemplo.
Um dos efeitos mais atrativos que achei foi o Efeito persiana, que aplicado em imagens, podemos criar um menu bem diferente, como este na imagem abaixo:

(Clique na imagem)

Para a criação deste menu é necessário a inclusão de 3 arquivos javascript.

 

1º Passo – Download dos arquivos javascript:

Faça download dos arquivos javascript necessários para utilização deste efeito:
? MooTools
? ImageMenu
? MooTools.V1.11

2º Passo – Hospedar os arquivos javascript:

Após download dos arquivos javascripts nos links acima, hospede em seu próprio site de hospedagem favorito. Veja relação com opções de Sites para hospedagem de arquivos javascript.

3º Passo – Inserir código javascript no HTML do seu Template:

Acesse o menu “modelo”, entre na edição HTML do seu template, e procure pela tag </head>
e cole logo ACIMA dela:

 
<script src='url-do-arquivo-mootools'></script> 
<script src='url-do-arquivo-imageMenu' type='text/javascript'></script> 
<script src='url-do-arquivo-mootools.v1.11' type='text/javascript'></script> 
<script type="text/javascript"> if (window.jstiming) window.jstiming.load.tick('headEnd'); </script> 

A parte destacada em negrito é o local que você deverá substituir com a url de seus arquivos hospedados.

4º Passo – Aplicar estilos CSS:

Volte no menu “modelo”, entre na edição HTML do seu template, e procure pela tag ]]></b:skin>
e cole logo ACIMA dela:

 
/*----- Images menu -----*/ 
#kwick { 
width:660px; /* edite largura*/
height:200px;
overflow:hidden;
position:relative;
padding:0;
margin:0pt auto;
}  
#kwick ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
display:block;
width:1000px;
height:200px;
padding:0;
margin:0px;
}
# .kwicks {
display: block;
height: 200px;
margin: 0px;
}
#kwick li {
float: left;
}
li:after {
content: "";
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 200px;
width: 110px;
/*padding: 10px;*/
background: #000;
/*border-right: 5px solid #000;*/
border-right: 2px solid #000;
}
#kwick .kwick span {
display: none;
}

#kwick .opt1 { 
outline: 0; 
background: #000000 url(endereço-da-sua-imagem) ;
 } 
#kwick .opt2 { 
outline: 0; 
background: #000000 url(endereço-da-sua-imagem); 
} 
#kwick .opt3 { 
outline: 0; 
background: #000000 url(endereço-da-sua-imagem); 
} 
#kwick .opt4 { 
outline: 0; 
background: #000000 url(endereço-da-sua-imagem); 
} 
#kwick .opt5 { 
outline: 0; 
background: #000000 url(endereço-da-sua-imagem); 
border-right:1;
 } 
#kwick .opt6{ 
outline: 0; background: #000000 url(endereço-da-sua-imagem); border-right: 1; 
} 

Onde está marcado “endereço-da-sua-imagem” é o local que você deverá inserir os endereços das imagens que irão aparecer no menu.
Em #kwick {width:660px; -> se refere a largura total do menu, altere de acordo com as medidas do seu template.
Em #kwick .kwick -> você poderá alterar a espessura ou cor da borda que separa uma imagem da outra.

5º Passo – Escolher o local que ficará o menu:

Agora escolha o local onde quer posicionar o seu menu.
Um excelente local para instalar este slide é na coluna que fica logo abaixo do cabeçalho, (ou do gadget páginas).
Antes de mais nada, você precisa conferir no painel do blog se no seu template já existe a possibilidade de adicionar um gadget nesta área, através do menu “layout”.
Se não houver um campo para “Adicionar Gadget” abaixo do cabeçalho, você terá que fazer algumas modificações no código do template.
Siga este artigo e veja como Como Instalar Gadgets abaixo do Cabeçalho

Vá no menu “layout, e no campo abaixo do gadget “páginas”, clique em “adicionar um gadget”, escolha o modo HTML/javascript e cole o seguinte código:

 
<div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" href="seu-link-aqui"></a></li> 
<li><a class="kwick opt2" href="seu-link-aqui"></a></li> 
<li><a class="kwick opt3" href="seu-link-aqui"></a></li> 
<li><a class="kwick opt4" href="seu-link-aqui"></a></li> 
<li><a class="kwick opt5" href="seu-link-aqui"></a></li> 
<li><a class="kwick opt6" href="seu-link-aqui"></a></li>
</ul>
</div>
<script type="text/javascript">
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:200});
</script>

Para um melhor funcionamento deste menu, é recomendado que você utilize todas as imagens nos mesmos tamanhos: 320x200

 
[alerta]Lembrando que, a funcionalidade deste script pode variar de acordo com o template.
Antes de adicionar este menu, devo alertar que você deve verificar se já tem instalado algum outro script que funcione a base do JQuery, ou Prototype. Caso tenha, se instalar este menu, poderá ter problemas com os demais scripts, visto que Prototype ,JQuery e MooTools sempre entram em conflito, portanto, faça uma avaliação de quais realmente são mais necessários.
Para melhor entendimento, leia: Por que alguns scripts não funcionam no meu blog.[/alerta]



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

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.

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.

28 Comentários

  1. Raphael disse:

    Cara muito massa esse tutorial, segui tudo e consegui, o menu aparece as imagens e todo, sendo que elas nao deslizam, e ja refiz os passos varias vezes, tem como solucionar isso?
    obg!

  2. ytalo Bessa disse:

    não sei pq mas nao aparece nada quando coloco no meu blog…
    ja repeti tudo varias vezes!

  3. Sandro3a disse:

    ola clau estou com um blog de testes e tentei colocar esse menu achei muito interessante, mas aqui no meu template ele nao passa de 660 px de largura. Ja que vc citou que a funcionalidade deste script pode variar de acordo com o template, a pergunta issu pode ser do meu template?
    Obrigado

  4. Ruth disse:

    Têm como deixar esse menu na vertical?

  5. Phelipe Korreia disse:

    Valew Clau, Muito bom!!

  6. Binho0Marques disse:

    Deu certo agora… Muito obrigado. Se quiser entrar no meu blog pra ver o resultado é: http://www.discoladuh.blogspot.com

  7. .:: Clau ::. disse:

    Binho0Marques
    Eu atualizei a explicação do 5º passo para facilitar o entendimento. Tente novamente.

  8. Binho0Marques disse:

    Eu só gostaria de saber se esse slide é aplicavel no Designer do modelo… pois não tem o código do 5º passo

  9. .:: Clau ::. disse:

    Binho0Marques
    Não tenho como saber o q aconteceu com seu template. Pode ser que tenha ocorrido conflito de javascript, ou vc não seguiu todos os passos direitinho. Para cada caso é um caso, não tenho como te ajudar.

  10. Binho0Marques disse:

    Clau… consegui colocar e tudo mais, o problema é que as imagens não se mechem como se fosse persianas… O broblema é que o meu e no Designer do modelo… Tem como deixar o mesmo efeito?

  11. .:: Clau ::. disse:

    Bruno Costa
    Não tenho como saber o q aconteceu com seu template,não posso te ajudar.

    Diego Almeida
    Eu até editei o post para que o pessoal cole o js acima de /head mesmo, pq pelo jeito a maioria só tá conseguindo instalar o js colando nesse trecho.
    Q bom que vc consegui, e obrigada pelo comentário.

  12. Diego Almeida disse:

    vlw Clau
    essa solução de colocar os "JS" antes do "head" deu certo pra mim.

    Ótimo blog o seu!

  13. Kássio Rômulo disse:

    Clau tem algum template que com certeza funciona este efeito?

    Porque ja tentei em uns 3 templates e não consegui fazer funioncar :(

  14. Bruno Costa disse:

    Olá, eu já coloquei no meu blog, e ficou muito fixe…

    Só tem um problema, desde a segunda imagem até à ultima, tem um tracejado por cima. Sabe-me dizer porque?

    Obrigado

  15. ::Clau:: disse:

    :.kendownload:.
    Tenta colocar o arquivo js acima de </head> e vê o q acontece.

  16. :.kendownload:. disse:

    Clau meu template nao aceita de jeito nenhum o primeiro codigo que possui o endereço dos arquivos JS acima do ]]skin da este erro:

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The reference to entity "d" must end with the ';' delimiter.

    Quando coloca ese mesmo codigo acima do ]]skin funciona, porém as persianas nao mexem :s

    o que faço para resilver? por favor

  17. ::Clau:: disse:

    Lucas Hb:
    Procure no menu, o indice: "Tutoriais Blogger" o tutorial que vc quer é o "efeito shadowbox em imagens e videos".
    Nesse menu estão listados todos os tutoriais que já publiquei aqui no GD, procure sempre dar uma pesquisada lá para ver se tem o q vc procura.

  18. Lucas Hb disse:

    clau, fui ver suas imagens, e quando se clica nelas elas abrem na mesma pàgina,eu acho que è como um menuzinho,e tem a opção de passar pra frente e pra tràs. tem esse tutorial? obg!

  19. ::Clau:: disse:

    @Thays:
    E pq suas imagens devem ter ultrapassado o tamanho de 320×200.

    @www.webpublicdesiner.blogspot.com:
    Experimente hospedar suas imagens em outro site, como o Picasaweb por exemplo.

  20. www.webpublicdesiner.blogspot.com disse:

    olá.
    por favor as minhas imagens não aparece, por favor me
    ajude…
    obs as imagens estão postadas no google sites do
    webpublicdesigner.
    obrigado..

  21. POKER disse:

    as minhas imagens nao aparece, ficam oclutas no
    webpublicdesigner.blogspot.com.
    por favor e ajude
    Att: claudinei

  22. - Thays ?' disse:

    Oiie, queria muito usar esse script! Mas quando eu passo o mouse em cima das imagens, ela não abre por completo, fica faltando um pedaço pra abrir, você sabe me dizer o que eu posso fazer pra arrumar? Muito Obrigada, beijos;*

  23. PCD e cia disse:

    sem problemas, instalarei assim mesmo, sabe o que faco, participarei da promocao, e ganherei um template novinho em folha, vlw…

  24. ::Clau:: disse:

    @PCD e cia:
    Este menu funciona a base de scripts e acredito eu que só possam ser utilizados na horizontal. Infelizmente, vou ficar te devendo.

  25. PCD e cia disse:

    Ola, adorei este menu, mas como faco para coloca-lo na vertical, entende, ja que o modelo dado esta na horizontal.
    Adoro o blog/site, ele me ajuda desde que criei o meu, me ajuda mesmo. Parabens!!!!

  26. ::Clau:: disse:

    @JCT Digit@l:
    Se seu site aceita arquivos javascript, css e html normalmente, acredito que dê pra vc fazer o mesmo procedimento que está no tutorial, a única diferença, é q o código do passo nº5 vc vai colar no local onde quer q o menu fique.

  27. JCT Digit@l disse:

    como faço para colocá-lo no site ao invés de colocá-lo no blog?

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

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