Esse é o código base, mas é so molde então baixá-lo:: AQUI!.
/* ------------ Formatação da Fonte -------------- */
p, a, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size: 11px;
color: #ffd35b; >>> COR DA FONTE DO FLOG!
font-family: Arial;
line-height: 13px;
cursor: crosshair;
}
/* ----------------- Formatação do Link ------------------- */
a, a:link {
a, a:link{
color: #ffc21e; >>> COR DO LINK ANTES DE PASSAR O MOUSE
height:1px;
border-bottom: 1px solid #ffc21e; >>> BORDA ABAIXO
border-top: 1px dashed 404040; >>> BORDA EM CIMA
border-left: 1px solid 404040; >>> BORDA LADO ESQUERDO
border-right: 1px solid #ffc21e; >>> BORDA LADO DIREITO
cursor: hand;
TEXT-DECORATION: none;
background-color: #fffaeb; >>> FUNDO DO LINK
}
a:hover {
color: #000000; >>> COR DO LINK QUANDO PASSA O MOUSE
height:1px;
border-bottom: 1px solid #ffc21e; >>> BORDA ABAIXO
border-top: 1px dashed 404040; >>> BORDA EM CIMA
border-left: 1px solid 404040; >>> BORDA LADO ESQUERDO
border-right: 1px solid #ffc21e; >>> BORDA LADO DIREITO
cursor: hand;
TEXT-DECORATION: none;
background-color: #fffaeb; >>> FUNDO DO LINK
}
/* ----------------- Formatação de Estilos ---------------- */
b {color: #000000; TEXT-DECORATION: bold; cursor: n-resize;}
u {color: #ffffff TEXT-DECORATION: none; border-bottom: 0px dotted #ffce4a; cursor: n-resize;}
i {color: #cf9700; cursor: n-resize; TEXT-DECORATION: italic; border-bottom: #cf9700; }
ul {line-height: 100%; color: #cf9700; font-color: #cf9700; margin: 0 18;}
/* ------------------------------- Formatação das Caixas ---------------------------------- */ input, textarea, select
{font-family: Tahoma;
font-size: 11px;
color: #cf9700; >>> COR DA FONTE DENTRO DA CAIXINHA
border-bottom: 1px solid #ffc21e; >>> BORDA ABAIXO
border-top: 1px dashed 404040; >>> BORDA EM CIMA
border-left: 1px solid 404040; >>> BORDA LADO ESQUERDO
border-right: 1px solid #ffc21e; >>> BORDA LADO DIREITO
background-color: transparent; >>> COR DO FUNDO DA CAIXINHA
-moz-border-radius: 8px 8px 8px 8px; >>> TAMANHO POPORCIONAL
cursor: col-resize;
}
/* ------------------------------- Formatação de Tabelas ---------------------------------- */
.table1 { <<< POST (ONDE VC ESCREVE XUXU)SEU NOME)
color: #ffffff;
>>> COR DA FONTE DO COMENTARIO border-bottom: 1px solid #ffc21e; >>> BORDA ABAIXO
border-top: 1px dashed 404040; >>> BORDA EM CIMA
border-left: 1px solid 404040; >>> BORDA LADO ESQUERDO
border-right: 1px solid #ffc21e; >>> BORDA LADO DIREITO
width: 350px; >>> TAMANHO DO POST QUE DESEJAR
background-color: #ffcc42; >>> COR DO FUNDO DA POST
cursor: crosshair;
}
.table2 { <<< POST (ONDE VC ESCREVE XUXU)SEU COMENTARIO)
color: #ffffff;
>>> COR DA FONTE DO COMENTARIO border-bottom: 1px solid #ffc21e; >>> BORDA ABAIXO
border-top: 1px dashed 404040; >>> BORDA EM CIMA
border-left: 1px solid 404040; >>> BORDA LADO ESQUERDO
border-right: 1px solid #ffc21e; >>> BORDA LADO DIREITO
width: 350px; >>> TAMANHO DO POST QUE DESEJAR
background-color: #ffcc42; >>> COR DO FUNDO DA POST
cursor: crosshair;
}
Estilos: É o famoso Negrito, Sublinhado, e Itálico.
•No b{, onde está escrito: TEXT-DECORATION: bold;, é que o seu negrito ficará em negrito! Mas como assim? Por exemplo, se você colocar TEXT-DECORATION: none;, o seu negrito não ficará gordinho, apenas da cor que você escolheu! Entendeu?
•No Itálico a mesma coisa, se tiver: TEXT-DECORATION: italic; o seu itálico ficará 'caidinho'.
•No Underline, se tiver TEXT-DECORATION: underline; ele ficará com a linhazinha em baixo! ul{ O que é isso? o.o ' é tipo um parágrafo, não liguem para isso não, é raro usar isso! Eu nunca usei, ou seja, pode deixar como está! ^^
Link: É a configuração do seu link. 'a, a:link{' é a 'face' do seu link, sem estar com o mouse por cima. color: #66b0cd; é a cor do seu link, por exemplo, isso é um link, se você não colocar o mouse por cima, apenas vê-lo, ele está rosa certo? Isso que é o 'a, a:link{'! border-bottom: none; é uma linha que fica por baixo do link, se estiver sem em none; é porque está sem linha nenhuma, como o meu link, perceba que ele está sem linha nenhuma. Veja alguns exemplos:
Esse está com a configuração de border-bottom: 1px solid #000000; O 1px significa a grossura da linha.
Esse está com a configuração de border-bottom: 2px solid #000000; E o #000000 é a cor da linha!
Se quiser esse código para pôr no seu css, está aqui: border-bottom: 1px solid #000000;
Agora que você já sabe mudar a cor e agrossura da linhas, veja outros modelos:
Esse está com a configuração de border-bottom: 1px dashed #000000;
Esse está com a configuração de border-bottom: 1px dotted #000000;
Esse está com a configuração de border-bottom: 3px double #000000;
Atenção: Bordas Double tem que estar configurada em 3px para ela aparecer corretamente!
Fonte: É a sua fonte,
font-size: 11px; é o tamanho da fonte, geralmente varia de 9px à 12px.
color: #66b0cd; é a cor da sua fonte. font-family: verdana; é o nome
da fonte, as mais usadas são verdana, tahoma, arial.
cursor: crosshair; é o cursor que vai ficar no seu blog, não só em cima da
fonte, nas suas páginas todas. Abaixo você encontra o nome dos cursores do
sistema, é só passar o mouse em cima do nome:
cursor: hand;
cursor: crosshair;
cursor: text;
cursor: wait;
cursor: help;
cursor: move;
cursor: e-resize;
cursor: ne-resize;
cursor: nw-resize;
cursor: n-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: s-resize;
cursor: w-resize;
cursor: progress;
cursor: all-scroll;
cursor: col-resize;
cursor: not-allowed;
cursor: row-resize;
cursor: url(mycursor.cur);
*Cursor personalizado*
*Cursor personalizado*
SEMPRE QUE HOSPEDAR O SEU CSS .. TEMINE O NOME ASSIM.
EX.: theup.css (pra funcionar tah! lembre-se disso)
E COLOQUE O LINK DO CSS HOSPEDADO AQUI::
< link media="screen" href="LINK DO SEU CSS AQUI" type="text/css" rel="stylesheet">
Copie esse código abaixo, e cole no post do seu flogvip e pronto seu flog tem css :D
------------------------------------------------------------------------------
PARA QUEM TEM PHOTO.SHOP e ate mesmo o PHOTO.FILTRE
----------------------1° PASSO:--------------------
#1 Copie a foto desejada.
#2 Cole a foto.
#3 Posicione ela como desejado [editar normalmente!]
#2 Edite a foto [action se preferir]
#5 Aperte CTRL + A, depois CTRL + C e em seguida CTRL + V [ASSIM VAI SURGIR UMA NOVA CAMADA] depois e finalmente CTRL + A e apaguei a camada (CTRL + X)
----------------------2° PASSO:--------------------
#1 Aperto com o MOUSE o lado direito.
#2 Escolha "PINCEIS NATURAIS"
#3 Uso o pincel de "SUAVIDADE" [AKELE E USA PRA APAGAR AS COISAS/ NA FOTO A CIMA]
#4 Escolha uma cor
#5 Depois aperte o Brushe normalmente.
----------------------3° PASSO:--------------------
#1 Agora Você vai nakele "Definir o modo de mesclagem da camada" [O DA FOTO A CIMA!]
#2 Escolha o modo de CLAREAR [Onde fica mais bonito,]
PS.: Os outros modos tambem pode ser usado, ficam bonitos de todos os jeitos, DEPENDEDO das cores ESCOLHIDAS.
#3 Agora sim, feito isso você ja pode salvar sua edição!
PS.: Fica melhor em PNG.
BOA SORTE ^^
Tutorial by*Al&ssa Ablle Gyllenhaal
