Pular para o conteúdo principal

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

Imagem
Por

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!

Marcadores:
Local: Brasil

Comentários

Postar um comentário

Postagens mais visitadas deste blog

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

Por
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, ...
Postar um comentário
LER MAIS...

One Piece: Top vilões mais fortes da saga

Por
Aqui estão os vilões mais fortes da série One Piece. Observe que as classificações podem ter mudado no mangá desde então, esta lista pode não incluir novos personagens ou power-ups introduzidos recentes Kaido:  Conhecido como "Kaido das Bestas", ele é um dos Quatro Imperadores do Mar. Kaido possui imensa força física e é considerado praticamente indestrutível, com a capacidade de se transformar em um enorme dragão. Big Mom:  Também um dos Quatro Imperadores, Big Mom ou Charlotte Linlin, tem uma quantidade enorme de poder devido à sua habilidade de Akuma no Mi, Soru Soru no Mi. Ela pode manipular almas e criar manos poderosos para ajudá-la na ba...
Postar um comentário
LER MAIS...

Guerra Civil da Marvel: tudo que precisa saber e onde ler o arco completo

Por
Guerra Civil da Marvel guia completo para leitura A Guerra Civil da Marvel é um grande enredo cruzado que ocorreu no universo da Marvel Comics. Foi escrito por Mark Millar e ilustrado por Steve McNiven e foi publicado de 2006 a 2007. A história explora os dilemas morais e políticos enfrentados pela comunidade de super-heróis quando o governo dos Estados Unidos introduz a Lei de Registro de Super-Humanos. O Superhuman Registration Act é uma lei que exige que todos os indivíduos com habilidades sobre-humanas, incluindo super-heróis,  para revelar suas identidades secretas e trabalhar sob o controle do governo. Isso gera uma divisão entre os super-heróis, com o Homem de Ferro (Tony Stark) apoiando o ato e o Capitão América (Steve Rogers) se opondo. O conflito entre os dois heróis icônicos leva a uma guerra civil de super-heróis,  com cada lado recrutando aliados para apoiar sua causa. O arco da história da Guerra Civil é expansivo, abrangendo várias histórias em quadrinhos e q...
Postar um comentário
LER MAIS...