001 - Tutoriais ~> Opacidade nos navegadores do blog

Olá o//

Tudo bom com você? Eu espero que sim , sumi de novo  , mas foi por um bom motivo , estava preparando esse layout aqui eu adorei ele . Continuando eu não tive muito trabalho para faze-lo , eu tive algumas aulas de layout pela internet , tanto por cursos online quanto por outros blogs,então não foi tão difícil assim , eu estou sinceramente querendo fazer um tutorial aqui em vídeo aula talvez ou até mesmo explicando por post mesmo , mas vocês decidem depois , e se ainda não viu os meu lindos tutoriais de como criar um layout só clicar aqui  para ir ao índice que está escrito lá . Mas vamos aqui começar com o tutorial logo por que né  , se não fico aqui o dia inteiro , só falando . Leia mais por favor*W*

Continuando...Perceberam a opacidade nos navegadores certo ?

Trouxa aqui para vocês verem como se faz , que é como eu disse não é tão difícil assim , mas antes tenho que explicar uma coisinha  aqui , nada de mais , só como ter a opacidade  vamos lá:

Primeiro entenda o que dá a opacidade é a opacity então é só criar um menu com ela , mas é bom saber quando maior o número mais claro irá ficar e quando menor o número mais escuro fica aqui há um exemplo : Se colocar um número menor que 1 ( como 0.65) , irá ficar mais escuro e se colocar um número maior que 1 ( como 1.75) ficará mais claro , se entendeu muito bem pode pular para parte do menu que é a que está sublinhada aí embaixo, se ainda não continue lendo aqui , entendeu que um nume maior que 1 é  mais claro e menor que 1 é mais escuro ,digamos de outra forma um número que seja maior que 1 só irá funcionar em uma imagem então não o queremos , somente os negativos que irá escurecer , se estiver usando imagem em vez das palavras, mas entenda melhor vendo os seguintes exemplos :

1º Este é o original :

2º Este é com a opacidade menor que 1 :

3º Este é com a opacidade maior que 1:

Notaram que praticamente não houve alteração entre a 1º e a 3º por que não está em figura ,assim não funciona , bem espero que agora tenha entendido ,por que senão. Nada não esquece -q .Qualquer coisa tem o Google pra te ajudar =3

Pessoas que entenderam ( ou já sabiam ) aqui é pra você. :p

Aqui um exemplo de menu que você irá utilizar, é o Menu "Bicado" e acredite esse nome veio do além -u- . Ele servirá de base pra você , mas é claro base ou não , se coloca créditos , então não retire os do HTML , ninguém vai ver ok?

Lembrete da Titia Lê aqui: Isso não substituíra o Blog-pager só dará a opacidade. Não apague ele ok?  tanto que é bem simples não tem nada de mais . Vá em Editar HTML - Ctrl+F - ]]></b:skin>

/* Menu Opacidade por Mad World

------------------------------------------------- */

.bicado{

margin-top: 2px;/*--- espaco entre o post e o navegador --- */

-webkit-transition-duration: .50s;/*--- Duração. NÃO MEXA. --- */

}

.bicado:hover{

opacity: 0.43;/*--- A opacidade . Ainda não entendeu vai no Google --- */

-webkit-transition-duration: .50s;/*--- Duração. NÃO MEXA. --- */

}

E olha lá o 0.43 não falei/expliquei/mais do que deveria/acabo e como podem ver ele ficará mais escuro , e vou parando por aqui se não vem tudo de novo. Mas isso não irá bastar , por que né ta horrível , agora vem a parte interessante procure por <data:newerPageTitle/>  se não achar procure por <span id='blog-pager-newer-link'> e abaixo dele verá isso :

click na imagem para amplia-la .

acho tudo bonitinho ? Agora coloque o <data:newerPageTitle/>  entre as tags do menu <bicado></bicado> , assim:

<bicado><data:newerPageTitle/></bicado> 

Depois faça isso com  <data:homeMsg/> e <data:olderPageTitle/> , prontinho , antes visualize , se por algum acaso do destino der erro , repasse todo o tutorial de novo , hehe =P .
Bom acho que é só isso eu espero  se tiverem alguma dúvida , ou querer concertar alguma coisa fiquem a vontade por que eu não releio toda a postagem então digam ai onde eu errei , só não falem ela toda T-T por eu morro -q.
Espero que tenham gostado , e desculpem o tamanho é que eu queria deixar bem explicado.

Até mais o//////