10 de mar de 2014

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
Compartilhe essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

0 comentários

Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo