Banner em blocos animados - Blocos com css e javascript

2 comentários
Banner animado

Banners em blocos

Neste artigo, vamos explicar como editar e inserir blocos animados em seu blog, para divulgar produtos ou mostrar algo com estilo. A ideia da animação nos blocos é justamente chamar a atenção do leitor para o que será divulgado, porém, eles são pequenos e estão agrupados, ganhando espaço e tornando o layout muito mais elegante.

Os banners em blocos animados foram desenvolvidos com css e javascript, com várias animações que variam de bloco para bloco, tornando atrativo o visual do que você irá divulgar e, também, induzindo o leitor ao clique em cada bloco. Os banners possuem links nos textos e as imagens no fundo dos blocos são de dimensões únicas.

Com uma medida de 100 px por 100 px é possível aplicar os mais variados formatos de imagens e gifs animados dentro dos blocos. Os textos são elegantes, cuja edição você verá no tutorial, mais a seguir.

Os blocos nada mais são do que uma maneira dinâmica de divulgar algo de maneira que induza o leitor ao clique, deixando o layout do blog elegante, reduzindo o espaço e dando um ar de profissionalismo.

Toda a edição do código fonte do Gadget foi feita por nós, do BG, e disponibilizamos este modelo para que você usufrua e melhore o gerenciamento do seu blog.

Tutorial

Para começarmos, copie o código da caixa abaixo:
<style>
#BG { font: 8pt normal Arial, sans-serif; height: auto; margin: 0px auto 0 auto; text-align: center; width: 300px; } /* Image Box Style */ #BG .box { border: 5px solid rgba(32, 5, 5, 0.23); cursor: pointer; height:
100px; float: left; margin: 5px; position: relative; overflow: hidden; width: 100px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; box-shadow: 1px 1px 1px 1px #ccc; }
transition: all 300ms ease-out;
#BG .box img { position: absolute; left: 0; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; } /* Caption Common Style */
out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; left: 0; } /** Caption 1: Simple **/ #BG .box .simple-caption { height: 30px; width: 100px; display: block; bottom: -30px; line-height:
#BG .box .caption { background-color: rgba(0,0,0,0.8); position: absolute; color: #fff; z-index: 100; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease- 25pt; text-align: center; } /** Caption 2: Full Width & Height **/ #BG .box .full-caption { width: 100px; height: 100px; top: -100px; text-align: left; padding: 0px; } /** Caption 3: Fade **/ #BG .box .fade-caption,
ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; } #BG .box .scale-caption h3 { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -
#BG .box .scale-caption { opacity: 0; width: 100px; height: 100px; text-align: left; padding: 1px; } /** Caption 4: Slide **/ #BG .box .slide-caption { width: 100px; height: 100px; text-align: center; padding: auto; left: 100px; } /** Caption 6: Scale **/ #BG .box .scale-caption h3, #BG .box .scale-caption p { position: relative; left: -200px; width: 100px; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms o-transition-delay: 300ms; -ms-transition-delay: 300ms; transition-delay: 300ms; } #BG .box .scale-caption p { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -
1; } /** Slide Caption :hover Behaviour **/ #BG .box:hover .slide-caption { background-color: rgba(0,0,0,1) !important; -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform:
ms-transition-delay: 500ms; transition-delay: 500ms; } /** Simple Caption :hover Behaviour **/ #BG .box:hover .simple-caption { -moz-transform: translateY(-100%); -o-transform: translateY(-100%); - webkit-transform: translateY(-100%); opacity: 1; transform: translateY(-100%); } /** Full Caption :hover Behaviour **/ #BG .box:hover .full-caption { -moz-transform: translateY(100%); -o-transform: translateY(100%); -webkit-transform: translateY(100%); opacity: 1; transform: translateY(100%); } /** Fade Caption :hover Behaviour **/ #BG .box:hover .fade-caption, #BG .box:hover .scale-caption { opacity: translateX(-100%); opacity: 1; transform: translateX(-100%); } #BG .box:hover img#image-4 { -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%);
<a href = "http://servicobg.blogspot.com.br/"> <span class="caption scale-caption">
transform: translateX(-100%); opacity: 1; } /** Scale Caption :hover Behaviour **/ #BG .box:hover #image-6 { -moz-transform: scale(1.4); -o-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); } #BG .box:hover .scale-caption h3, #BG .box:hover .scale-caption p { -moz-transform: translateX(200px); -o-transform: translateX(200px); -webkit-transform: translateX(200px); transform: translateX(200px); } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://demo.hongkiat.com/_nav/js/nav.js" type="text/javascript"></script> <center> <div id="BG"> <!-- Image Caption 1 --> <div id="box-6" class="box"> <img id="image-6" src="http://www.iconsdb.com/icons/preview/black/blogger-4-xxl.png" height= "100px" width="100px" /> <h3>Anuncie aqui!</h3> <p>Este espaço está disponivel para anúncio. contate-nos</p> </span></a></div> <!-- Image Caption 2 --> <div id="box-2" class="box">
<!-- Image Caption 2 -->
<img id="image-2" src="http://www.iconsdb.com/icons/preview/black/wordpress-6-xxl.png" height= "100px" width="100px" /> <a href = "http://servicobg.blogspot.com.br/"> <span class="caption full-caption"> <h3>Anuncie aqui!</h3> <p>Este espaço está disponivel para anúncio. contate-nos</p> </span></a></div> <!-- Image Caption 3 --> <div id="box-3" class="box"> <img id="image-3" src="http://www.iconsdb.com/icons/preview/black/money-bag-xxl.png" height= "100px" width="100px" /> <a href = "http://servicobg.blogspot.com.br/"> <span class="caption fade-caption"> <h3>Anuncie aqui!</h3> <p>Este espaço está disponivel para anúncio. contate-nos</p> </span></a></div> <!-- Image Caption 4 --> <div id="box-4" class="box"> <img id="image-4" src="http://www.iconsdb.com/icons/preview/black/phone-5-xxl.png" height= "100px" width="100px"/> <a href = "http://servicobg.blogspot.com.br/"> <span class="caption slide-caption"> <h3>Anuncie aqui!</h3> <p>Este espaço está disponivel para anúncio. contate-nos</p> </span></a></div> <div id="box-2" class="box">
</center>
<img id="image-2" src="http://www.iconsdb.com/icons/preview/black/google-code-xxl.png" height= "100px" width="100px"/> <a href = "http://servicobg.blogspot.com.br/"> <span class="caption full-caption"> <h3>Anuncie aqui!</h3> <p>Este espaço está disponivel para anúncio. contate-nos</p> </span></a></div> <!-- Image Caption 6 --> <div id="box-6" class="box"> <img id="image-6" src="http://www.iconsdb.com/icons/preview/black/google-blog-search-xxl.png" height= "100px" width="100px"/> <a href = "http://servicobg.blogspot.com.br/"> <span class="caption scale-caption"> <h3>Anuncie aqui!</h3> <p>Este espaço está disponivel para anúncio. contate-nos</p> </span></a></div></div>

Após copiar o código da caixa de seleção, abra o bloco de notas ou o notpad++ ou outro editor de texto.


Após colar o código, localize as seguintes linhas,

onde se encontra a estrutura html, que você irá alterar referente a cada bloco, seguindo o esquema de cores:
<!-- Image Caption 1 -->
<div id="box-6" class="box">
<img id="image-6" src="http://www.iconsdb.com/icons/preview/black/blogger-4-xxl.png" height= "100px" width="100px" />
<a href = "http://servicobg.blogspot.com.br/"> <span class="caption scale-caption">
<h3>Anuncie aqui!</h3>
<p>Este espaço está disponível para anúncio. Contate-nos!</p>
</span></a></div>

<!-- Image Caption 2 -->


<div id="box-2" class="box">

<img id="image-2" src="http://www.iconsdb.com/icons/preview/black/wordpress-6-xxl.png" height= "100px" width="100px" />
<a href = "http://servicobg.blogspot.com.br/">
<span class="caption full-caption">
<h3>Anuncie aqui!</h3>
<p>Este espaço está disponível para anúncio. Contate-nos!</p>
</span></a></div>

<!-- Image Caption 3 -->


<div id="box-3" class="box">

<img id="image-3" src="http://www.iconsdb.com/icons/preview/black/money-bag-xxl.png" height= "100px" width="100px" />
<a href = "http://servicobg.blogspot.com.br/">
<span class="caption fade-caption">
<h3>Anuncie aqui!</h3>
<p>Este espaço está disponível para anúncio. Contate-nos!</p>
</span></a></div>

<!-- Image Caption 4 -->


<div id="box-4" class="box">

<img id="image-4" src="http://www.iconsdb.com/icons/preview/black/phone-5-xxl.png" height= "100px" width="100px"/>
<a href = "http://servicobg.blogspot.com.br/">
<span class="caption slide-caption">
<h3>Anuncie aqui!</h3>
<p>Este espaço está ddisponívelpara anúncio. Contate-nos!</p>
</span></a></div>

<!-- Image Caption 2 -->


<div id="box-2" class="box">

<img id="image-2" src="http://www.iconsdb.com/icons/preview/black/google-code-xxl.png" height= "100px" width="100px"/>
<a href = "http://servicobg.blogspot.com.br/">
<span class="caption full-caption">
<h3>Anuncie aqui!</h3>
<p>Este espaço está disponível para anúncio. Contate-nos!</p>
</span></a></div>

<!-- Image Caption 6 -->


<div id="box-6" class="box">

<img id="image-6" src="http://www.iconsdb.com/icons/preview/black/google-blog-search-xxl.png" height= "100px" width="100px"/>
<a href = "http://servicobg.blogspot.com.br/"> <span class="caption scale-caption">
<h3>Anuncie aqui!</h3>
<p>Este espaço está disponível para anúncio. Contate-nos!</p>

</span></a></div>

Sobre as cores:


Vermelho: Endereço da imagem

Laranja: Link para onde o leitor será redirecionado
Azul: Texto a ser editado
Altere somente o indicado acima. Aconselhamos não alterar a estrutura do script e do css.
Esse Gadget foi preparado para colunas com aproximadamente 300 px de largura. Caso queira redimensionar para que os blocos fiquem maiores ou menores, terá que alterar a estrutura css do código fonte do Gadget.
Após a edição finalizada, vá até o painel do seu blog, e no menu lateral, clique em layout. Na tela que será aberta, escolha o local para o qual quer adicionar o Gadget em seu blog, clique em adicionar Gadgets, escolha a opção html/javascript, e cole o código editado.
Salve e visualize!

2 comentários :

  1. Muito bom o trabalho! ^^ mas gostaria de saber se teria como criar um slide desse para exibiçao de paginas html com textos?

    ResponderExcluir
    Respostas
    1. Olá, tem sim mas para isso é necessário que entre em contato conosco através da página serviços BG. Para que possamos estudar seu caso em específico.
      Abraços Andrew Silva do BG

      Excluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.