Novidades

22 agosto 2012

Tutorial - Background nos marcadores


Mesmo com muita preguiça ; pesquisei alguns tutoriais e achei esse que e bem legal
achei no Go Imagine então créditos á ele e sem mais enrolamento:



Saibam que existe duas formas de fazer: Com uma imagem inteira (mais difícil) e com uma imagem no topo e cor no restante do gadget (mais fácil). Entenda:


Como disse, o segundo jeito é mais fácil (com imagem e cor) do que o primeiro (com imagem inteira). Sabe porque? O primeiro você vai ter que fazer a imagem com uma altura que seja suficiente para caber todas as suas tags, e pra achar essa altura pode ser um pouco complicado. Lembre-se também que, ao colocar fundo com esse método, você não vai poder ficar adicionando mais tags, caso contrário elas começarão a sair pra fora da imagem. O segundo é melhor pois é mais simples e a caixinha com cor vai aumentando conforme você for adicionando mais tags, ou seja, não requer manutenção.

É importante que você esteja usando o gadget de marcadores em Cloud (tags misturadas, como a minha)
Antes de começar o tuto, quero creditar o Trechy Teen pelo tutorial!


Com imagem no topo e cor
Entre no seu HTML e procure (CTRL + F ou F3) por: /* Main 
após encontrar, cole o seguinte código acima dele: 
/* Fundo nos marcadores --------------------------------------------- */
#Label1 {
font-size: 13px;  /*Tamanho da fonte do texto do gadget*/ 
line-height: 12px;
margin-left: 0px;
background: #ffffff url('url da imagem') no-repeat left top; /*Cor e imagem de fundo*/
}
#Label1 .widget-content {
padding: 50px 10px 10px 10px;  /*Espaçamento*/  
margin: 0;
color: #696969;  /* Cor da fonte */  
}
OBS: #fff se refere a cor da caixinha do gadget, enquanto a url se refere a imagem do topo.
Quando for fazer a imagem leve em consideração a largura da sua sidebar!

Bases:
E uma pronta:


Com imagem inteira
Entre no seu HTML e procure (CTRL + F ou F3) por: /* Main 
após encontrar, cole o seguinte código acima dele:
/* Fundo nos marcadores --------------------------------------------- */
#Label1 {
font-size: 13px; /*Tamanho da fonte do texto do gadget*/
background: url('url da imagem') no-repeat; /*Imagem de fundo*/
height: 270px; /*Altura da imagem*/
}
#Label1 .widget-content {
padding: 20px 10px 5px 10px;  /*Espaçamento*/
margin: 0;
color: #696969;  /* Cor da fonte */
}
Não fiz imagens pra esse método, uma vez que não tenho como saber o tamanho ideal (altura) pro gadget de vocês. A dica é tirar print de seus marcadores e descobrir a altura do mesmo, pra saber a largura é só levar em consideração a largura da sua sidebar!
Não achou /* MainProcure por #sidebar-wrapper { e cole o código escolhido antes de fechar }
Visualize e se curtir salve, caso não goste é só limpar as alterações feitas! É isso babies, espero que tenham gostado do tuto :*




Beijos, créditos: Go Imagine

4 comentários:

  1. oiii flor, amei o blog, seguindo aki, vc já está nos nossos afiliados...Kiss!!
    -->http://wwwcrazy-teens.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada por aceitar, irei adiciona-la também...

      beijos, fique com deus!

      Excluir
  2. oi sera que voce poderia comentar e seguir meu blog?
    valeu , http://wwwtudo-queeuquero.blogspot.com.br/

    ResponderExcluir

Regrinhas!
1- aceito seguindo segue de volta
2- sem xingamentos! se expresse de uma maneira mais civilizada.
3- aceito criticas e Elogios