26/04/2014

Tutorial: Cortininhas e barrinhas no blog

||

Olá meus doces, como vão hoje? Para ser sincera não me sinto muito bem, essa mudança repentina de clima não tem me feito bem, minha garganta esta horrível... do jeito que estou fica dificil me concentrar no layout ou postar, assim farei postagens pequenas esses dias. Mas 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.

39 comentários:

  1. Adorei o tutorial *3*

    Até logo, www.road-between.blogspot.com.br

    ResponderExcluir
  2. Eu não sabia como colocar estás barrinhas me deu ideia para um layout!!
    Mudanças de clima também prejudicam minha saúde quando o inverno e o verão estão começando as vezes tenho que usar um bombinha para recuperar o ar quando não estou conseguindo respirar!
    Espero que melhore Wendy-chan!
    Até

    Sarang Cute!

    ResponderExcluir
    Respostas
    1. Hihi que bom!!! Verdade é muito ruim...ultimamente tou ficando doente direito por causa disso. Nossa...que preocupante, espero que fique bem Akemi. E obrigada desejo o mesmo para você.

      Excluir
  3. Kyaah arigato pelo tutorial estava procurando por isso! ♥

    http://animesjaychan.blogspot.com/

    ResponderExcluir
    Respostas
    1. De mada Jay, eu que agradeço. ^^

      Excluir
  4. Nossa, muito legal.
    Obrigado por compartilhar, não sabia como fazia isso.
    Vlw.
    Abraço.

    ResponderExcluir
    Respostas
    1. De nada Diego, eu que agradeço por comentar e achar legal! Beijinhos~

      Excluir
  5. Melhoras da garganta Wendy. Eu to com uma dor infernal na barriga, acordei 7 horas da manhã e não consegui dormir mais por causa da dor :/ Acredita que eu adoro um clima que muda de repente? Muito calor me da raiva, pois eu fico tudo suada e não consigo dormir, muito frio me dá raiva porque eu fico cheia de coberta e não consigo me mexer aehauheauehua Mas de qualquer forma prefiro o frio. ~le eu na camona dos meus pais com a TV mais grande da casa, com o quarto todo pra mim u3u~ djiskdjskidjskid

    Enfim gostei do tutorial, sempre quis colocar uma cortininha no rodapé e não tinha conseguido achar o tuto, vou deixar nos favoritos este :3
    Bjo || Scarlet Rain

    ResponderExcluir
    Respostas
    1. Obrigada Belly. Serio...puxa desejo melhoras, isso é realmente horrível. Admito que Também gosto, mas minha garganta sofre rsrs mas realmente vendo por esse lado é bom. Hahaha nada melhor que frio, um livro e xícara de chocolate quente. Hmmm que chique XD

      Obrigada por gostar Belly, espero que possa usar em seu blog. ^^ Beijinhos.

      Excluir
    2. Obrigada Belly. Serio...puxa desejo melhoras, isso é realmente horrível. Admito que Também gosto, mas minha garganta sofre rsrs mas realmente vendo por esse lado é bom. Hahaha nada melhor que frio, um livro e xícara de chocolate quente. Hmmm que chique XD

      Obrigada por gostar Belly, espero que possa usar em seu blog. ^^ Beijinhos.

      Excluir
  6. Melhoras ^-^
    Eu sempre preciso desse tuto.
    Bem útil mesmo, adorei.

    Beijos <3
    p-perfectsthings.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada Estefani. Mesmo? Que bom, obrigada por gostar.

      Excluir
  7. Já sabia mas um tutorial bem util!
    blackwords.tk
    bjs

    ResponderExcluir
    Respostas
    1. Verdade :3 que bom, que já conhece.

      Excluir
  8. Já conhecia o tutorial, acho tão lindo, principalmente quando fica lá no topo do blog, quando lá fica vazio, agente aplica a cortininha e fica divo *-* m-yrtille.blogspot.com.br

    Beijos, Myrtille

    ResponderExcluir
    Respostas
    1. Também acho ele ótimo para isso, fica muito lindinho. Obrigada por comentar, mesmo já conhecendo o tuto. Hihi thanks. :3

      Excluir
  9. Que tuto otimo , vou salvar ok

    Beijos http://c-quente.blogspot.com.br

    ResponderExcluir
  10. Wendy, você é um anjo! Há séculos que procuro por esse tuto ^^ valeu fofa :3

    ResponderExcluir
    Respostas
    1. >3< Ain de nada é um prazer ajudar. Porque não disse, eu haveria postado bem antes, sempre que precisa de algo pode dizer. ^^

      Excluir
  11. Adoro esse tuto, ele deixa qualquer blogger bonito!

    beijos, rose cloud

    ResponderExcluir
  12. Amei *--*. Cara você explica as coisas muito bem por isso que te amo u-u. !!

    #Visita ? (http://simply-dreamy.blogspot.com.br) // e também me diz se meu primeiro lay free ficou 'útil' ? :3 (layoutfree-simple-ulzzang.blogspot.com) .. Xoxo!

    ResponderExcluir
    Respostas
    1. Ohayooo Lili, obrigada por achar isso Lili. Ain assim fico ate sem jeito, hihi mas muito obrigada. Ah o layout ficou lindo!!! ^^

      Excluir
  13. Adorei esse tutorial Wendy *u* muito lindo, eu sei que essa mudança repentina de clima é muito ruim, minha prima mesmo ficou gripada de repente e ficamos todos preocupados... Bem, melhoras Wendy.

    Chu~
    chaos

    ResponderExcluir
    Respostas
    1. Obrigada por gostar Kate, nossa serio? Espero que ela esteja bem. Mas obrigada por compreender. ^^

      Excluir
  14. Que legal o tutô, bem útil

    ResponderExcluir
  15. oieeeee que saudade de vir aqui, desculpa o sumiço *u*
    cara, eu queria mt saber como punha a barrinha na lateral, você ajudou muito, para variar heueheueheu amei
    ~kissus, Ash || Tea Cake

    ResponderExcluir
    Respostas
    1. Que isso Ash, tudo bem fica preocupada com isso não.
      Hihi que bom \o/ fico feliz em ajudar.

      Excluir
  16. Muito bom o tuto! Estou conhecendo seu blog agora e estou amando! Segui meu blog?
    tudomonster-lulis.blogspot.com.br
    beijos

    ResponderExcluir
    Respostas
    1. Obrigada por gostar, primeira vez aqui? Então seja bem vinda! Farei uma visitinha se eu gostar sigo, esta bem? ^^

      Excluir
  17. Que chato isso ... te desejo melhoras !
    Gosto bastante desse tuto, já conhecia, só não sabia como usar nos outros lugares do blog !
    O tutorial é muito bom, e também muito útil !

    Beijos <3 || http://sunset-somewhere.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada Cris, eu já estou melhorando. Hihi entendo, que bom que agora sabe. Obrigada por gostar, espero que use um dia. ^^

      Excluir
  18. Melhoras :/ Que legal *0* bastante últil.
    Wendy, eu tenho uma dúvida, não nesse tutorial, mais em outro, que eu não achei o.o -q, eu tou criando meu layout, e eu tava procurando um tutorial de como colocar menu dentro do gadget de welcome, :/ não estou achando, você poderia fazer um tutorial sobre isso, ou me passar um link de um tuto? obggggg <3

    ResponderExcluir
    Respostas
    1. Obrigada!!! :3

      Hihi que bom, obrigada por achar isso. Desculpe não compreendi sua pergunta como assim colocar dentro do gadget do welcome?

      Excluir
  19. Vish é ruim mesmo essa mudança do clima do nada... Eu, como moro em Curitiba já estou acostumada, então nem vejo diferença... Quando eu fazia meus lays sempre colocava essas barrinhas, acho tão fofas *o*
    Beijos
    FW ~ ☆

    ResponderExcluir
    Respostas
    1. Ah qe bom, eu moro no Rio de Janeiro e bem quente então qualquer queda de temperatura, sinto bastante. Hihi também as acho muito fofas, ainda farei um lay com essas barrinhas.

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram