Aprendendo mais três tutoriais..


  Então gente, meu blog falta apenas mais um membro para os desejados 300 Seguidores, eu estou preparando um novo Layout para o eJhonas mais está difícil escolher a cor {RSS}, por apenas um motivo, meu blog já teve algumas cores, então não quero fazer com elas.. ai eu faço um falo a não tá horrível essa cor, faço outro, mesmo resultado.. ai assim vai.. Aé, quase esqueço de dizer umas coisinhas, na postagem anterior adorei TODOS os comentários, eu um por um, e vi que todos leram aquele pequeno texto que eu fiz sobre como era a nossa infância, nossa eu lembrei de tanta coisa, quando acabei de postar, que falei a não, vai ficar muito longo, terá que ficar assim mesmo {rss}.. Sobre a postagem, eu irei mostrar para vocês três tutoriais super legais, simples de fazer, e super essencial!
 Eu andei por alguns blogs aprendendo alguns tutoriais, ai consegui juntar {não sei como}, o tutorial de mudar cursor com o de negrito, itálico, e sublinhado personalizado! Ou seja, quando você passar o mouse em uma determinada palavra que esteja com algum dos três itens falados anteriormente, o cursor irá mudar ficando com um ponto de interrogação na diagonal dele! {Muito legal, né?}

Negrito, itálico, sublinhado personalizado com mudança de cursor!

 Entre em Design  Editar HTML  Expandir Modelo de Widgets  Ctrl + F  Procure por:
]]></b:skin>
 Logo acima você deverá colar este código: 
b {color: #FF6EB4; text-decoration: none; cursor:  help ; -webkit-transition-duration: .70s; } /* Estilo do negrito */
i {color: #E6E6FA; text-decoration: none; cursor:  help ; -webkit-transition-duration: .70s;}
/* Estilo do italico */
u {color: #000000; text-decoration: none;
border-bottom: 1px dashed #AFEEEE; cursor: help; -webkit-transition-duration: .70s;}/* Estilo do sublinhado */
  Agora só testar em um postagem, e prontinho, super simples, né?!

Caixinha para Códigos

 Na área de postagem mesmo, coloque este código:
<div style="background-image: url(http://www.web-midia.com/coisinhas%20mil/coisinhas_de_posts/patterns/77words_patterns6_093.gif); border-bottom: #d8d2d6 1px dotted; border-left: #d8d2d6 1px dotted; border-right: #d8d2d6 1px dotted; border-top: #d8d2d6 1px dotted; color: black; font-family: verdana; font-size: 11px; height: 80px; overflow: auto; width: 255px;">
TEXTO</div>

Apenas poderá modificar apenas os itens em negrito, já no item em itálico você deverá colocar o que você quer que apareça dentro da caixa, querem uma dica, onde está "255px" modifiquem para que fiquem bem legal no seu layout, assim como eu modifico aqui {Veja uma demostração de como fica, clique aqui}, Pelo incrível que pareça este tutorial você tem que saber, para quem posta este tipo de assunto no blog {Porque eu devo saber?} Porque tem alguns tipos de códigos que pela mor de Deus são enormes {RSS}, se for colocar normalmente a página vai só Deus sabe onde.. {xD}, aprendi com diversos blog's, porém esse aqui eu peguei da Cherry Bomb!

Personalizando a Tooltip

 Aos que não sabem o que é isto, basta ver a imagem abaixo:

  São essas ondinhas.. São bem simples de se fazer, vamos lá ;)
Design  Editar HTML  Expandir Modelo de Widgets  Ctrl + F  Procure por:
</head>
Logo após achar esta tag, acima dela cole este código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/> 
Novamente dê Ctrl + F, e procure por:
]]></b:skin>
div#qTip {
padding: 3px;
background: #eee5de*/ Fundo */color: #8b8378; */ Cor da letra */
position: absolute;
 z-index: 1000;
 border: 1px solid #8b8378; */ Cor da Borda e forma da borda */
display: none; font: bold arial; */ Fonte */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } 
  Bem, onde está em negrito você deverá modificar para a cor que desejar, já em itálico você poderá modificar pela borda que desejar, caso queira ver quais tipos tem, veja logo abaixo:

 Logo acima vocês estão vendo as bordas, pontilhadas, solidas, etc.. todos os nomes em HTML dela estão dentro de cada uma.. elas são 10 sinceramente, e o mais importante, são muito importante saber para colocar em por exemplo, na barra de rolagem com borda pontilhada, parte de comentários.. e assim vai.. Devo esses código á Pink Pimenta, e por sinal o Tutorial esse tutorial da Tooltip eu aprendi com o Se eu fosse você!
Espero que tenham gostado dos tutoriais de hoje, e da das bordas que mostrei para vocês ;)

43 comentários

Postar um comentário

© eJhonas - 2012. Todos os direitos reservados.
Design Jhonas Balsas.
Tecnologia do Blogger.
imagem-logo