2.12.13

Personalizando o seu Layout p1



Yo Como vão? (Eu sempre pergunto isso, nossa dã pra mim) Sabe oque eu vou ensinar 'AGORA'? Como personalizar seu Layout cute cute cute! Ou seja, vou ensinar hoje barra de lateral colorida, seleção colorida e Leia mais personalizado *-*

Clique aqui em baixo, não seja chato <3




Bem, vamos começar com a barra lateral (Easy)


Para começar, vá em Design > Editar HTML > Dentro do code, aperte ctrl + F e procure por: 
]]></b:skin>

Em  CIMA da tag procurada, cole:


::-webkit-scrollbar-thumb:vertical { background: #e7b3c2; height:50px; border: 2px solid #fff; box-shadow: 2px 2px 4px #bebdbd; -moz-box-shadow: 2px 2px 4px #bebdbd; -webkit-box-shadow: 2px 2px 4px #bebdbd; -khtml-box-shadow: 2px 2px 4px #bebdbd; -moz-border-radius: 10px; /* Para Firefox */ -webkit-border-radius: 10px; /*Para Safari e Chrome */ border-radius: 10px; /* Para Opera 10.5+*/ } ::-webkit-scrollbar-thumb:horizontal { background-color:#f26d92; height:10px; border: 1px dashed #fff; -webkit-box-shadow:0 0 1em #eee; } ::-webkit-scrollbar {height:10px; width:20px; background: url(endereço da imagem) repeat; box-shadow: -3px -2px 10px #bebdbd; -moz-box-shadow: -3px -2px 10px #bebdbd; -webkit-box-shadow: -3px -2px 10px #bebdbd; -khtml-box-shadow: -3px -2px 10px #bebdbd;}


Fácil né? No code já tem a instrução 

OBS: Não mude nada que não saiba!

  • O código que esta em azul( #e7b3c2 ) é a cor da barra redondinha
  • O código em verde ( #fff )é a cor da borda da sua barra

Créditos Papo de Amigas


Agora vamos a Seleção colorida

Vá em Design > Editar HTML > Clique em qual quer lugar do code,  e aperte ctrl + F e procure por 
]]></b:skin>


E acima da tag encontrada cole isso:


::-moz-selection { /* seleção de texto personalizada e com sombra */ background: #c3dc6a; /* cor do fundo */ color: #fff; /* cor do texto */ text-shadow: 0px 1px 1px #91aa3a; /* cor da sombra do texto */ } ::selection { /* seleção de texto personalizada e com sombra */ background: #c3dc6a; /* cor do fundo */ color: #fff; /* cor do texto */ text-shadow: 0px 1px 1px #91aa3a; /* cor da sombra do texto */ }


OBS: Vocês devem perceber que no code acima, tem 2 tipos de cor do texto, cor do fundo, cor da sombra certo? Na hora que você for mudar para as cores que você quer, é só editar nos dois lugares não se esqueça!


Agora Leia Mais personalizado


Vá em Design > Editar HTML > aperte dentro do code CTRL + F e procure por:

<data:post.jumpText/>


Apague e substitua por:

<p align='right'><a expr:href='data:post.url'><img src='URL DA IMAGEM'/></a></p>


OBS: Onde está de vermelho é para você botar a URL da sua imagem ok?


É isso, beijos!


Nenhum comentário:

Postar um comentário