Personalizar barra de banners parceiros

Em muitos blogs e sites, grandes partes de suas visitas são causadas pela troca de Banners (links) entre blogs parceiros. Por isso ter uma barra de banners personalizada e ajeitada é muito importante. Siga o tutorial para aprender a:

Determinar tamanho das imagens
Efeito de rolagem (marquee)
Efeitos especiais (fade, sombras etc)

Veja uma demonstração!

1- Código CSS

Primeiramente, vá ao seu Painel do Blogger, clique em Modelo>>Editar HTML>>Prosseguir. Aperte CTRL + F e busque por: ]]></b:skin>. Cole o seguinte código ANTES do que procurou:

/* --- Banners parceiros - início - por Íntegra Studio ----*/
#parceiros {
width: auto;
height: auto;

padding-top: 5px;
padding-left: 2px
padding-bottom: 5px;
background: transparent;
border: none;
display: inline;
}
#parceiros img{
width: 100px;
height: auto;
opacity: 0.85;
filter:alpha(opacity=40); /* Para IE8 e anteriores*/
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #000000;

-webkit-box-shadow: 2px 1px 15px 2px #696969;
box-shadow: 2px 1px 15px 2px #696969;

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

margin: 5px;
}
#parceiros img:hover{
width: 110px;
height: auto;
opacity: 1.0;
filter:alpha(opacity=100); /* Para IE8 e anteriores*/
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: 2px solid #000000;

-webkit-box-shadow: 2px 2px 15px 4px #00FF7F;
box-shadow: 2px 2px 15px 4px #00FF7F;

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
/* --- Banners parceiros - início - por Íntegra Studio ----*/

Depois de ter colado o código, você pode editar boa parte dele à sua maneira, siga as explicação a seguir:

O width que está em vermelho claro significa a LARGURA da imagem antes de o mouse passar por cima. Ajuste-a como preferir. A altura da imagem se ajeita automaticamente, assim, não perdendo resolução. Caso queira mudar isso, altere o valor de HEIGHT no código.

Já o que está em vermelho escuro é a LARGURA da imagem no estado HOVER, ou seja, no momento que o cursor está sobre ela. Altere o valor como preferir.

Os trechos em azul, verde e marrom se referem à efeitos das imagens. São, respectivamente, Bordas Arredondadas, Sombras Externas e Transição De Efeito Hover. Todas podem ser alteradas especificamente no incrível site CSS3 Generator.

Você também pode alterar as bordas e as opacidades das imagens em ambos estados (Normal e Hover). O código CSS é totalmente livre, caracterize sua barra de banners como achar melhor!

Depois de ter modificado a aparência de sua barra com CSS, salve o modelo, e vá até o Layout de seu blog.

2- Adicionar DIV ao gadget

Abra o seu widget (Html/JavaScript) o qual se encontra os códigos das imagens parceiras.

Cole o seguinte código html totalmente no INÍCIO do gadget:

<div class="parceiros" id="parceiros">

E esse totalmente ao FINAL:

</div>

3- Efeito de rolagem com Marquee

Para aplicar um efeito o qual as imagens fiquem rolando de baixo para cima, economizando espaço, adicione o seguinte código LOGO APÓS a div Parceiros:

<marquee id="scroller" scrollamount="4" scrolldelay="1" direction="up" width="140" height="500" frameborder="0" border="0" onmouseover="scroller.stop()" onmouseout="scroller.start()">

Pode ser editado a velocidade (scrollamount), a resolução (scrolldellay), a direção (direction), largura (width), altura (height) e bordas do marquee.

Ficará assim: