4.12.13

Colocar um cabeçalho na sidebar


Bom dia, minnas :) O tutorial de hoje é bem simples, mas que eu acho super fofo: colocar um cabeçalho na sidebar. Muitas blogueiras têm dúvidas ao fazê-lo, eu pelo menos tive a minha dose da primeira vez que experimentei, mas isso é porque a minha sidebar tinha sombras e outras personalizações que a maior parte dos tutoriais não ensinava a anular. Por isso trouxe este tutorial: para o complementar com tudo o que for possível, assim ninguém corre o risco de ficar mal. 

Para quem não entendeu: este tutorial consiste em eliminar o verdadeiro espaço para o cabeçalho. e colocar uma imagem no primeiro gadget - essa imagem será o novo cabeçalho. Depois, retiraremos o fundo e todas as outras personalizações ao primeiro gadget, deixando transparente. Para visualizarem melhor, vejam alguns exemplos de prints no leia mais. #Enjoy ^^


Tornar o primeiro gadget transparente:

Vá ao seu HTML e procure por:
.sidebar .widget:first-child {
Substitua a área correspondente (até fechar a chaveta) por isto:
.sidebar .widget:first-child {
background: transparent;
border-top: 0px solid #cccccc;
border-bottom: 0px solid #cccccc;
border-right: 0px solid #cccccc;
border-left: 0px solid #cccccc;
outline-offset: 0px;
outline: 0px solid #cccccc;
box-shadow: inset 0px 0px 0px #cccccc, 0px 0px 0px #cccccc;
border-radius: 0px 0px 0px 0px;
}
.sidebar .widget:first-child:hover {
background: transparent;
border-top: 0px solid #cccccc;
border-bottom: 0px solid #cccccc;
border-right: 0px solid #cccccc;
border-left: 0px solid #cccccc;
outline-offset: 0px;
outline: 0px solid #cccccc;
box-shadow: inset 0px 0px 0px #cccccc, 0px 0px 0px #cccccc;
border-radius: 0px 0px 0px 0px;
}

Colocar um cabeçalho no primeiro gadget:

Vá em esquema e adicione um gadget do tipo "HTML/Javascript". Não dê título. Cole isto:
<div style="margin-top: 0px; margin-left: -10px; margin-right: -15px; margin-bottom: -5px;">
<a href="LINK-DO-SEU-BLOG"><img src="URL-DO-CABEÇALHO" /></a>
</div>
Substitua o link do seu blog e a url da imagem do cabeçalho. Está a ver os valores na primeira linha? eu escrevi para a sua imagem não ficar cortada, se estiver, altere os números até que dê certo. O primeiro é a margem do topo, o segundo é da esquerda, o terceiro é da direita e o último é de baixo.


Era isso, espero que funcione em condições - é bastante extenso, mas pelo menos não têm de alterar nada, e elimina tudo o que for possível. Claro que há sempre a hipótese de fazerem um cabeçalho normal e depois deslocar a side, ou assim. Ah, já viram o novo layout do Forever Sapo? ;)

5 comentários:

  1. Oi,sou nova aki no blog
    mal conheci e ja estou adorando! Sucesso para você!

    Seguindo,seg de volta ?

    muralhadehtml.blogspot.com.br // Beijos!!!!!!!!!!!!!!!!!!!!!!!!

    ResponderEliminar
    Respostas
    1. Ainda bem que agradei, o meu blog também é novinho, então claro que sigo de volta :)

      Eliminar
  2. Gostei...
    Tmb acho bem legal cabeçalho na sidebar, fica muito bonito.
    O tuto ficou muito bom.
    abraço.

    ResponderEliminar
    Respostas
    1. Arigatou Diego-kun :3 Posso começar a tratá-lo assim? ;)

      Eliminar