05/12/2014

Criando uma Sidebar

 
  E aí meus brigadeiros, como estão? Hoje pensei que nem iria postar por causa do layout free que estou fazendo, mas aí tive a ideia de fazer uma "Sessão: Como fazer um layout só seu", e o primeiro post, como já viram acima, é "Criando uma sidebar". Espero que gostem ^^
 Não esqueçam de visitar o blog do Matheus, o Boss Kingdom, ele é bem novinho, mas já gosto muito dele (visite aqui) ^^


  
Passo 1: Recomendo que para os testes e a criação, faça isso em outro blog (um blog de testes fechado) ou que faça um backup do seu template antes ok?
 Primeiramente, procure pela tag .sidebar .widget {, vou explicar: Qualquer código que for aplicado abaixo dela e antes da } (chave), será colocado em todo o corpo da sidebar, como por exemplo se você colocar "background: #SUA COR;" abaixo dela, vai ser o fundo dela toda, nesse caso recomendo que seja branca (#ffffff).
 Agora vamos formular os códigos ok?
.sidebar .widget {
font-family: SUA FONTE;
color:#SUA COR;
font-size:TAMANHO DA FONTEpx;
padding: 5px;
margin:2px;
margin-top:5px;
margin-left:-30px;
background: #COR DE FUNDO;
border-radius: 2px;
-webkit-transition-duration: .50s;
border-bottom: 1px solid #EEEAE1;
border-top: 1px solid #EEEAE1;
border-left: 1px solid #EEEAE1;
border-right: 1px solid #EEEAE1;
}
  Onde está "SUA FONTE", você vai colocar a fonte das letras do texto da sua sidebar, em "#SUA COR", logicamente você coloca o código da cor, não se confunda, pois "color" significa a cor da letra do texto do seu gadget; Em "TAMANHO DA FONTE" é o tamanho da letra, recomendo que seja de 8, 10,11 e no máximo 12;
 
  "Ain Jamylle, mas essa sidebar não é sua!"
 Fia, vai lavar a louça que é o que cê faiz de mió, tá okei?
 
   Enfim, eu peguei um exemplo de sidebar do GNMH, e não vou falar que fui eu que fiz, mas a achei melhor para a explicação.
 
  Tá vendo aquelas bordinhas tracejadas ao redor da sidebar?
 Então, onde estão escritos lá em cima nos códigos : " border-left/right/bottom/top: 1px solid #EEEAE1", são a mesma coisa dessas bordinhas tracejadas no gadget do GNMH, ou seja, são esses codes que dão origem à mesma, só mudou o tipo de borda. Se quiser tracejada igual à do GNMH, é só trocar "solid" por "dashed". Lembrando que "1px" é a espessura da borda, não mais que isso; E "#EEAE1" é a cor da bordinha ok?
 Caso tenha visto, também tem o código "border-radius: 2px;" lá em cima, ele é responsável por arredondar o seu gadget ou seja quanto mais aumentar o número, mais ela fica arredondada.
 
Passo 2: Se você está fazendo do jeito que eu estou explicando, percebeu que isso não alterou em nada o fundo do Título da Sidebar. Se sua sidebar é um goodie de outro blog, vai perceber que depois de ".sidebar .widget{ (outros códigos)}" existe também a ".sidebar .widget h2 {(outros códigos)}" que é responsável pela personalização do título da sua sidebar, Let's go?
.sidebar .widget h2 {
padding-bottom: 6px;
padding-top: 6px;
background: #SUA COR;
border-radius:3px;
padding-left: 10px;
line-height: 8px;
margin-bottom: 5px;
font-family: #SUA FONTE;
letter-spacing: px;
font-size: 15px;
color: #SUA COR;
text-shadow: 1px 1px 0px #fff;
text-align: center;
}
   Depois de "background:", #SUA COR, você coloca o código da cor do fundo do título da sua sidebar, só destaquei os outros, pois acredito que já entenderam, já em "text-align: center", é o alinhamento do título da mesma, no caso, é no centro, se quiser na direita, troque por right, e se na esquerda, por left.

  "Esqueci de algo produção?" "Acho que não..."

Espero que tenham gostado ^^

Kissus e bye
 

13 comentários:

  1. Quase que meu queixo caio quando vi você mandando visitarem meu blog, obg de coração Jamy, Com certeza vou tentar fazer um lay, e queria que vc me adicionasse no google + para qualquer duvida eu te perguntar lá <3 entrei aqui e deixei um recadinho curto pois já tenho que sair, mais quando voltar eu vou ler o post todo e fazer tudo direitinho, pois quero muito aprender a fazer layoust <3
    Obg de coração jamy <3

    ResponderExcluir
    Respostas
    1. De nada ^^
      Claro, já te add, ok? ^^
      Já?! Mas td bem :/
      D nada ^^

      Kissus

      Excluir
  2. Olá!

    É super simples esse tutorial e útil também! Vou visitar o blog!

    Beijos | Brigadeiro-vintage.blogspot.com

    ResponderExcluir
  3. Tô comentando de novo porque acho que meu comentário não foi e.e
    Eu adorei o tutorial e com certeza vou usar no meu próximo layout!
    www.dai-sies.blogspot.com

    ResponderExcluir
    Respostas
    1. Não foi, nem recebi ^^'
      Obrigada/De nada ^^

      Kissus

      Excluir
  4. Que legal! Há um tempo vários blogs faziam tutoriais, mas hoje esse tipo de ajuda tá cada vez mais escasso. Fico feliz que alguém ainda goste de HTML e ensine! Obrigada por comentar no meu blog ♥

    heydebee

    ResponderExcluir
    Respostas
    1. Obrigada ^^
      É q muitos viraram blogs pessoais :/
      D nada ^^

      Kissus

      Excluir
  5. GENTE EU AMEI ESSE TUTORIAL SJSJSJJ <3 vou usar COM CERTEZA.
    ((mikicandy))

    ResponderExcluir
  6. Caramba, vc deve agra estar sambando de salto alto, pq com esse tuto, divou hein!
    Nunca achei esse tuto, brigaduuu msmuuu ;)

    *3*

    ResponderExcluir
  7. Amei muito o tutorial <3 muuuito bom mesmo.


    https://unconditionallykawaii.blogspot.com.br/

    ResponderExcluir