Colocando barra no topo do blog e nas laterais

| |
                 Tumblr_lrsq2nrdeg1qdgkr8o1_500_large


Hoje é meu primeiro post aqui no Tudo pra Mim, e vou ensinar pra vocês uma dica muito útil e que fica bem fofo.
Colocando barra (pattern) nas laterais...
1- Vá até Design, Editar HTML, aperte CTRL + F e procure por:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Caso você não ache, procure apenas por <body e ache algum código parecido com o citado acima.
2- Logo abaixo dele cole, se você quiser que a barre fique do lado DIREITO:
<div style=" background-image: url('LINK DO PATTERN'); top: 0px; right: 0px; width: 20px; height: 100%; z-index: 100; position: fixed;"></div>
3- Se você quiser que fique do lado ESQUERDO cole o seguinte código, fazendo as alterações:

<div style=" background-image: url('LINK DO PATTERN'); top: 0px; left: 0px; width: 20px; height: 100%; z-index: 100; position: fixed;"></div>
<div style=" background-image: url('LINKDOPATTERN'); top: 0px; left: 0px; width: 100%; height: 50px; z-index: 100; position: fixed;"></div>
* Se você quiser colocar um pattern nos dois lados, cole um código abaixo do outro.
** Altere o que está em negrito pelo link do seu pattern, e o que está em vermelho para a largura que você quer a sua barra.
Colocando a barra (pattern) no topo...

1- Vá até Design, Editar HTML, aperte CTRL + F e procure por:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
2- Cole o código abaixo acima do que você havia procurado, fazendo as devidas alterações:
<div style=" background-image: url('LINK DO PATTERN'); top: 0px; left: 0px; width: 100%; height: 20px; z-index: 100; position: fixed;"></div> 
 * Altere o que está em negrito pelo link do seu pattern, e o que está em vermelho para a largura que você quer a sua barra.
Alguma dúvida? É bem simples e deixa um toque especial ao seu blog. Espero que tenham gostado, beijos.

23 comentários:

Meia noite e quinze disse...

Ótimo tutorial, queria saber a muito tempo para um novo possivel layout.
Adorei!
Você poderia comentar no meu blog, tem um post novo lá!

Beijos, Fer.
meianoiteequinze.blogspot.com

Stella Valim disse...

Otimo tutorial.
http://senhoritaliberdade.blogspot.com/

Mariana Batista disse...

Gostei muito do tutorial.
Tem post novo. Comenta?
Girl Teen

kah santos :) disse...

Olá, parabéns pelo blog^^
estou te seguindo
espero retribuição
bjoakas
kah santos :)
http://kekeprincesa.blogspot.com/

Anônimo disse...

Ai , tá tudo mega lindo aqui !
queria saber , se pode pedir um tuto x-x
se sim, como foi que vocês tiraram TOTALMENTE o espaço entre o header e o topo do blog ?
Rach ;**

Alanna Valquiria disse...

Amei o tutorial, eu até já tinha achados uns códigos, mas acabaram que não funcionavam nunca =O

S@ndr! ** disse...

Amei o Tutorial, tudo ta muuito lindo akiie!
Seguindo segue o meu?
http://bperfectcandy.blogspot.com/

A propósito usei o tutorial neste blog,
www.smilewhitavril.blogspot.com

Rafaela disse...

Estou esperando mais tutoriais! Pq vcs não estão postando?

República Clichê disse...

Ameeeeei!!! lindo de mais to usando alguns tutorias para o meu novo layout :)

http://republicacliche.blogspot.com/

Luh' disse...

oiie , amei demais teu blog e os tutoriais, ja to seguindo
segue de volta: http://lltudoaver.blogspot.com

ah! agora eu to fazendo edições de fotos e banners, se estiver interessada: http://lltudoaver.blogspot.com/2011/08/novidade-no-blog.html

Bruna disse...

Adorei a dica *-*
Visitem blog novo http://bruna-leite.blogspot.com/

Mary! Pacheco disse...

Adoorei, Valeu ...

Seguiindo esse lugar diwoo ...

se puderem dá uma passadinha no meu, estarei muito agradecida ^^

http://mundinhomegamary.blogspot.com/

Beijões

Sâmi C. disse...

Olá,

Adorei o seu blog e já estou seguindo aqui =)
Ficarei muito feliz se puder seguir o meu também!

Beijo grande!

JUUUUU disse...

Amei seu blog quando eu criar um layout vou dar todos os creditos pra ca beijo

Felipe disse...

Nossa, esse blog é maravilhoso... amo aqui!
Bjks.

Anônimo disse...

aki eh mto lindoh mesmoh e ficoh com saudadeh de quandoh euh tinhah um blogueh todoh mundoh falavah que euh escreviah erradoh mas euh sempreh escrevih certoh, sóh com o H no final parah ficar descoladoh ueh.

Chili (: disse...

Adorei!
Cadê vocês?

http://pinkpimenta.blogspot.com/

Thalia A. disse...

Eu queria aprender com criar links de imagens e colocá-los no blog para as pessoas me linkarem. bjks

Caio Mota disse...

Participem do sorteio!!!

http://www.gravidadeartificial.com/2011/11/sorteio-com-color-time.html

Beijos :D

Carol Vasconcelos disse...

Oii
Poderia me dar uma ajuda enoooorme? Preciso de dois votos seus, é bem rapidinho! Eu sei que é chato ficar votando pros outros desse jeito, mas realmente preciso! E é claro, se puder me ajudar, lembre que qualquer coisa que precisar eu tento ajudar!
Então vota no blog Salto Alto nesses dois blogs:
http://meianoiteequinze.blogspot.com/
http://tendencias-teens.blogspot.com/
Muuuuito obrigada!
bjbj
blog-salto-alto.blogspot.com

Jeenii Costa disse...

Oii , super ameei o blog !

Já estou seguindo ! Segue de volta ? http://tolerancia-teen.blogspot.com/

Beijoos , agradeço sua atenção =)

Deborah B. disse...

Oiie *-*
Em que navegador a visualização do blog fica melhor? É porque eu uso o Google C. mas a visualização do blog ta péssima e eu quase não entendo o que esta escrito =/

Beijux;*

Mariana disse...

o meu não tem essa linha de código body expr:class='"loading" + data:blog.mobileClass'
E agora? Queria colocar a barra no topo.

Postar um comentário