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

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%



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


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.

<div id="Banner1">

 

    <a href="LINK DA PÁGINA">

        <img src="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


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



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.


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



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.

<div id="Banners2">

    <a href="LINK DA PÁGINA">

        <img src="LINK DA IMAGEM" />

        </img>

    </a>

    <a href="LINK DA PÁGINA">

        <img src="LINK DA IMAGEM" />

        </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



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



.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.

<div id="Banner3">

    <a href="LINK DA PÁGINA">

        <img src="LINK DA IMAGEM" />

        </img>

    </a>

    <a href="LINK DA PÁGINA">

        <img src="LINK DA IMAGEM" />

        </img>

    </a>

    <a href="LINK DA PÁGINA">

        <img src="LINK DA IMAGEM" />

        </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


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





.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.



<div id="Banner1">

 

    <a href="LINK DA PÁGINA">

        <img src="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!

Comentários

Loki: Das Mitologias Nórdicas ao Universo Cinematográfico da Marvel

Loki: Das Mitologias Nórdicas ao Universo Cinematográfico da Marvel
Olá, amante do Universo Marvel e fã do Deus da Trapaça! Se você está aqui, é porque, assim como eu, tem um profundo interesse pelo personagem Loki e suas incríveis aventuras no Universo Cinematográfico da Marvel. Neste conteúdo, vamos explorar as origens fascinantes de Loki, suas curiosidades mais intrigantes e até mesmo alguns dos easter eggs encontrados na primeira temporada da série "Loki." Prepare-se para uma viagem emocionante através do tempo e do espaço enquanto mergulhamos na história deste personagem icônico da Marvel. Vamos lá!

INSCREVA-SE NO NOSSO CANAL DE GAMEPLAY

Leia Mais...

Top 10: Confira as séries de anime altamente assistidas no mundo

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

Resident Evil 4 Remake: O Mod Insano que Transforma Tudo em Infinito