Tutorial simples para Títulos Profissionais

29 de setembro de 2008

Aqui está um tutorial simples de como colocar qualquer tipo de fonte em seus títulos no blogger ou em seus sites.
Como foi escrito em artigo anterior, você precisará de mexer no Flash, CSS e JavaScript.
Baixe os arquivos no formato Flash, JavaScript e os CSS necessários clicando aqui.
Faça primeiro localmente no seu computador, quando estiver craque aplique no seu site ou Blog.

1. Primeiro Passo:
Abra o arquivo Flash no formato .fla, clique duas vezes no quadro branco que aparecerá e não edite nenhuma palavra.
O que você pode modificar neste arquivo é:

  • Tipo de Fonte

  • Negrito e Italico

Após escolher a fonte exporte o arquivo .fla em formato filme Flash 6. Salve com o nome de sua fonte. Ex: Tahoma.swf
Guarde este arquivo em uma pasta junto com os outros.

2. Passo:
A CSS do arquivo
Coloque depois desta marcação no seu blog.

]]></b:skin>

<style media='screen' type='text/css'>

.sIFR-hasFlash .post h3 {
visibility: hidden;
font-size: 24px;
}



.sIFR-flash {
visibility: visible !important;
}

.sIFR-replaced {
visibility: visible !important;
}

span.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}

</style>
<style media='print' type='text/css'>

.sIFR-flash, object, embed {
display: none !important;
height: 0;
width: 0;
position: absolute;
overflow: hidden;
}

span.sIFR-alternate {
visibility: visible !important;
display: block !important;
position: static !important;
left: auto !important;
top: auto !important;
}

</style>

<script src='http://servidorweb/sifr.js' type='text/javascript'/>
</head>

Esta CSS tem que estar do jeito que está aqui, salvo alterações para sua implementação, no caso eu estilizei o .post h3 que é os títulos dos posts.
As primeiras declarações configura a posição e outras configurações visuais dos títulos.
O segundo CSS faz com que a troca seja efetuada corretamente e faz com que se sua página for impressa, a impressão do título saia normal.

3. Passo
O JavaScript faz a magia acontecer. Cole este trecho antes da tab </body>.
O arquivo JavaScript passa os valores para CSS através de variáveis.
Existem duas maneiras de fazer isso:

a - Através de variáveis por ordem no arquivo JavaScript (mais difícil e complicado)

b - Através dos nomes das váriaveis como mostrado abaixo.

SFlashSrc: endereço que esta o arquivo Flash filme.
sColor: cor da fonte
SHoverColor: a:hover (estado do link quando o mouse está sobre)
sFlashVars: variáveis passadas para o filme flash (textalign, swMode (transparencia do filme para background com detalhes)

<script type='text/javascript'>

if(typeof sIFR == "function"){


sIFR.replaceElement(".post h3", named({sFlashSrc: "http://servidorweb.com/verona.swf", sColor: "#800517", sHoverColor: "#123974", sFlashVars: "textalign=center", sWmode: "transparent"}));

};
//]]>
</script>

Se quiser estilizar outros itens é só ascrescentar uma linha a partir do sIFR.replaceElement e apontar para uma classe, id ou elemento específico.
Para cada fonte criar um filme com o nome da fonte.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

5 comentários:

cronicasmalpassadas disse...

Tenho uma mente inquieta. Qualquer coisa que eu faça eu faço pesquisando. E não foi diferente qdo comecei a blogar. Procurei outros blogs, achei blogs que ensinam a fazer blogs, mas esse eu nunca tinha visto...útil, muito útil e bonito tb...

Marcelo R. Souza disse...

@cronicasmalpassadas...
Mente Inquieta! Gosto disso.
Também tenho uma mente inquieta e sempre estou pesquisando algo novo.
Obrigado pela visita!

bloguedomonstro disse...

Respondendo a seu comment no blog: http://bloguedomonstro.blogspot.com

A regra é essa!
Salvo algum engano... às vezes automatizamos nossas ações em certas janelas!
Outra amiga deste mesmo comentário disse que clicou em um link meu e foi levada para meu perfil. Preciso ver isso!

lahlah disse...

o arquivo de download que você postou é só o .js.
tá faltando o fla.
onde posso baixá-lo?

obrigada.

Marcelo R. Souza disse...

@Iahlah os arquivos completos estão no link neste artigo Estilização de títulos profissionais. Lá você baixa todos os arquivos.

Postar um comentário

Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:

<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>

Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa