HTML: Titulos da sidebar personalizado em nuvem

18 de junho de 2016

Título da sidebar personalizado

Oláá! tudo bem com vocês? espero que todo mundo esteja super bem. Apesar de eu ainda estar meio enrolada nos assuntos pessoais tô fazendo o que posso para manter o blog atualizado, creio que a partir da próxima semana volta tudo ao normal, sem atrasar postagens e sem demorar horrores para responder os comentários, peço até desculpas por isso, eu leio todos os comentários (chegam a notificação no email do celular,) mas no celular é difícil de responder e como não estou usando muito o computador acaba acumulando, mas em breve vou responder todos os comentários ♥ 

Eu vi que tem um tempinho que não posto tutoriais de HTML, então achei uma boa postar hoje, é bem simples e fácil de fazer, admito que não era esse tutorial que queria postar hoje, mas eu comentei no post passado que houve alguns casos de plágio  com esse layout,  e um deles foi essa parte do código, ai eu pensei já que roubaram mesmo na cara dura, vou postar tutorial pra todo mundo aprender também HAUASA eu juro que o tutorial é super fácil!


Título da sidebar personalizado


Esse é o resultado, é o modelo que eu uso atualmente aqui no blog

São só três passos, então tá fácil fácil


1 - Sua sidebar (barra lateral) tem que estar com os gadgets separados, um espaço entre um e outro, caso o seu não estiver siga esse tutorial do Cherry bomb ♥ 

2 - Abra seu HTML e procure por  }]]></b:skin> ou só }]]>  e ACIMA dele cole o seguinte código

.sidebar .widget {
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
margin: 70px 0;
background: #fff;
box-shadow: 0px 0px 2px #ccc;
}
.sidebar h2 {
font-family: 'Grand Hotel', cursive;font-size: 35px;color: #000000;font-weight: normal;
background: url(http://i.imgur.com/PYkI0e3.png);
padding-top: 35px;
font-weight: normal;
height: 50px;
width: 280px;
text-align: center;
margin-left: 25px;
margin-bottom: 10px;
margin-top: -70px;
position: absolute;
}



Entendendo o código: As partes em vermelho são as que você deve alterar ou não, vai depender do seu gosto.  A parte "margin:70px;0;" vai ser o espaçamento entre os gadgets e as nuvens, pode ser que no seu as nuvens fique muito em cima do próximo gadget ou do anterior ou muito separado, nesse caso você aumenta o numero para da mais espaço, e diminui para diminuir o espaço. No caso aqui do blog 70 ficou perfeito.

A parte que tem o background e a url de uma imagem, é a nuvem e vocês podem alterar a cor no photoshop por exemplo.

Já as partes em lilás é a parte que você deve alterar, a primeira é o nome da fonte, em seguida o tamanho e o terceiro a cor, você altera de acordo com seu gosto. 

Se você quiser usar a mesma fonte que eu usei (Grand Hotel) no seu HTML procure por <head> e ACIMA dele cole 

<link href='https://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css/>

3 - Salve! Pronto sua nova sidebar está pronta para uso. 


Uma dica: Para usar e ela ficar mais bonita, normalmente o conteúdo dos gadgets "colam" e acaba ficando embaixo da nuvem, para isso não acontecer no seu gadget se for de HTML/Javacript ANTES do conteúdo, você coloca duas quebras de linha que são <br><br> e salva, e pronto fica tudo perfeito.

E como sou uma boa pessoa  Fiz algumas cores para vocês usarem, é só clicar para ficarem do tamanho real.










Espero que tenham gostado do post, se repassarem lembrem de dar créditos a mim e ao Blog,  beijos até o próximo post 

14 comentários:

  1. OI tudo bem? Amei o tutorial! <3 acho muito lindo! Vai ficar como inspiração para o meu próximo lay.
    Beijos,
    www.gleycikellyfranco.com.br/

    ResponderExcluir
  2. Adorei , pena que num tenho tempo pra por num meu blog. Gleicy respondi a pesquisa do público. Beijo. http://maahdonado.blogspot.com.br/

    ResponderExcluir
  3. Que amor Gleicy! Plágio? Sério? Você já tentou resolver a questão?
    Ótimo tutorial! <333
    http://eaigirlblog.blogspot.com.br/

    ResponderExcluir
  4. Oii Gleicy!
    Eu sempre quis saber esse tutorial, afinal, fica tão lindo no blog!
    Parabéns, você realmente se supera cada dia mais. Amo seus tutos ♥
    Fique com Deus ♥
    novidadesestardoll.blogspot.com.br

    ResponderExcluir
  5. Que fofas essas nuvenzinhas! Adorei o tutorial, ficou muito bem explicado!Uma pena que copiaram o seu layout :(.
    Beijos
    Bluebell Bee

    ResponderExcluir
  6. Que fofas essas nuvens, to in love juro! Quero pro meu blog também! Amei o post, ficou tudo explicadinho muito bem!
    Beijos,
    http://www.pompomchic.com.br/

    ResponderExcluir
  7. Ótima dica!
    Só uma correção: pra usar a fonte, tem que colar abaixo de <*head*>.
    Adorei as nuvenzinhas!

    Virando Amor

    ResponderExcluir
  8. Tutorial maravilhoso, tenha uma semana abençoada.
    Blog:http://arrasandonobatomvermelho.blogspot.com.br/
    Canal:https://www.youtube.com/watch?v=DmO8csZDARM

    ResponderExcluir
  9. As nuvens são lindas,e a dica ótima bjs
    https://blogbrilhodasestrelas.blogspot.com

    ResponderExcluir
  10. Eu SEMPRE vejo tutoriais ensinando à como colocar mas no meu blog sempre da algo errado ou então não muda em nada.

    http://idealizandolivros.blogspot.com.br/

    ResponderExcluir
  11. Adorei o tutorial, não tem como dar errado.
    Você explica super bem! Beijos ♥

    http://vestibulandaguerreira.blogspot.com.br/

    ResponderExcluir
  12. Seu blog é tão maravilhoso com todas essas dicas que nos transformam rs é tão bom ter alguém para compartilhar essas informações importantes :)


    beeijão :)
    http://carolhermanas.blogspot.com.br/

    ResponderExcluir
  13. Eu acho lindo colocar imagens no titulo das sidebars, fica mais bonito e único.

    Blog Marcy Moraes

    ResponderExcluir
  14. Faz toda a diferença uma Sidebar bem personalizada
    ❤❤❤
    Beijos
    Daiane Santos

    ResponderExcluir

Fã page | Twitter | Instagram

Críticas construtivas são sempre bem vindas.
Deixe o link do seu blog no final do comentário e retribuiremos a visita
Aceitamos TAG's, se não a respondermos, provavelmente nós já devemos ter respondido anteriormente por outra indicação.
Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2018. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo