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!
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!
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.
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 
OI tudo bem? Amei o tutorial! <3 acho muito lindo! Vai ficar como inspiração para o meu próximo lay.
ResponderExcluirBeijos,
www.gleycikellyfranco.com.br/
Adorei , pena que num tenho tempo pra por num meu blog. Gleicy respondi a pesquisa do público. Beijo. http://maahdonado.blogspot.com.br/
ResponderExcluirQue amor Gleicy! Plágio? Sério? Você já tentou resolver a questão?
ResponderExcluirÓtimo tutorial! <333
http://eaigirlblog.blogspot.com.br/
Oii Gleicy!
ResponderExcluirEu 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
Que fofas essas nuvenzinhas! Adorei o tutorial, ficou muito bem explicado!Uma pena que copiaram o seu layout :(.
ResponderExcluirBeijos
Bluebell Bee
Que fofas essas nuvens, to in love juro! Quero pro meu blog também! Amei o post, ficou tudo explicadinho muito bem!
ResponderExcluirBeijos,
http://www.pompomchic.com.br/
Ótima dica!
ResponderExcluirSó uma correção: pra usar a fonte, tem que colar abaixo de <*head*>.
Adorei as nuvenzinhas!
Virando Amor
Tutorial maravilhoso, tenha uma semana abençoada.
ResponderExcluirBlog:http://arrasandonobatomvermelho.blogspot.com.br/
Canal:https://www.youtube.com/watch?v=DmO8csZDARM
As nuvens são lindas,e a dica ótima bjs
ResponderExcluirhttps://blogbrilhodasestrelas.blogspot.com
Eu SEMPRE vejo tutoriais ensinando à como colocar mas no meu blog sempre da algo errado ou então não muda em nada.
ResponderExcluirhttp://idealizandolivros.blogspot.com.br/
Adorei o tutorial, não tem como dar errado.
ResponderExcluirVocê explica super bem! Beijos ♥
http://vestibulandaguerreira.blogspot.com.br/
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 :)
ResponderExcluirbeeijão :)
http://carolhermanas.blogspot.com.br/
Eu acho lindo colocar imagens no titulo das sidebars, fica mais bonito e único.
ResponderExcluirBlog Marcy Moraes
Faz toda a diferença uma Sidebar bem personalizada
ResponderExcluir❤❤❤
Beijos
Daiane Santos