Jardim de Espelhos

2007-08-07T18:48:00.000-07:00

Olá Pessoal!!!

Bom eu não diria que essa página é de goodies, mas se quiserem chamar, fiquem a vontade...
Nada aqui é de autoria minha, portanto não solicito crédito de nada e nem pretendo dá-los porque já faz tanto tempo que coleciono essas coisas que nem faço idéia de onde os tirei....
Resolvi portar tudo aqui já usei ou ainda uso.
O que precisar pode pegar. Se tiver alguma dúvida comunique-me, se precisar de algo que não esteja aqui, procure-me que ajudarei a encontrar.
Portanto é só, qualquer coisa volte ao meu blog.
Um cheirinho

CSS's

2007-08-07T18:34:00.001-07:00

CSS’s mais usados

CSS – Menu Horizontal
CSS – Blockquote
CSS – Tabela de Perfil
CSS – Menu Vertical
CSS – Barra de Perfil

CSS - Menu Horizontal

2007-08-07T18:08:00.000-07:00

CSS - Menu Horizontal

Cole no Bary do lay, edite cores e fontes como decidir.
Lembre-se de fechar as tags.

1º No bary
< style >
#navigation {
width: 621px;
height: 40px;
margin-top: 0px;
list-style: none;
display: inline;
font: normal 1em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
}
#navigation ul {
background: transparent url(images/navlink.jpg) repeat-x top left;
margin:0;
padding:0;
width: 100%;
height: 40px;
}
#navigation li {
background:url(images/navlink.jpg) repeat-x top left;
float: left;
list-style-type: none;
display: inline;
border-right:1px solid #FFF;
}
#navigation a {
width: 75px;
height: 25px;
display:block;
color: #FFFFFF;
padding:15px 0 0 7px;
}
#navigation a:hover {
background:url(images/navhover.jpg) repeat-x top left;
height: 30px;
color: #808080;
padding:10px 0 0 7px;
}
< /style >

2° Agora onde você quer que o menu apareça, insira o seguinte código:

< div id="navigation">
< ul>
< li>< a href="http://jardimdeespelhos.blogspot.com/">Jardim de Espelhos< /a>< /li>
< li>< a href="http://jardimdeespelhos.blogspot.com/">Jardim de Espelhos< /a>< /li>
< li>< a href="http://jardimdeespelhos.blogspot.com/">Jardim de Espelhos< /a>< /li>
< li>< a href="http://jardimdeespelhos.blogspot.com/">Jardim de Espelhos< /a>< /li>
< li>< a href="http://jardimdeespelhos.blogspot.com/">Jardim de Espelhos< /a>< /li>
< li>< a href="http://jardimdeespelhos.blogspot.com/">Jardim de Espelhos< /a>< /li>
< li>< a href="http://jardimdeespelhos.blogspot.com/">Jardim de Espelhos< /a>< /li>
< /ul>
< /div>

Voltar

CSS - Barra de Perfil

2007-08-07T18:05:00.000-07:00

CSS- Barra de Perfil

Cole no Bary do lay, edite fonte e cores como desejar.
Lembre-se de fechar as tags.

1º
< style >
tabela1 {
text-transform: uppercase;
font-family :verdana;
color: #FFA9D5;
font-size:10px;
letter-spacing:0px;
line-height:13px;
font-weight:bold;
border-bottom: 1px solid #FFA9D5;
border-top: 0px solid #ffffff;
text-align: center;
padding-top: 2px;
padding-bottom: 0px;
background-color: #FFE8F5;}
< /style>

2º E onde você quer que apareça a barrinha coloque:
< div class="tabela1">Perfil< /div>

Voltar

CSS - Menu Vertical

2007-08-07T18:01:00.000-07:00

CSS - Menu Vertical

Coloque no bary, edite cores e fonte como desejar.

1º Coloque dentro de < style >. Depois lembre de fechar a taf < /style>:

#nav {
display: block;
color: #FEC2E1;
font-weight: bold;
background-COLOR: #FFF1F9;
width: 100%;
height: 18px;
text-indent: 5px;
vertical-align:middle;
text-decoration: none;
font-family: verdana;
line-height: 18px;
margin-bottom: 1px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
border-right: #FFA9D5 0px solid;
border-top: #FFCBEB 0px solid;
border-left: #FFCBEB 0px solid;
border-bottom: #FFA9D5 0px solid; }

#nav:hover {
color: #c0c0c0;
display: block;
text-decoration: none;
border: 0px solid;
background-color: #F8F8F8;}

02. E no lugar em que você quer que apareça o menu coloque:

< a id="nav" href="http://www.link.com">link< /a>
< a id="nav" href="http://www.link.com">link< /a>
< a id="nav" href="http://www.link.com">link< /a>
< a id="nav" href="http://www.link.com">link< /a>

Voltar

Pop - Up

2007-08-07T17:53:00.000-07:00

Pop-Up

Basta inserir a tag abaixo onde quer a pop-up apareça.
Lembre-se que antes da inserção da tag é necessário a criação de uma outra página de apoio.
Lembre-se de fechar a tag.

< a href="#" onClick="window.open('endereçodapáginaqestáotexto',
'Janela','toolbar=no,location=no,directories=no,status=no,menubar=no,
scrollbars=yes,resizable=no,
width=350,height=400'); return false;" >Mais< /a >

Voltar

Efeitos

2007-08-07T17:51:00.001-07:00

Efeitos

PS: Lembre-se de fechar as tags.
Efeito preto e branco com fundo colorido

< img src="http://www.angel_morbid.blogger.com.br/div_rosepurple.gif" style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
"onmouseover="this.style.filter='
progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)'"
onmouseout="this.style.filter=
'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'" >

EX:

progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)'" onmouseout="this.style.filter=
'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'">

Efeito Riscado para texto:

< !-- Início Texto Riscado -->
< font size="1" face="Verdana" >< strike >Jardim de Espelhos< /strike >< /font >
< !-- Fim Texto Riscado -->

EX:

~~Jardim de Espelhos~~

Voltar

CSS - Tabela de Perfil

2007-08-07T17:41:00.000-07:00

CSS - Tabela de Perfil

Para tabelas com perfil separado.
Cole a primeira parte no Bary e a segunda onde referir.
Edite cores e fontes como preferir.
PS: Lembre-se de fechar as tags.

< style >
.sidebar1 {
display: block;
color: #FFA9D5;
font-weight: bold;
background-color: #FFE8F5;
background-repeat: no-repeat;
width: 100%;
height: 18px;
text-indent: 5px;
vertical-align:middle;
text-decoration: none;
font-family: verdana;
line-height: 18px;
margin-bottom: 1px;
font-size: 10px;
text-align: center;
text-transform: uppercase;}

.sidebar2 {
text-align:justify;
font-size: 10px;
font-family: arial;
color: #808080;
width: 100%;
border: 1px solid #FFE8F5;
padding-right: 1px;
padding-left: 1px;
padding-top: 2px;
padding-bottom: 2px;
line-height:14px;
padding: 4px 4px 4px 4px;
background-color: transparent;}
< /style >

2º

< div class="sidebar1">Perfil< /div>
< div class="sidebar2">
Escreva sobre você aqui< br />< /div>< br />

Voltar

CSS - Blockquote

2007-08-07T17:37:00.000-07:00

CSS - Blockquote

Caixinha geralmente usada para editagem de textos, ou o que mais vc quiser deixar em destaque.
Cole essa primeira parte no Bary do blog e a segunda onde precisar usá-la.
Edite cores e fonte como bem preferir.
PS: Lembre-se de fechar as tags!

1º
blockquote {
border:0px;
background: #F9FAFF url(images/quote.jpg) no-repeat top left;
margin: 0 20px;
padding: 7px 7px 7px 25px;
font-size: 11px;
color: #999;
border-bottom: 1px solid #ECEFF6;
border-right: 1px solid #ECEFF6;
border-top: 1px solid #ECEFF6;
}

2º
< blockquote>Seu texto aqui…< /blockquote>

Caixa de Escrooler

2007-08-07T17:24:00.000-07:00

Caixa de Scrooler

Scrooler = aqela caixinha onde vc coloca o que quiser, geralmetne usada em perfis.
Lembre-se, feche as tags.

< !-- INICIO AUTOSCROLL BOX --->
< center >< div style="border: 1px solid #000000; widht: 95px; height: 100; overflow: auto; width:129" >

< !-- Coloque aqui o que desejar -->
< /center >< /div >
< !-- FIM AUTOSCROLL BOX - -->

Voltar

Divisória

2007-08-07T17:22:00.000-07:00

Divisória

Feche as tags.
Altere cor e fonte como preferir

< table border="0" width="50%" height="12" >
< tr>
< td style="border-bottom: 1 dashed #808080; border-top: 1 dashed #808080; border-left: 1 dashed #808080; border-right: 1 dashed #808080" width="50%" height="8">
< font size="1" color="#000000" >Texto Aqui< /font>< /td>
< /tr>
< /table>

EX;

Texto Aqui

Voltar

Tags Úteis

2007-08-07T17:19:00.000-07:00

PS: Feche as tags quando for usar!!!

Tag pra tirar erros no blog

Basta colocar ao lado no título do Blog – só é válido para Blogger e blogspot

< $BLOGMETADATA$ >

Tag de Contagem de arquivo para blogger ou blogspot

< script type="text/javascript" src="< $BlogArchiveFileName$ >">< /script >

Tag que desaparece com a borda azul das imagens mapeadas

< img src="endereçodaimagemaqui" BORDER=0 >

Tag de lay pro firefox

< td width="10"> < /td>
< td width="218" valign="top">

Tag que liga uma imagem a um site

< a href="http:www.site.com.br">< img src=" httpendereçodafigura " alt="Texto aqui">< /a>

Tag de linkagem

< a href="http://www.site.com.br">Site< /a>

Tag para inserir imagem

< img src="imagem" >

Tag para Blogger ou Blogspot

< blogger>

< blogdateheader>[<$BlogDateHeaderDate$>]< /blogdateheader>

<$BlogItemBody$>

< /blogger>

Tag de links com descrição
• ATENÇÃO: Não esqueça de modificar o código. Onde está escrito "pagina", você coloca a url do site/blog o qual desejar descrever.

< a href="http://www.PAGINA.com.br" Title="PAGINA">PAGINA< /a>

Alinhamento

A direita

< p align="right"> Texto na direita. < /p>

Centralizado

< p align=" center"> Texto centralizado.< /p>

Voltar