Tutorial simples para Títulos Profissionais

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