Hola, macarrons !
Não postei, pois estava ocupada com o layout que estou fazendo para disponibilizar, aqui no blog.Resolvi fazer este post pro blog não ficar muito parado e tal... O tutorial de hoje e sobre personalizar tooltips. Para quem não sabe e aquela caixinha com um texto dentro, que aparece quando passamos o cursor sobre os afiliados\leia mais
Para quem não sabe o Tooltip e isto :
Cherry Boomb
1.Expanda os primeiros três pontinhos que aparecerá.Clique em qualquer parte da caixa e de um Ctrl + f e pesquise por <head> e abaixo deste código cole :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'
type='text/javascript'></script><script language='JavaScript'
scr='http//static.tumblr.com/0xqvkot/uNAmn5zem/there.js' type='text/JavaScript'></script>
2. Cole o código abaixo no bloco de notas e edite o necessário.
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
div#qTip {
margin:2px;
padding: 5px 9px;
border-right-width: 1px;
border-bottom-width: 1px;
display: none;
color:#fff; *COR DA FONTE*
background: #fd97b1; *COR DE FUNDO*
border: solid 1px #eb7896; *EXPESSURA E COR DA BORDA*
font-family: silkscreen;
font-size: 8px; *TAMANHO DA FONTE*no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
opacity: 1.0;
text-transform: uppercase;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-moz-box-shadow:
inset 0px 0px 1px rgba(255,255,255,1.0);
-webkit-box-shadow:
inset 0px 0px 1px rgba(255,255,255,1.0);
box-shadow:
inset 0px 0px 1px rgba(255,255,255,1.0);
}
Ao lado do que está em negrito você edita seguindo a tabela de cores, e apaga o que está entre os asteriscos (*)
3.Clique nos três pontinhos que aparecerá primeiro, pesquise por ]]></b:skin> e cole o código já editado.Pronto ! Visualize e salve.Você testa passando o cursor sobre os afiliados ou sobre o modelo de leia mais !
Kisses :3
Amei. esse tutorial, super útil ! ^^
ResponderExcluir