[PEDIDO] Como colocar banner rotativo de cabeçalho em seu blog

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[PEDIDO] Como colocar banner rotativo de cabeçalho em seu blog

Mensagem por Willi em Qui Fev 03, 2011 9:40 pm

Tipo, cada vez que você entra no blog, aparece um cabeçalho diferente. Já revirei o Google procurando tutoriais sobre isso e nenhum da certo. Alguém sabe de algum tutorial que funcione? Ou melhor, sabe como fazer pra me ensinar? Por favor gente!

__________________________________________________
Intel Core i5 4440 3.10 GHz | EVGA GTX 660 FTW ACX 2GB GDDR5 | MSI B85M-E45 Military Class 4 | RAM Corsair Vengeance 1x8 GB 1600 MHz | HD Seagate 1TB 7200 RPM | Corsair CX500M | Gabinete Cougar Archon + RGB LEDs | Windows 10 PRO 64-bits | Monitor LG 23MP55HQ-P 1080p 60 Hz | Amplificador Hayonik Neo 200w RMS + Grave Auxiliar Sharp | Teclado Mtek KP-807 | Mouse Fortrek Spider | Mousepad PCYES Speed Racer 800x400mm | Cadeira Cavaletti NewNet 16003

Textos | Jogos Finalizados


Willi
Rank 125 - Super Mario Galaxy 2
Rank 125 - Super Mario Galaxy 2

Mensagens : 6874
Data de inscrição : 05/05/2010
Idade : 20
Localização : Maravilha, SC

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [PEDIDO] Como colocar banner rotativo de cabeçalho em seu blog

Mensagem por Alan Borges em Qui Fev 03, 2011 9:53 pm

procuro por isso tbm

Alan Borges
Rank 14 - Super Mario World
Rank 14 - Super Mario World

Mensagens : 1329
Data de inscrição : 04/05/2010
Idade : 23
Localização : Arapongas

Ver perfil do usuário http://n64brasil.blogspot.com

Voltar ao Topo Ir em baixo

Re: [PEDIDO] Como colocar banner rotativo de cabeçalho em seu blog

Mensagem por Willi em Qui Fev 03, 2011 10:53 pm

Já descobri. Não precisa mais. Mas obrigado mesmo assim galera!

__________________________________________________
Intel Core i5 4440 3.10 GHz | EVGA GTX 660 FTW ACX 2GB GDDR5 | MSI B85M-E45 Military Class 4 | RAM Corsair Vengeance 1x8 GB 1600 MHz | HD Seagate 1TB 7200 RPM | Corsair CX500M | Gabinete Cougar Archon + RGB LEDs | Windows 10 PRO 64-bits | Monitor LG 23MP55HQ-P 1080p 60 Hz | Amplificador Hayonik Neo 200w RMS + Grave Auxiliar Sharp | Teclado Mtek KP-807 | Mouse Fortrek Spider | Mousepad PCYES Speed Racer 800x400mm | Cadeira Cavaletti NewNet 16003

Textos | Jogos Finalizados


Willi
Rank 125 - Super Mario Galaxy 2
Rank 125 - Super Mario Galaxy 2

Mensagens : 6874
Data de inscrição : 05/05/2010
Idade : 20
Localização : Maravilha, SC

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [PEDIDO] Como colocar banner rotativo de cabeçalho em seu blog

Mensagem por Convidad em Sex Fev 04, 2011 4:55 pm

Veja só!
Descrição: Bom, vou postar aqui 2 Tutoriais diferentes sobre esse assunto.


Primeiro



A) Imagens para o Header

A primeira providência é criar ou escolher as imagens e hospeda-las. Sugiro o Picasa para subir suas imagens. Para uma apresentação mais adequada, as imagens devem ter as mesmas medidas de largura e altura e estarem de acordo com as medidas de seu template / header-wrapper.

No teste usei imagens de 800px por 200px e ajustei as medidas de um template Mínima, aumentando a largura do outer-wrapper e do header-wrapper para 800px.

Depois de hospedar suas imagens, anote o endereço de cada uma.


B) Habilitar o Header-Wrapper para adicionar gadgets

Esta etapa não é indispensável, mas sua página "Layout" ficará mais organizada e você não corre riscos de deletar o gadget acidentalmente.

1. Em "Layout" - "Editar HTML", salve uma cópia de seu template, clicando em "Baixar Modelo Completo";
2. Mantenha desmarcada a caixinha "Exibir Modelos de Widgets" desmarcada;
3. Localize o código do Header-Wrapper:

Código:
<div id='header-wrapper'>
            <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

4. Modifique o código, alternado onde está no para yes e onde está maxwidgets='1' para maxwidgets='2':

Código:
<div id='header-wrapper'>
            <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

5. Visualize o template e salve


C) Adicionar o script em um gadget HTML/JavaScript

Após ter habilitado a adição de mais gadgets no header-wrapper, passe para a aba "Elementos de Página". Lá você verá um novo espaço para adicionar Gadgets na área do Header.

Adicione um gadget HTML/JavaScript e cole o código abaixo no box. Não coloque título no Gadget:

Código:
<script type="text/javascript">
var banner= new Array()
banner[0]="http://endereço-da-imagem-1"
banner[1]="http://endereço-da-imagem-2"
banner[2]="http://endereço-da-imagem-3"
banner[3]="http://endereço-da-imagem-4"
banner[4]="http://endereço-da-imagem-5"
var random=Math.floor(5*Math.random());
document.write("<style>");
document.write("#header-wrapper {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>


Coloque os endereços das imagens que você hospedou e salve o gadget.

DEMO




Se a sua imagem ficou espremida na altura, acerte os estilos do header-wrapper em seu template:

Código:
#header-wrapper {
  width: 800px; /* largura da imagem */
  height: 200px; /* altura da imagem */
  margin: 0 auto;  /* centraliza a imagem */
  }

Segundo
Primeiro passo precisamos ocultar o título do blog. Então procure na página editar HTML por algo parecido com o trecho abaixo, não será igual porque cada blog tem a próprio estilo do titulo, mas o importante é #header h1:

Código:
#header h1 {
text-align: left;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding: 15px 20px 0 20px;
}


E coloque isso display: none; (inclusive o ponto e vírgula) entre as chaves { }, não importa em qual linha, mas tem que ser dentro das chaves. E clique para salvar.
Isso faz ocultar o título do blog, você não precisa mudar mais nada, ele só vai ocultar, caso resolva mostrar novamente o título basta retirar essa linha que colocamos agora.

Agora veja na pagina layout se aparece o quadro adicionar gadget entre o cabeçalho e as postagens, pois será lá que iremos colocar o código do banner rotativo caso não esteja visível, veja nossa explicação de como fazer isso aparecer essa postagem fala em adicionar elemento de página, pois quando fui publicada era assim que os gadgets eram chamados no blogspot, mas a explicação funciona normalmente. Outra coisa se usar uma imagem no titulo precisa tirar clicando para editar o cabeçalho. Depois disso clique para adicionar um gadget embaixo do cabeçalho, na página que aparece escolha a opção HTML/javascritp e cole o código para criar banner aleatórioabaixo:

Código:
<script language="JavaScript">
hoje = new Date()
numero_de_imagens = 5
segundos = hoje.getSeconds()
numero = segundos % numero_de_imagens
if (numero == 0){
banner = "URL DA IMAGEM"
}
if (numero == 1){
banner = "URL DA IMAGEM"
}
if (numero == 2){
banner = "URL DA IMAGEM"
}
if (numero == 3){
banner = "URL DA IMAGEM"
}
if (numero == 4){
banner = "URL DA IMAGEM"
}
document.write('<div align="center"><img src="' + banner + '" border=0></div>')
</script>

E já está pronto, mas não se esqueça de colocar os endereços corretos das imagens no código, para alterar esse código aqui tem explicado como alterar o código e adicionar imagens, nessa explicação está dizendo sobre colocar frases, mas o código é idêntico a este que usamos aqui para imagens.
Fonte:http://www.createmais.com/2010/12/como-por-header-rotativo-no-blogger.html
Já usei no S&K ms deixava lento....
E boa sorte para o Blog!

Convidad
Convidado


Voltar ao Topo Ir em baixo

Re: [PEDIDO] Como colocar banner rotativo de cabeçalho em seu blog

Mensagem por Willi em Sex Fev 04, 2011 8:10 pm

No Point eu usei um tutorial BEEEEEM mais simples, foi esse:
Spoiler:
http://www.dicasparablogs.com.br/2008/10/banner-rotativo.html

__________________________________________________
Intel Core i5 4440 3.10 GHz | EVGA GTX 660 FTW ACX 2GB GDDR5 | MSI B85M-E45 Military Class 4 | RAM Corsair Vengeance 1x8 GB 1600 MHz | HD Seagate 1TB 7200 RPM | Corsair CX500M | Gabinete Cougar Archon + RGB LEDs | Windows 10 PRO 64-bits | Monitor LG 23MP55HQ-P 1080p 60 Hz | Amplificador Hayonik Neo 200w RMS + Grave Auxiliar Sharp | Teclado Mtek KP-807 | Mouse Fortrek Spider | Mousepad PCYES Speed Racer 800x400mm | Cadeira Cavaletti NewNet 16003

Textos | Jogos Finalizados


Willi
Rank 125 - Super Mario Galaxy 2
Rank 125 - Super Mario Galaxy 2

Mensagens : 6874
Data de inscrição : 05/05/2010
Idade : 20
Localização : Maravilha, SC

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [PEDIDO] Como colocar banner rotativo de cabeçalho em seu blog

Mensagem por Conteúdo patrocinado Hoje à(s) 12:39 pm


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum