Editando seu Blog ;)

Olá tudo bem?

amores fiquem sabendo que sempre irei postar aqui mais vezes apartir de agora, darei mais atenção aos leitores daqui e do meu cantinho também certo? Bem, estava sem idéias do que postar e estava cansada de postar efeitos, menus etc.. Então me veio na cabeça algo bem legal e útil que é ensinar colocar botão de seguir com imagem no blog do jeito mais fácil e prático, as imagens estão bem fofinhas e com cores bem fofas, cores diversificadas e com styles em todas, peço que por favor não esqueçam de creditar  sempre ok? Espero que curtam a postagem pois é bem útil e ajuda para quem está começando, então coisas fofas por hoje é só e me aguardem até a próxima postagem, kissus =3
LIVE PREVIEW  
Vá até layout e adicione um gadget html java script, dentro cole o código abaixo, onde estiver todos aqueles XXXX coloque a ID do seu blog, onde fica esse ID? Quando estiver na página onde fica layout irá aparecer vários números na aba do navegador, copie todos os números que estiver no link e coloque no lugar dos xxxxx do link certo?










Cortininhas e barrinhas no blog



Olá meus doces, como vão hoje? para hoje trago um tutorial bem rodado na web, como colocar cortininhas e barrinhas no blog, nunca tive oportunidade de posta-las aqui no blog. Para quem ainda não sabe o que é, são imagens que ficam no topo, rodapé ou nas laterais do blog; como uma cortina dai vem o nome. Irei ensinar como colocar os dois de uma vez só para facilitar e assim criar apenas uma postagem (preguiça detectada), então vamos lá?
Acesse seu HTML/Design é usando o atalho Ctrl+F procure por </body>, acima dele cole os códigos abaixo ou os que lhe interessam: 
Para o topo:
<div style=" background-image: url('URL DA IMAGEM'); top: 0px; left: 0px; width: 100%; height: 0px; z-index: 100; position: fixed;"></div>
Para o rodapé:
<div style=" background-image: url('URL DA IMAGEM'); bottom: 0px; left: 0px; width: 100%; height: 0px; z-index: 100; position: fixed;"></div>
Para a lateral esquerda:
<div style=" background-image: url('URL DA IMAGEM'); top: 0px; left: 0px; width: 50px; height: 100%; z-index: 100; position: fixed;"></div>
Para a lateral direita:
<div style=" background-image: url('URL DA IMAGEM'); top: 0px; right: 0px; width: 50px; height: 100%; z-index: 100; position: fixed;"></div>
  • -Troque URL DA IMAGEM pela URL de uma imagem de cortininha.
  • -Altere height: 0px; pela altura da cortininha e width: 50px; pela largura.
  • -Se não quiser que a cortininha fique aparecendo mesmo quando se desliza pela página, troque position: fixed; por position: absolute;
  • *Você também pode utilizar os 4 códigos juntos; para que uma cortininha fique acima da outra você tem que colar os códigos na ordem em que quiser que apareçam.

Para aparecer barrinha e cortininha juntas e na ordem, cole acima de </body>:
<div style=' background-image: url("URL DA IMAGEM"); top: 0px; left: 0px; width: 50px; height: 100%; z-index: 100; position: absolute;'/>
<div style=' background-image: url("URL DA IMAGEM"); top: 0px; right: 0px; width: 50px; height: 100%; z-index: 100; position: absolute;'/>
<div style=' background-image: url("URL DA IMAGEM"); top: 0px; left: 0px; width: 100%; height: 55px; z-index: 100; position: fixed;'/>
<div style=' background-image: url("URL DA IMAGEM); bottom: 0px; left: 0px; width: 100%; height: 55px; z-index: 100; position: fixed;'/>

 Eu achei esse tutorial lá no Reino Kawaii, então mas os créditos também vão para Kawaii World. Então não se esqueçam de creditar os dois, ok? Bom espero que tenham gostado e seja bastante útil, ate a próxima bunnies.

Nenhum comentário:

Postar um comentário