Oie... descansei um pouquinho do trabalho e enfim pude escrever um post! E esse é um daqueles tutoriais para decorar seu blog de um jeitinho kawaii; se tem uma coisa que acho lindo são as rendas, tecidos delicados que vão bem em tudo, roupas, sapatos, acessórios, no blog... é; em algum detalhe de nossos blogs podemos usá-las também; pela internet vc encontra muitas imagens de decoração com renda, mas nós vamos ver como se faz bordas de renda 'costuradas' com css e html. Encontrei esses códigos no Codepen da Marina e separei os 4 que gostei mais.
1. Primeiro você precisa dar a aparência à sua bordinha rendada; o legal é que rendas formam lindos padrões e aqui vamos fazer quase igual... de acordo com um dos modelos abaixo, copie e cole um dos códigos (que estão guardados aqui) antes de /b:skin no Blogger, ou entre <style> e </style> caso precise da renda em apenas um gadget html/javascript ou em qualquer área que aceite html.
Renda 1
Renda 2
Renda 3
Renda 4
Não há muito o que editar, a não ser a cor; coloquei todas brancas, como white ou #fff, que são os trechos do código que recomendo mudar se preferir. Para quem curte personalizar códigos, vc pode mudar o tamanho das rendas em background-size e a altura em height, por exemplo.
2. Agora, no lugar em que deseja que a renda apareça, cole isso:
Mudando renda1 para renda2, renda3, renda4, de acordo com a que preferir.
Por exemplo, vamos colocar uma borda no topo do blog. Depois de colar um dos estilos de renda antes de /b:skin, procure por <body expr:class= ou <body>. Assim que encontrar, cole depois deles se quiser que apareça ACIMA do cabeçalho; ou ainda depois de </header> se quiser que apareça ABAIXO do cabeçalho, mas recomendo que seja acima:
Talvez seja necessário especificar ainda um estilo que posicione direitinho a borda, separando do conteúdo ou definindo uma altura máxima para ela alcançar; aí voltamos antes de /b:skin e colamos algo como:
.lace {
height: 70px;
background: código ou nome de uma cor ou link de uma imagem ou none para ficar transparente;
margin-bottom: 10px;/* distancia da margem inferior para separar do conteudo*/
}
A altura de 70px vai 'empurrar' o cabeçalho para baixo, enquanto que margin-bottom vai separar a área da borda do conteúdo; o background pode ser uma cor, uma imagem, por exemplo, de um cabeçalho ou outro plano de fundo diferente do padrão ou nenhum (none). E alteramos lá no outro código depois de body assim:
1. Primeiro você precisa dar a aparência à sua bordinha rendada; o legal é que rendas formam lindos padrões e aqui vamos fazer quase igual... de acordo com um dos modelos abaixo, copie e cole um dos códigos (que estão guardados aqui) antes de /b:skin no Blogger, ou entre <style> e </style> caso precise da renda em apenas um gadget html/javascript ou em qualquer área que aceite html.
Renda 1
Renda 2
Renda 3
Renda 4
Não há muito o que editar, a não ser a cor; coloquei todas brancas, como white ou #fff, que são os trechos do código que recomendo mudar se preferir. Para quem curte personalizar códigos, vc pode mudar o tamanho das rendas em background-size e a altura em height, por exemplo.
2. Agora, no lugar em que deseja que a renda apareça, cole isso:
<div class='renda1'></div>
Mudando renda1 para renda2, renda3, renda4, de acordo com a que preferir.
Por exemplo, vamos colocar uma borda no topo do blog. Depois de colar um dos estilos de renda antes de /b:skin, procure por <body expr:class= ou <body>. Assim que encontrar, cole depois deles se quiser que apareça ACIMA do cabeçalho; ou ainda depois de </header> se quiser que apareça ABAIXO do cabeçalho, mas recomendo que seja acima:
<div class='renda4'></div> <= porque vou usar o 4º modelo.
Talvez seja necessário especificar ainda um estilo que posicione direitinho a borda, separando do conteúdo ou definindo uma altura máxima para ela alcançar; aí voltamos antes de /b:skin e colamos algo como:
.lace {
height: 70px;
background: código ou nome de uma cor ou link de uma imagem ou none para ficar transparente;
margin-bottom: 10px;/* distancia da margem inferior para separar do conteudo*/
}
A altura de 70px vai 'empurrar' o cabeçalho para baixo, enquanto que margin-bottom vai separar a área da borda do conteúdo; o background pode ser uma cor, uma imagem, por exemplo, de um cabeçalho ou outro plano de fundo diferente do padrão ou nenhum (none). E alteramos lá no outro código depois de body assim:
<div class='lace renda4'></div>
Salve e veja como ficou; aqui tive esses resultados testando em um modelo padrão Simple do Blogger:
E é isso; agora vou descansar mais um pouco porque amanhã vou trabalhar cedinho. Que DEUS abençoe mais essa nossa semana e todas as outras! Até logoヾ(＾∇＾) ☆
html cade teus limites?
ResponderExcluiradorei, coisa mais fofa!
Hey Ro, olha eu aqui haha que fofinha as rendinhas. Mas tô em busca de outra coisa, tubos extremamente necessários pra um blog que todos deveriam usar. Recomenda algo?
ResponderExcluirBjs
Hey Ro, olha eu aqui hihi tudo bem?
ResponderExcluirAdorei essas rendas...mas tô em busca de outra coisa, tutos que todos deveriam usar em seuseus blogs, recomenda algo?
Beijos
https://teckafanfics22.blogspot.com/
Oi :3
ExcluirConheço algumas coisinhas... depois compartilho links assim que puder ^-^ Bjus