Como criar área de banners 125x125 acima dos gadgets

Olá leitor do blog Mundo Informal! No tutorial de hoje, vamos aprender a inserir uma área de banners do tipo 125x125, que é muito importante, tanto na beleza, quanto organização do blog. É muito fácil adicionar, vamos ao tutorial:

Primeiro, vamos adcionar o CSS no blog. Para isso, coloque este código acima da tag ]]></b:skin>

/* Sidebar 125X125 ADS BANNER */
.sidebar_banner {
margin:0px 0px 10px 0px;
width:298px;
background:#fff;
        border:1px solid #E3E3E3;
}

.sidebar_banner ul{
list-style-type:none;
margin: 2px 0px 0px 6px;
padding: 0px 0px 15px 0px;
width:290px;
overflow:hidden;
}
.sidebar_banner ul li{
list-style-type:none;
margin: 10px 4px 0px 7px;
float:left;
display:inline;
background:#none;
        border:2px solid #E3E3E3;
        padding:0;
}

Feito isso, salve o modelo! Não fará nenhuma alteração ainda.
Agora vem a parte de modificações, selecione a opção 'Expandir Modelos de widgets' e procure pela seguinte linha:

<div class='column-right-inner'>
Encontrado, coloque o seguinte código abaixo dela:

<div class='sidebar_banner '>
<ul>
<li>
<a href='url-para-anunciar' title='Anuncie Aqui'><img alt=' Anuncie Aqui ' src=' http://clubedaimprensa.com.br/site/wp-content/uploads/publicidade/125x125.gif ' style='vertical-align:bottom;'/></a>
</li>
<li>
<a href='url-para-anunciar' title=' Anuncie Aqui'><img alt=' Anuncie Aqui' src=' http://clubedaimprensa.com.br/site/wp-content/uploads/publicidade/125x125.gif ' style='vertical-align:bottom;'/></a>
</li>
<li>
<a href=' url-para-anunciar' title='Anuncie Grátis!'><img alt='Anuncie Grátis!' src='http://clubedaimprensa.com.br/site/wp-content/uploads/publicidade/125x125.gif' style='vertical-align:bottom;'/></a>
</li>
<li>
<a href=' url-para-anunciar' title='Anuncie Grátis!'><img alt='Anuncie Grátis!' src='http://clubedaimprensa.com.br/site/wp-content/uploads/publicidade/125x125.gif' style='vertical-align:bottom;'/></a>
</li>
</ul>
<div class='clear'/>
</div>

Pronto, agora é só personalizar com os banners do seus parceiros!

Fonte: Tech and blogger

Share This :