WordPress – Colocando um Banner no seu Blog

Colocando um Banner no seu Blog

Atendendo ao pedido do nosso leitor Caio Andrade, esse vídeo mostra como mudar a posição da logomarca e também como criar novas áreas flutuantes sobre o blog. Siga os passos corretamente e aprenda como inserir um banner na parte superior direita do seu site.

Versão em texto do vídeo

Esse vídeo é a pedido do nosso leitor Caio Andrade, que mandou uma mensagem para a gente através do site perguntando como é que ele modifica o posicionamento dessa imagem no cabeçalho.

Já oferecemos um vídeo em que mostramos como coloca uma logomarca em nosso site e na verdade, o Caio quer saber como ele muda a posição para que ele possa colocar alguma outra coisa.

Nesse vídeo mostraremos como você pode posicionar a logomarca e também como você pode utilizar a área livre restante. Em nosso exemplo, temos um arquivo ‘banner.jpg’, nós vamos aprender como colocar lá no site, vamos utilizar o ‘Gerenciador de Arquivos’ da Hostnet, e como colocamos para aparecer em nosso site.

A primeira coisa que devemos fazer é acessar o painel de controle Hostnet, em
‘Gerenciador de Arquivos’, para mandarmos o arquivo do banner. Acessamos a pasta do ‘blog do Juvenal’, pasta ‘Imagens’ e clicamos em ‘Enviar Arquivos’, para enviar um arquivo que está em nossa máquina, que é o ‘banner.gif’.

Depois de salvar as alterações, o arquivo ‘banner.gif’ estará dentro da pasta ‘Imagens’. Agora, vamos mexer em nosso blog, vamos acessar o painel de controle, clicar em ‘Aparência’ e escolher a opção ‘Editor’. A primeira coisa que vamos fazer é o que o Caio pediu que é modificar a posição da logomarca.

Modificando a posição da logomarca

No editor de temas, vamos abrir o cabeçalho pra podermos entender uma coisa antes de modificar o estilo. Vamos procurar onde nós colocamos no vídeo anterior, a nossa a logomarca, que em nosso caso é: <img src=”/juvenal/images/logo.png”>, notem que estamos dentro de uma div, que é a header ou cabeçalho, isso vai ser muito importante na hora de procurar dentro do estilo.

Então nós temos um header e um H1, que é o título do nosso site, em que nós passamos a colocar a imagem.

Vamos procurar na Lista de Estilos, a nossa folha de estilo do site. Dentro do documento vamos procurar a área header, que foi aquela mostrada anteriormente, aquele div dentro do header e nós estamos dentro do header com o H1.

Pelo vídeo você pode perceber que temos um parâmetro chamado padding que indica o deslocamento do cabeçalho dentro do layout do site, usando o primeiro número da esquerda para direita da tela, pode-se fazer o deslocamento vertical e horizontal, como por exemplo eu quero colocar a imagem quase no centro, então chutamos um valor e substituimos a numeração da direita para a esquerda da tela, de 30px, colocamos 450px, porém vai ficar muito próximo do centro então escolhemos mas salvamos as alterações e recarregamos a página do blog.

Exemplos:

– Antes:

padding: 20px 0 0 30px;

– Depois:

padding: 20px 0 0 450px;

Então, podemos observar que quase passamos pro outro lado, mas a imagem está na posição desejada.

Se você modificar o outro número, no caso o 450 que era o primeiro (movemos para a direita) e em seguida diminuirmos o padding de 20 para 0, veremos que a logomarca será movida para cima. Salvamos as alterações e verificamos que a imagem subiu um pouco.

Em nosso caso, voltaremos as posições para seus valores originais, mas você pode modificá-las de acordo com suas necessidades. Então procuramos no código o #header h1 e modificamos o padding novamente para: padding: 20px 0 0 30px; valores já configurados anteriormente como padrão.
Note que o link vai junto, tudo perfeito… É o css agindo em nosso site.

Vamos utilizar a área vazia para fazer nosso banner.

Criando um banner superior

Voltaremos lá para o cabeçalho, no editor de temas e clicaremos na palavra ‘Cabeçalho’, então procuramos o div cabeçalho (veja um exemplo no vídeo), basta ter esse conhecimento básico de html e css ou seguir nosso vídeo e você não erra!

Embaixo do div cabeçalho criaremos um novo div, então tudo que estiver entre as tags:

<div>

</div>

Será uma nova divisão css, então criaremos uma nova classe que será a:

< div class=”banner”>

Você pode colocar o nome que quise, com tanto que lembre o nome da classe. Em seguida, colocamos:

<img src=”/juvenal/imagens/banner.gif”>

Nesse div você pode colocar qualquer código, por exemplo, você faz uma parceria com algum site e ele te dá o código do banner e você coloca entre o <div> e </div>

Salvamos as alterações e verificamos que o banner está no local errado, queremos o bannner flutuando, isso porque não existe a div banner. Para criá-la voltamos ao editor de estilo e abrimos a folha de estilo, procuramos o #header e acima dele criamos uma nova classe, que será:

.banner {

}
Tudo que for escrito entre essas chaves vai fazer parte da formatação do banner. Inserimos a posição assim:

.banner {
position: absolute; (Não se esqueça do ponto e vírgula no final)

}

Usaremos dois parâmetros, o top e o left:

.banner {
position: absolute;
top: 10px;
left: 400px;
}

Chutaremos valores, como como 10pixels no topo, que é a distância entre a barra abaixo da barra de navegação até o topo da imagem. Se eu quiser uma distância maior, em nosso caso colocamos só10px, da esquerda para direita colocamos uns 400px para posicionar o banner.

Então top é a distância da parte de cima até a imagem e left é a distância do lado esquerdo até a imagem. Em seguida, salvamos as alterações e percebemos que o banner vai saltar para a div determinada, mas ele ficou um pouco torto e diminuiremos o tamanho um pouco mais para a esquerda. Determinamos o left para 380px e depois atualizamos a página.

Utilize o css para posicionar o seu banner em qualquer lugar da tela, nós utilizamos um espaço que estava livre para colocar nossa propaganda.

Mandamos um abraço para o Caio Andrade e para todos que estão visitando o site. Sempre que tiver dúvidas mandem para nós, na medida do possível serão respondidas ou criaremos um vídeo como foi feito para o Caio.



Tags:Banner, Super WordPress, WordPress

Anúncios

Deixe um comentário

Faça o login usando um destes métodos para comentar:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: