Background nos marcadores

27 de jul de 2012



Hello imaginers! Depois de tantos pedidos sobre como colocar fundo nos marcadores, cá estou eu pra ensinar. Pra quem não sabe do que estou falando, segue o meu gadget de macadores:


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: O #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 /* Main? Procure 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 :*

33 comentários:

  1. Estava procurando esse Tutorial Any para mim usar no proxímo Layer ! .

    Beijos :*
    http://mdelicada.blogspot.com/

    ResponderExcluir
  2. Ótimo tutorial Anny! Talvez eu use no próximo lay que irei começar a montar. Anny, você faz concursos/sorteios em parcerias com outros blogs?

    Beijos ♥
    Blog Refugio Teen - Fan page do blog, curte lá ;)

    ResponderExcluir
  3. Adorei o tuto Anny , bjitos Carlinhos

    ResponderExcluir
  4. Adorei o tutorial!O resultado fica muito lindo!Bjs
    http://balaio-sonhos.blogspot.com

    ResponderExcluir
  5. Que tuto lindo...Só que agora eu estou satisfeita com o lay.

    Beijos e visite

    www.livrosegostos.blogspot.com

    ResponderExcluir
  6. O resultado é lindo, meu próximo layout eu uso :)
    Beijos,
    Carol

    ResponderExcluir
  7. Mt legal o tuto, e fica super lindo o efeito! ^^
    bjs, Stardolleiras

    ResponderExcluir
  8. Oi Anny! Então, tinha pensado em algum sorteio valendo destaques e/ou um layout. O que você acha? Ou sorteio com produtos físicos também. Poderíamos conversar melhor se você se interessar, você também deve ter mais idéias :)

    Beijos ♥
    Blog Refugio Teen - Fan page do blog, curte lá ;)

    ResponderExcluir
  9. 11# ' Amei esse tutu , No meu proximo lay acho que vou usar!
    amei amei, beijoos!
    amoraazeda.blogspot.com

    ResponderExcluir
  10. Bem útil o tutorial. Um pouquinho complicado, mas deve ficar bem legal;-
    http://menina-do-sol.blogspot.com.br/

    ResponderExcluir
  11. Muito legal o tutorial haha !
    http://taksfame.blogspot.com.br/

    ResponderExcluir
  12. Eu nunca fui muito fã do gadjet com tags, mas esse tutorial me fez pensar em criar um pro meu blog. Acho lindo essa sua nuvenzinha em volta das tags, como você disse, pode ter dado um trabalhão! Suas bases ficaram ótimas e o tutorial é super bem explicado. Adorei o post, gosto muito de ver seus tutoriais e acho que me ajuda bastante na hora de criar meu layout, obrigada por disponibilizar um material tão bom aqui no Go Imagine. Um beijo!
    the-zombie-attack.blogspot.com

    ResponderExcluir
    Respostas
    1. Que isso linda, eu que tenho que agradecer por vocês virem aqui, lerem meus posts e comentarem coisas fofas assim! :3

      Excluir
  13. Amei o tutorial,
    no meu proximo lay vou usar o imagem no topo e cor.
    http://s2perfectdesigns.blogspot.pt/

    ResponderExcluir
  14. Layout perfeito,posts perfeitos,tudo perfeito.
    Parabéns por tudo viu?
    Beijos
    http://ourworldscrazy.blogspot.com.br/

    ResponderExcluir
  15. Eu adorei esse tutorial de marcadores Anny, seu blog sempre me ajuda nos tutoriais do meu blog, fiz um novo lay pra ele e toda hora passava aqui para ver se tinha novidades nos tutoriais! *---* Eu citei seu blog em um post que fiz lá no meu! Meu blog está de volta depois de um tempo ausente e se quiser da uma passadinha lá, beijos obrigada!

    www.leerosy.blogspot.com

    ResponderExcluir
  16. É muito útil esse tuto! Fica realmente bem mais bonito e confortável ler as tags assim! E as imagens editadas ficam lindas!
    Ah, e finalmente seguindo! Desculpa ter dito que te seguia sem seguir, é que passei por aqui às pressas, mas agora já está tudo certo! Beijo,

    gabi-sena.blogspot.com

    ResponderExcluir
  17. Ah muito bom o tutorial,fico mt legal o resultado
    achei seu blog lindo
    beijos:*
    http://lady-geh.blogspot.com/

    ResponderExcluir
  18. Olá,

    Passando pra avisar que saiu o resultado do "Sorteio Especial: Anel Mustache" que você participou \o/ Muito obrigado por participar e corra lá ver o resultado :D

    http://www.meianoitebr.com

    ResponderExcluir
  19. O resultado fica lindo, amei o tutorial, besos ♥

    plush-girl.blogspot.com

    ResponderExcluir
  20. Ótimo tutorial!
    O resultado fica lindo mesmo!
    Anny, será que você poderia me dizer a fonte do titulo da postagem?
    Ficarei muito agradecido se você visitasse e se puder, seguir também!
    Beijos,
    http://waverlyplaceblogger.blogspot.com.br/

    ResponderExcluir
  21. Ótimo tutorial :)

    http://bomb-of-chocolate.blogspot.com.br/

    ResponderExcluir
  22. Amei esse tuto ^^

    www.todosnanet-official.blogspot.com

    ResponderExcluir
  23. Anny, tem como fazer isso mas sem ser nos marcadores ? bjss *-*

    http://bombadeestilo.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Tem sim, em vez de colocar #Label tem que botar a id do gadget desejado. Dá uma olhada no tuto que a Liah fez:

      cherry-liah.blogspot.com.br/2012/09/personalizar-cada-gadget-da-sidebar.html

      Excluir
  24. não tem "/* Main " no meu, uso o minima, com eu faço?

    ResponderExcluir
    Respostas
    1. Tenta colar acima de /* Headings

      Excluir
  25. Flor, adorei o blog. Várias dicas legais e mt mt mt úteis. Você é demais, beeijos :*

    ResponderExcluir
  26. Sou muito fã dos seus tutoriais, parabéns! coloquei no meu blog credito de agradecimento porque não lembro o que eu peguei aqui, mas sei que tive uma boa base aqui. Obrigada e continue assim.. <3
    www.entao-confesso.blogspot.com

    ResponderExcluir
  27. Olá eu não estou conseguindo fazer isto quando procuro o blogger não acha nada

    ResponderExcluir
  28. Não acho o #sidebar-wrapper { e n acho o /* Main alguem pode me ajudar?

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.