20/05/2015

Fundo transparente no Primeiro ou Ultimo gadget do blog


Yo paçoquinhas, como estão? Eu estou bem graças a Deus. Falta apenas uma semana para terminar meu curso. E pior que estou triste por estar acabando.... Bom Para hoje trago um tutorial simplizinho mas que acho uma gracinha. Geralmente as pessoas o dividem em dois tutoriais separados, mas o tutorial é tão pequeno os farei juntos. Vou mostrar como deixar a primeira ou a última sidebar do blog transparente.

Lembrando se seu layout for de duas sidebar, o efeito vai funcionar em ambas. Mas se não quiser em ambas apenas em uma basta deixar um gadget vazio do outro lado (sem titulo e sem conteúdo visível), assim dando a sensação de estar apenas em uma.


Fundo do Primeiro Gadget Transparente:

1. Vá até Modelo e clique em Editar HTML, procure por:

.sidebar .widget:first-child { 

Se no seu layout não tiver esse código por alguma razão, procure  apenas por ]]></b:skin> e  acima dele cole. Se você achou faça a mesma coisa, procure por ]]></b:skin> e a cima dele cole:

Códigos
.sidebar .widget:first-child {
{

2. Agora entre as chaves { } do código citado acima cole:

Códigos
Background: transparent;

Salve e visualize, viu? Prontinho! Agora se quiser deixar o primeiro gadget com alguma cor é só remover o  transparent e colocar #código da cor.



Fundo do Ultimo Gadget Transparente:

1. Vá até Modelo e clique em Editar HTML, procure por:

.sidebar .widget:last-child {  

Se no seu layout não tiver esse código por alguma razão, procure  apenas por ]]></b:skin> e  acima dele cole. Se você achou faça a mesma coisa, procure por ]]></b:skin> e a cima dele cole:
 
Códigos
.sidebar .widget:last-child {
}

2. Agora entre as chaves do código citado acima cole:

Códigos
Background: transparent;

Pronto! É apenas isso, se desejar por uma cor é só trocar transparent e colocar #código da cor.

XoXo~

41 comentários:

  1. Curso e sagas: você quer terminar e ver tudo se realizando e se cumprindo, mas quando acaba bate aquela dorzinha no coração T.T

    ResponderExcluir
  2. Primeiramente, que perfeição esse lay do Zelo. Ultimate. ♥ Amei, sério!
    Bem, olá! Eu estou bem, também. Pense pelo lado bom, você está concluindo uma fase, outras boas ainda virão.

    Posso confessar algo? Eu jurava que pra ter esse efeito tinha que alterar muitos códigos e tinha preguiça só de pensar. Não acredito que era tão fucking simples! Meu Deus. HASUHSHUSAUH

    Bom, ainda tem vaga pra afiliação? Eu gostaria muito de me afiliar. >////< Estarei presente no blog, com certeza. Se aceitar, me avise, sim?

    Carinhosamente, Jheni.
    *e m p i r e k a w a i i & q u i n z e o u t o n o s*.

    ResponderExcluir
    Respostas
    1. Hihi obrigada *------*
      Sim e bem simples mas sem olhar faz parecer mesmo que e dificil.
      Tem sim, mas ainda vou limpar minha listinha de afiliados inativos e que tiraram o BC, mas se quiser o ponho na minha lista. =3

      Excluir
  3. Anônimo25/5/15

    ~Hey Moça
    Você poderia fazer um tuto de como colocar efeito no a:visited please ? ;-; eu tentei mils vezes e não consegui ;-;

    ResponderExcluir
  4. Ficou lindo <3
    diariodelolivlet.blogspot.com.br

    ResponderExcluir
  5. WENDY~ meh, se para o seu curso acabar faltam semanas, para o meu faltam uns meses, tipo o resto do ano sabe (;u;) e até lá vou ter muitas surpresas constrangedoras. Que vida linda essa de adm gente, linda demais, tô semi morta aqui~ XD /ignorando completamente o tutorial~/ adorei esse layout com detalhes verdinhos <3 amo qualquer coisa que tenha um pouco de verde nela, é sério!! xDD

    Que comentário medíocre esse meu, kami!!
    Beijinhos Wendy-chaaan~

    ResponderExcluir
    Respostas
    1. Hihihi verdade, verdade.
      Obrigada por gostar do lay *----*

      Excluir
  6. Wendy Me coloca na elite! pois você já está na minha!

    http://pandasbright-s2.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Jurei que tinha posto, desculpa gome t.t

      Excluir
  7. Que tuto útil, rs ♥

    http://nakahouse.blogspot.com.br/

    ResponderExcluir
  8. Oi querida!
    Eu não sabia o que tinha acontecido com o blog. Fiquei preocupada porque nunca conseguia acessa-lo. Mas fico feliz que eu o encontrei novamente. E sinto muito pelo acontecido.
    Gostei muito do tutorial, útil como todos. ♥

    designer-lovers.blogspot.com.br ✿
    Beijos

    ResponderExcluir
    Respostas
    1. Ah tudo bem, acontece rs e o importante e continuar e tentar superar fazerndo o blog ainda melhor xD

      Obrigada fico feliz que tenha gostado. ♥

      Excluir
  9. Achei super útil esse tutorial, principalmente para os iniciantes aqui na blogosfera :3
    Só uma perguntinha, você aceita encomendas de layout? Por favor, responda nos comentários do meu blog! Muito obrigado!
    Beijos!
    crazyformadrid.blogspot.com

    ResponderExcluir
    Respostas
    1. Verdade. Olha aceito sim, mas atualmente estou sem photoshop e materiais para fazer layout =( mas assim que eu voltar a fazer irei avisar.

      Excluir
  10. esse tutorial <3 útil demais

    http://thesweetmomentts.blogspot.com.br/

    ResponderExcluir
  11. Ótima dica *-*
    Tenho q mexer no layout do meu blogger... mas está difícil x-x
    http://diariodelolivlet.blogspot.com.br/

    ResponderExcluir
  12. Que pena que falta pouco para terminar seu curso, não sei você mas eu amo o meu <3
    Amei o tutorial, bem prático e útil, fica muito lindo.

    Beijos,
    http://o-hyeah.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Eu também amo o meu, mas fazer o que... t.t

      Excluir
  13. Acho super fofo a transparência em alguns dos gadgets amei o tuto ;)

    http://animesjaychan.blogspot.com.br/

    ResponderExcluir
  14. Amei o tutorial, super prático e lindo <3

    Beijos,
    http://o-hyeah.blogspot.com.br/

    ResponderExcluir
  15. Anônimo2/7/15

    Usando ^^

    ResponderExcluir
  16. E ai minha jovem! Eu estou bem, obrigada.
    Um ótimo tutorial, bem mais simples do que eu faço... quando quero modificar um gadget eu uso mais o código dele tipo "HTML10" e faço assim:
    #HTML10{
    background: transparent;
    }
    Mas esse pode ser usado para qualquer um e tals. Um grande beijo.

    Equalizando - [visite, baby]

    ResponderExcluir
    Respostas
    1. Sim eu conheço esse,tenho postado aqui ele tbm serve para por ribbons diferentes em determinados gadgets. kissus

      Excluir
  17. E se for wordpress org????? como faz?

    ResponderExcluir
    Respostas
    1. Oie Fer! Infelizmente só mecho com o plataforma blogger, estou começando a aprender como arrumar wordpress. Desculpe não pode ajudar, mas existe muitos sites que disponibilizam tutorial para essa plataforma.

      Excluir
  18. Oi, tenho uma dúvida. Queria deixar o primeiro gadget transparente, mas eu uso aquele tutorial de bordas em cima e embaixo no gadget e as bordas e a sombra ficam ali. Tem como tirar totalmente as modificações?
    Beijos

    https://b-adangel.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi linda, desculpa a demora viu? Claro que ajudo! Faz assim copia as bordas do gadget normal e cola no codigo do gadget transparante. E onde fica os valores você coloca display. Exemplo geralmente é assim:

      border-top: 2px solid #cor;
      border-bottom: 2px solid #cor;

      você coloca assim:

      border-top: display;
      border-bottom: display;

      ou assim:

      border-top: 2px solid #transparent;
      border-bottom: 2px solid #transparent;

      Ai prontinho! =3 Espero ter ajudado, qualquer duvida não evite perguntar.

      Excluir
  19. Ahh, não consegui :c fiz dos dois jeitos e nenhum dá certo. Só a cor de fundo fica transparente

    ResponderExcluir
    Respostas
    1. Oi Kaya, tudo bem? Experimenta colocar none.
      border-top: none;
      border-bottom: none;

      sem duvida vai funcionar.

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345