Cortininhas e barrinhas+Tutorial

Bom dia, morangos

Desculpem não ter postado ontem, mas eu tive um problemão com template free call me maybe que eu estava fazendo para vocês, só de lembrar da até vontade de chorar TT^TT, eu estava fazendo ele normal, ai fui num blog que tinha um tutorial de efeito fade nos títulos da postagem, eu coloquei, normal ai quando eu visualizei o fundo da sidebar e das postagens estava transparentes!, e a faixinha dos gadgets tinha sumido O.O, alguém sabe o que pode ter sido?, okay se alguém lê a introdução escreva "morango" no fim do seu comentário, para eu ver se alguém lê as minhas introduções, caso você não escreva "amora" eu não irei de responder, seja o que for.

Trouxe muitas cortininhas e barrinhas muito fofas para vocês usarem no seu blog, no seu próximo layout, talvez. Além disso trouxe um tutorial para vocês usarem elas encima, embaixo ou dos lados no seu bloguito. Eu acho super lindo cortininhas no blog, mas aquelas mas simples, porque algumas atrapalham. Let's go?

Se quiser enfeitar seu blog com elas, tipo uma no topo, outras nas laterais, uma no rodapé, use esses códigos abaixo encontrados no Kawaii World:

 

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>

Cole esses códigos acima de </body> no HTML do seu template.

*Notas:
-Troque URL DA IMAGEM pela URL de uma cortininha.
-Altere height: 0px; pela altura da cortininha e width: 50px; pela largura de uma cortininha.

-Se não quiser que a cortininha fique aparecendo mesmo quando se desliza pela página, troque position: fixed; por position: absolute;

-Você pode usar 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.

Se quiser um do lado, outro encima e outro embaixo, use este código:

<div style=' background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEWIQBmeomTFNs9P_aH88xToQhlAKBOBa5s_aoaaOvLgcv2NDICJu5aoEopluism1OXxoVLH7BCX9hYZIkcEpHqm9hu93ykL0e52gVTK_VZxIA0PDpdnO8dKUHXqCztnpsekbru2-O2F0/s1600/2.gif"); top: 0px; left: 0px; width: 42px; height: 100%; z-index: 100; position: absolute;'/>
<div style=' background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5BhgOFWL9UiovtzoQZrxdOLXzX1_s8FKkw35C2XZ5pXvXqjW7ah02vVnU6yE9p_BP5-pjSLLCewNTghoMn5UKo_-cDeef6Zv7lKVt36y0ndMTA9JN0Kf3Inmt58XRw1TnXrUn_vA0Hu0/s1600/3.gif"); top: 0px; right: 0px; width: 42px; height: 100%; z-index: 100; position: absolute;'/>
<div style=' background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiny3ghFH-o5KUhbDZAmpa-d82azcDOotoj_lEgabxnN8-NahYnWs7coeUi19XV4m5neSbM4Xa_NPhzuH33BcyJe5eYv0U89I4Jwz4tX3Qb7mc6q7zczVAzIEJuvBNfK4EzS0it9f3X8ro/s1600/102.gif"); top: 0px; left: 0px; width: 100%; height: 55px; z-index: 100; position: fixed;'/>
<div style=' background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9KqwIWCN-VdkAgv8FYXxj8WkbWvRvbMyvtwk9CJxvoGeXNLVPbHg2iciwLn7-Qu-qUPu_yph1vn751ZFWtMjx8C2EvzKVRVDQl8l1g1yDqdtIwtJOgI4tDMA8SCeXkKGxfEKKOjLixvk/s1600/103.gif"); bottom: 0px; left: 0px; width: 100%; height: 55px; z-index: 100; position: fixed;'/>

Ah sim!!! As imagens agora neh ^^:

Passe o mouse para ver essa acima; é super clarinha ^-^