30 janeiro 2013

Personalizando a Sidebar {Pedido da Ask #1}

| |
Amo!
Oiie!
Desculpe, não posso falar muito porque estou com pressa ;/

Bem, me pediram, pela Ask, a como fazer uma sidebar igual a minha. Assim:


É bem simples, não tem nenhum segredo. Vamos lá!


Primeiro você tem que separar os gadgets em caixas. Você tem que ir no Modelo do seu blog • Personalizar  Avançado • Plano de fundo da barra lateral e colocar a cor da coluna em transparente para poder ver as caixas. E agora é só seguir esse tuto do Go Imagine.

Depois aperte F3 e procure por ]]></b:skin> e acima cole:

.sidebar .widget {
float: center;
padding: 10px;
margin-bottom: 50px; /*Espaço entre um gadget e outro*/
}
.sidebar .widget h2 {
background: #DF2D58; /*Cor do fundo do título*/
color: #fff;
text-align: center;
border-radius: 10px 10px 0px 0px;
width: 250px; /*Largura do fundo, aumente se precisar*/
font-family: grand hotel; /*Fonte do titulo*/
font-size: 25px; /*Tamanho da fonte*/
font-weight: normal;
line-height: 25px; /*Altura da linha, coloque o mesmo que o tamanho da fonte*/
margin-top: -35px; /*Quantos pixels o título "sobe"*/
margin-left: -10px;
padding-left: 5px;}
 A minha fonte é personalizada, eu usei uma fonte do Google Web Fonts. Ou seja, se você não tiver o código da fonte instalado, ela não vai aparecer.

Se Quiser usar essa mesma fonte, é só aperta F3 e procurar por <head> e acima colar:
<link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'/>
Depois de ...css'/> cole </link>

Aprendi lá no Chery Bombb, então créditos pra lá. Beijos na bundinha!

4 comentários:

  1. Eu que pedi rsrs ,obrigado por postar!! Num achei em lugar nehum!

    ResponderExcluir
  2. Muito lindinho flor acho que na próxima vez vou fazer assim muito simples porém muto lindooo *--*

    Uma Historia (♥)

    ResponderExcluir
  3. Fica lindo esse título de gadgets personalizado *-* Talvez eu use um dia, não tem como não ficar fofo! Isa, obrigada por me divulgar na postagem anterior, e me desculpa por não ter comentado. Teve um problema na internet aqui em casa e fiquei 2 dias sem blog ¬¬' Felizmente voltei! beijos :*

    Explodindo Glitter, ainda em reformas.

    ResponderExcluir
  4. Olá Isa! Em primeiro lugar quero dizer que amei muito mesmo o seu blog, pois também amo html! :)

    Eu queria fazer algo parecido com isso só que bem mais simples... Meus menus estão todos com o título igualzinho, eu coloquei como imagem mesmo. Queria fazer igual nos seguidores mas não sei! :(((
    Isso me irrita muito pq ta feiooo. Poderia me ajudar pelo amor de Deus?
    Desde já agradeço! Se quiser entender melhor, da uma olhadinha lá...

    http://bloguetanamoda.blogspot.com.br/ Beijão *-*

    ResponderExcluir

« »