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!

Universo Geek Show

Pesquisar este blog