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 difícil me concentrar sendo 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>

◤Entendendo o código◥

• 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>:

Códigos

<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. Os créditos das barrinhas vai para Adolescente Nerd. 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.