Barra/Cortininha fixa + Efeito enquadrado

Oi seus cutes, hoje vim ensinar como colocar cortininha fixa no blog, e vim também mostrar como se faz o efeito blog enquadrado e também trouxe algumas cortininhas para vocês. Estava fuçando meu blog de testes e de repente criei esse efeito, achei bem legal e decidi trazer para vocês. Ficou curioso ? Veja os tutorias e as cortininhas clicando em Leia mais.


                                                      

 

Resultado do efeito blog enquadrado 

 

Blog enquadrado

 Layout >> adicionar um gadget >> HTML/JavaScript. E cole o código abaixo e aonde está escrito " url da imagem"coloque o url da cortininha.

<div style=" background-image: url('URLDA IMAGEM'); top: 0px; right: 0px; width: 10px; height: 100%; z-index: 100; position: fixed;"></div>
<div style=" background-image: url('URL DA IMAGEM'); top: 0px; left: 0px; width: 100%; height: 10px; z-index: 100; position: fixed;"></div>
<div style=" background-image: url('URL DA IMAGEM'); bottom: 0px; left: 0px; width: 100%; height: 10px; z-index: 100; position: fixed;"></div>
<div style=" background-image: url('URL DA IMAGEM'); top: 0px; left: 0px; width: 10px; height: 100%; z-index: 100; position: fixed;"></div>

 

Cortininha no blog + cortininhas

Layout >> adicionar um gadget >> HTML/JavaScript. E coloque o código conforme aonde você queira colocar a cortininha , veja os códigos abaixo.

Lado direito

 <div style=" background-image: url('LINK DA CORTININHA'); top: 0px; right: 0px; width: 40px; height: 100%; z-index: 100; position: fixed;"></div>

Lado esquerdo

 <div style=" background-image: url('LINKDACORTINA'); top: 0px; left: 0px; width: 40px; height: 100%; z-index: 100; position: fixed;"></div>

 Topo

  <div style=" background-image: url('LINKDACORTINA'); top: 0px; left: 0px; width: 100%; height: 40px; z-index: 100; position: fixed;"></div>

 A baixo

  <div style=" background-image: url('LINKDACORTINA'); bottom: 0px; left: 0px; width: 100%; height: 15px; z-index: 100; position: fixed;"></div>