• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

2 de dezembro de 2012

Background nos marcadores

Hoooý Hoje Trago Um Tutorial Que Aprendi No Go Imagines é De Como Colocar Background Nos Marcadores Vamos ver?
Exemplo:


Saibam que existe duas formas de fazer: Com uma imagem inteira (mais difícil) e com uma imagem no topo 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 e O Go Imagines 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:
Na cor do background (do lado da url) coloque: #FFCACA
Na cor do background (do lado da url) coloque: #FFF
E uma pronta:
Na cor do background (do lado da url) coloque: #FFF
 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 }
Visualise Se Tiver Tudo Certo Salve! 


8 comentários:

  1. Já fiz esse tuto, só que o meu não é uma nuvem, mas é bonitinho também! Beijos, visita? Sweetie Vitória

    ResponderExcluir
  2. Awww super lindo, adorei >.<

    http://mundootakuotome.blogspot.com.br/

    ResponderExcluir
  3. Quanto tempo não venho aqui :O Mas está lindo ^_^
    Em relação ao Tuto achei que fica muito Kawaii *O* Talvez use ele no próximo lay do meu blog... Chu~ Kim-Chan !

    Hyumi-Kwon.Blogspot.Com

    ResponderExcluir
  4. Me segue?
    thaisstellawinx.blogspot.com
    Adoraria se me seguisse... *-*

    ResponderExcluir