Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1495697232
Vida do cache: 1495740432
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

Header

Imagens Rotativas no Cabeçalho do blog

Existem tantas maneiras legais de personalizar o Layout do blog, para dar uma aparência mais profissional e exclusiva, deixando o template com o seu jeito.
Você já conferiu aqui várias dicas a respeito de personalização, e hoje vai conferir mais uma forma de personalizar o cabeçalho no seu blog.

Neste tutorial você vai ver como é fácil apresentar várias imagens no cabeçalho de forma que a cada carregamento de página as imagens se alterne, ou seja, exibindo uma imagem diferente no cabeçalho para que , sempre que alguém entrar em seu blog , a imagem do cabeçalho mude.

1º Passo:
A primeira coisa a se fazer : criar as imagens que você irá utilizar no seu cabeçalho. As imagens devem ter exatamente o mesmo tamanho e largura do seu header.

2º passo:
Segunda coisa: Hospedar as imagens que você irá utilizar.
Se quiser confira onde hospedar as imagens utilizadas no layout.

3º Passo:
Agora você precisa conferir no painel do blog se no seu template há a possiblidade de adicionar um gadget , através de “Elementos de Página”.
Se não houver, você terá que fazer algumas modificações no código que define o cabeçalho.

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


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITULO DO BLOG (Cabeçalho)' type='Header'/>
</b:section>

(Se quiser use crtl+f e procure pela 1ª linha)

Altere os seguintes trechos:
Onde está escrito TRUE troque por FALSE.
onde está maxwidgets=’1′ , troque por maxwidgets=’5′; onde está showaddelement=’no’ , troque por showaddelement=’yes’;

Salve as alterações e vá em “design”, você verá que abaixo do cabeçalho existe um campo para Adicionar Gadget, é lá que você irá colar o código para exibir imagens Rotativas no cabeçalho.
Escolha adicionar um gadget do tipo “HTML/JavaScript” e cole o código abaixo:


<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="ENDEREÇO-DO-SEU-BLOG"><img alt="NOME DO BLOG" src="ENDEREÇO-DA-IMAGEM-1"/></a>'
quotes[1]='<a href="ENDEREÇO-DO-SEU-BLOG"><img alt="NOME DO BLOG" src="ENDEREÇO-DA-IMAGEM-2"/></a>'
quotes[2]='<a href="ENDEREÇO-DO-SEU-BLOG"><img alt="NOME DO BLOG" src="ENDEREÇO-DA-IMAGEM-3"/></a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>

No código acima irão aparecer 3 imagens diferentes, mas se você quiser incluir mais imagens, copie esta linha a seguir e acrescente-a no código acima, bem antes do trecho: var whichquote=Math.floor(Math.random()*(quotes.length))


quotes[X]='<a href="ENDEREÇO-DO-SEU-BLOG"><img alt="NOME DO BLOG" src="ENDEREÇO-DA-IMAGEM-3"/></a>'

Troque onde está [X] pelo número correspondente a imagem, que deve seguir uma sequência, por exemplo, se a última foi [2], esta deverá ser [3] e assim consecutivamente.

Agora a cada vez que seu leitor carregar uma página no seu blog, será exibida uma imagem diferente no cabeçalho de forma rotativa.



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.

23 Comentários

  1. Diogo disse:

    Eu segui todo os tutorial, deu certo, mais o problema, é que as imagegens, não estão centralizadas, elas meio que ficar mais de um lado,

  2. Wizard Jd. Amanda - Hortolândia disse:

    Procurei vários, mas nenhum me ajudou. O seu encaixou!
    Obrigado.

  3. IRAN MNR #1 disse:

    otima dica…
    da pra fazer isso com o plano de fundoo

    imagine so um blog novo todo dia rs

  4. Celio disse:

    eu não axei o primeiro html que pediu como posso axar ja tentei no Ctrl + f Mais não Consigo axar e eu nem marquei expandir modelos de widgets

  5. Alexandre Rodrigues disse:

    Como posso colocar esse codigo direto no codigo fonte,
    sem ser por widgets

  6. ROÐRiGO OLI?El?A disse:

    Alias, troquei… tava tudo certo, mas vi que pouquinho antes de carregar as novas imagens do cabeçalho, aparecia a antiga. Eu voltei, carreguei o backup do modelo, e fui em elementos de paginas e exclui a imagem antiga, dai segui seus procedimentos. Entao, antes de fazer isso, é bom excluir o cabeçalho atual. pelo menos foi meu caso.

  7. ROÐRiGO OLI?El?A disse:

    Muito bom.. fiz e deu tudo certinho.. vlw
    Quanto ao tamanho: altura e largura, o pessoal tem que saber qual é o tamanho do seu cabeçalho antes de mais nada, se nao fica desproporcionado.. o meu está acertado 958 x 85.. vlw

  8. Ulquiorra Cifer disse:

    Olá eu fiz tudo certo mais a imagem no cabeçalho ficou pequena, pode me ajudar.

  9. .:: Clau ::. disse:

    Euzebio
    Eu quem agradeço pelo comentário e pelo retorno. Excelente dia pra vc tb 😉

  10. Euzebio Alves disse:

    Olá Clau…
    Fico muito grato por sua atenção.
    Eu tentei resolver este problema mas infelizmente não consegui.
    Apliquei sua sugestão e não obtive resultado positivo, tentei inclusive aplicando "z-index" mas mesmo assim não obtive bons resultados.
    Pra corrigir o problema descobri uma solução um pouco diferente, que seria redimensionar a imagem do background, que é única e fixa e reposicionar os elementos, como: "PageList", "LinkList" e até mesmo o "Main-Wraper", fiz isso e obtive um resultado até satisfatório, mas por se tratar de um template muito complicado e com códigos que ainda desconheço, o reposicionamento de certos elementos foi impossível.

    O template que estou customizando é o seguinte:
    (caso tenha interesse em conhecer – se ainda não conhece)

    "Series: Save the King!
    Theme Name: Pixel Crash
    Theme URI: http://savetheking-btwtemplates4.blogspot.com/
    Version: 1.0"

    Mais uma vez agradeço sua atenção e desejo sucessos sempre!
    Muito obrigado e tenha um Excelente Dia!
    Abraços!

  11. .:: Clau ::. disse:

    Euzebio Alves
    Tenta estipular um espaçamento : "margin-top: XXpx;" no CSS do pagelist. veja se dá certo.

  12. Euzebio Alves disse:

    Olá Clau,
    Olha, eu fiz uma pesquisa no google por "Imagens Rotativas No Cabeçalho do Blog" e encontrei o seu excelente post.
    Eu inplementei este hack no blog e funcionou certinho, só tem um problema…
    Eu uso um "PageList" como menú horizontal, e ele é customizado, o que acontece é que as imagens rotativas sempre ficam sobre uma parte dos links do menú "PageList".
    O elemento "HTML/JavaScrip" das imagens rotativas está posicionado acima do elemento "PageList" que funciona como menú. Tentei inverter os lugares mas, obviamente não funcionou.
    Ficaria grato se você pudesse me ajudar a resolver este problema…

  13. Lucas disse:

    Clau,algumas vezes preciso postar no meu blog (nas postagens),alguns códigos imensos,e muitas vezes eles saem para fora do template de tão grande,como coloco essa caixinha de còdigo no meu blog,com barra rolante? Se não tive algum tutorial com esse assunto,considere uma sugestão!,Estou precisando muito. È muito ùtil tambèm para códigos longos. Obrigado Clau.

  14. .:: Clau ::. disse:

    FJP
    Tente procurar pela 1ª linha. Mas não tiver esse trecho no seu template, não tem como vc usar esse hack, a não ser que vc inclua o trecho no seu template, mas terá q testar e ver se dá certo.

  15. FJP disse:

    Muito bom dia , noite ou tarde… Estou testando meu template, mas não consigo achar as linhas do Html que vc , pôs aí! http://cincoominutos.blogspot.com/

  16. Adriana Sajermann disse:

    Ficou certinho, show de bola, Parabens.

    Pena que as imagens não mudão sempre na sequencia, uma hora vc clica ai entra a imagem 1, outra hora vc clica entra na 1 de novo…

    Ou seja, Repete muito as mesmas imagens, e coloquei 6 imagens no meu blog.

    Mas brigadão, otimo tutorial!

  17. dasilv disse:

    Clau, vou fazer e verificar o que disse.
    Depois falo pra vc se deu certo.
    Muito obrigada pela ajuda, amiga!
    Beijo grande!

  18. ::Clau:: disse:

    @Dani:
    Eu vi que vc não definiu o tamanho da largura do seu 'Header', pode ser que seja isso.
    Em #header-wrapper, tenta definir o width(largura) e height(altura) do tamanho das imagens q vc vai usar.
    Outra dica: vc está hospedando essas imagens onde? Se for no blogger, qdo fizer upload selecione o modo "grande" e marque o posicionamento dela em "nenhum", veja se vc está copiando o endereço da imagem de forma correta, se qdo aberta, ela fica grande, do tamanho real.
    Faz o teste.

  19. Das disse:

    Clau, uma dúvida: Por que as imagens aparecem pequenas?
    Fiz três tamanhos diferentes – todos grandes – e nunca fica certo, nem mesmo centralizado!
    Tem a ver com o template?

    Se puder me ajudar, ficaria muito agradecida!
    Beijos!
    dani

  20. .:: Clau ::. disse:

    @Dani:
    Fico feliz que tenha conseguido!
    Bjos.

  21. DAS disse:

    Fiz e deu super certo, Clau!
    Você é ótima!
    Beijo grande!
    dani

  22. Adiléa disse:

    Parabéns!!! Vou tentar colocar rolagem no cabeçalho do meu blog. Obrigada

  23. ?Carla_Witch Princess? disse:

    Bom dia, Clau!
    Mais uma dica + que útil, essa sua…
    Há tempo q eu tenho vontadew de colocar
    + widgets no cabeçalho do blog e não tinha como…
    Adorei!
    Ótimo feriado p/ vc…
    Bjinhossssssssss

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

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