Como criar banners fixo para o Blogger com zoom na imagem (Tutorial)

Olá galera, resolvi criar este passo a passo de como incluir Banners fixo no blogger,

pois durante a criação do meu me deparei com a falta deste conteúdo, ele será bem simples e prático, mas de grande utilidade.

Como todo mundo sabe, um site tem por necessidade ter alguns banners para gerar maior interesse do público.

Assim separei alguns códigos para facilitar a aplicação em seu Site, lembrando que os códigos são editáveis, assim poderá ajustar melhor ao seu Site.

Modelo - Banner largura 100%

Primeiro vamos hospedar as imagens que deseja dentro do Blogger (caso não tenha feito).

Abra o painel de configuração e vá em postagens crie uma nova postagem como rascunho.

faça o Up das imagens desejadas.

Cada banner aqui citado tem um padrão de largura e altura que pode ser ajustado da forma que preferir.

Agora vamos adicionar o código HTML

Abra o painel de configuração do Blogger e vá em Layout e adicione um

gadget “HTML/JavaScript”.

Copie e cole o código e lembrando de adicionar o link de imagem que deseja e o link da URL da página de redirecionamento e clique em salvar.

Altere somente os campos Link da Página e Link da Imagem.

</img>

</a>

</div>

Após adicionar o código vamos estilizar com código CSS.

Abra o painel de configurações e vá em Tema, clique na setinha ao lado e clique em Editar HTML.

Clique dentro do da página do codigo HTML e dê um Ctrl F para abrir a aba de pesquisa dentro do código.

Pesquise pelo por </b:template-skin>

de um espaço entre as chaves de acordo com a imagem abaixo

Copie o código CSS e cole neste espaço e clique em salvar.

#Banner1 {

margin: 0;

display: flex;

margin-left: -214px;

margin-right: -200px;

margin-top: 0;

}

#Banner1 a {

overflow: hidden;

}

#Banner1 a {

display: flex;

margin-left: 10px;

border-radius: 25px;

}

#Banner1 a img {

width: 1880px;

height: 650px;

overflow: hidden;

max-width: 100%;

-webkit-transition: all 0.3s;

}

#Banner1 a:hover img {

-moz-transform: scale(1.1);

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

Nesta configuração o Banner tem um leve Zoom quando o mouse passar em cima.

Modelo- 2 Banner duplo.

Abra o painel de configuração do Blogger e vá em Layout e adicione um

gadget “HTML/JavaScript”.

Copie e cole o código e lembrando de adicionar o link de imagem que deseja e o link da URL da página de redirecionamento e clique em salvar.

Altere somente os campos Link da Página e Link da Imagem.

</img>

</a>

</img>

</a>

</div>

Este modelo apresenta duas imagens diferentes, cada uma com sua URL específica.

Clique dentro do da página do codigo HTML e dê um Ctrl F para abrir a aba de pesquisa dentro do código.

Pesquise pelo por </b:template-skin>

de um espaço entre as chaves de acordo com a imagem abaixo.

Copie o código CSS e cole neste espaço e clique em salvar.

#Banner2 {

margin: 0;

display: flex;

margin-left: -214px;

margin-right: -200px;

margin-top: 0;

}

#Banner2 a {

overflow: hidden;

}

#Banner2 a {

display: flex;

margin-left: 10px;

border-radius: 25px;

}

#Banner2 a img {

max-width: 100%;

-webkit-transition: all 0.3s;

}

#Banner2 a:hover img {

-moz-transform: scale(1.1);

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

Modelo- 3 Banner triplo

.Abra o painel de configuração do Blogger e vá em Layout e adicione um

gadget “HTML/JavaScript”.

Copie e cole o código e lembrando de adicionar o link de imagem que deseja e o link da URL da página de redirecionamento e clique em salvar.

Altere somente os campos Link da Página e Link da Imagem.

</img>

</a>

</img>

</a>

</img>

</a>

</div>

Este modelo apresenta três imagens diferentes, cada uma com sua URL específica.

Clique dentro do da página do codigo HTML e dê um Ctrl F para abrir a aba de pesquisa dentro do código.

Pesquise pelo por </b:template-skin>

de um espaço entre as chaves de acordo com a imagem abaixo.

Copie o código CSS e cole neste espaço e clique em salvar.

#Banner3 {

margin: 0;

display: flex;

margin-left: -214px;

margin-right: -200px;

margin-top: 0;

}

#Banner3 a {

overflow: hidden;

}

#Banner3 a {

display: flex;

margin-left: 10px;

border-radius: 25px;

}

#Banner3 a img {

max-width: 100%;

-webkit-transition: all 0.3s;

}

#Banner3 a:hover img {

-moz-transform: scale(1.1);

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

Modelo- 4 Banner Lateral

.Abra o painel de configuração do Blogger e vá em Layout e adicione um

gadget “HTML/JavaScript”.

Copie e cole o código e lembrando de adicionar o link de imagem que deseja e o link da URL da página de redirecionamento e clique em salvar.

Altere somente os campos Link da Página e Link da Imagem.

</img>

</a>

</div>

Clique dentro do da página do codigo HTML e dê um Ctrl F para abrir a aba de pesquisa dentro do código.

Pesquise pelo por </b:template-skin>

de um espaço entre as chaves de acordo com a imagem abaixo.

Copie o código CSS e cole neste espaço e clique em salvar.

#Banner4 {

margin: 0;

display: flex;

margin-left: -214px; /*Se for usar do lado direito altere right*/

margin-top: 0;

}

#Banner4 a {

overflow: hidden;

}

#Banner4 a {

display: flex;

margin-left: 10px;

border-radius: 25px;

}

#Banner4 a img {

max-width: 100%;

-webkit-transition: all 0.3s;

}

#Banner4 a:hover img {

-moz-transform: scale(1.1);

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

Siga todas as instruções assim funcionara perfeitamente.

Qualquer duvida deixe seu comentário!

One Piece: principais Personagens e suas histórias e habilidades

One Piece é uma popular série de mangá e anime criada por Eiichiro Oda. A história segue Monkey D. Luffy e sua tripulação pirata, os Piratas do Chapéu de Palha, enquanto viajam pela Grand Line em busca do tesouro supremo conhecido como One Piece. Ao longo de sua aventura, eles encontram vários personagens que se tornam parte de sua tripulação ou aliados em sua busca. Aqui estão os personagens principais de One Piece, suas histórias e suas habilidades: Confira este conteúdo em vídeo! 1. Monkey D. Luffy: Luffy é o capitão dos Piratas do Chapéu de Palha e o principal protagonista da série. Ele comeu a fruta Gomu Gomu, uma akuma no Mi que lhe concedeu a habilidade de esticar seu corpo como borracha. O sonho de Luffy é se tornar o Rei dos Piratas e encontrar o One Piece. Ele possui imensa força física, resistência notável e uma atitude de nunca desistir. 2. Roronoa Zoro: Zoro é o espadachim dos Piratas do Chapéu de Palha e o primeiro membro da tripulação de Luffy. Ele empunha três espadas,

LER MAIS...

Universo Geek Show

Pesquisar este blog