dicas blog
Home » , , , » Como colocar balão de texto tooltip personalizado no blogger

Como colocar balão de texto tooltip personalizado no blogger

1
Nesse  tutorial  vou  mostrar   como  personalizar  o  balão  de   texto  que  aparece  ao  passar  o  mouse  por  cima   de  um  botão  ou link  que  tenha  texto  a  ser  exibido em  seu  blog , geralmente  o  balão  é branco  mais  pode  ser   personalizado,  com  jQuery  e Css  para  dar  um  ar mais  agradável.  se   você   gosta de  personalizar  seu  blog  vai  gosta  desse   efeito  tooltip,  isso  pode   ser   aplicados  nos parceiros  e   deixa   bem  divertido  seu  blog  para  instalar  no  blogger  vamos  ter   que  adicionar  dois  código  rápidos  no  HTML  do  blog  e dentro  de  um  gadget  javascript,  o  efeito    acontece   se  você tiver  nos  seus  botões  textos  sendo  exibidos  ao passar  o mouse   testos descrição,  se você  não  tem  de  uma  pesquisada  no  blog,    postei  vários modelos aqui bom  vamos  ao  tutorial  abaixo.


Primeiro  vá em modelo editar HTML e de  um CTRL+F  e procure  por </head>  e acima dela  adicione o código  abaixo  e salve.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='https://sites.google.com/site/menunomedois/ultimospostagens56/toolttipmbd.js' type='text/JavaScript'/>

Tutorial Atualizado:código na caixinha abaixo para copiar!

Agora vá em  layout  e  adicione o código abaixo em um  gadget  java script, ou você  pode   adicionar  dentro  do próprio  gadget  que  já tem  os botão,  o  efeito  funcionara  em  todas  as  partes  que tiver   texto  ao  passar  o  mouse,   salve visualize   se   estiver   tudo  certo pronto.

<style>
div#qTip {
padding: 3px;
background: #000; /* Cor de Fundo*/
color: #fff; /* Cor da Fonte */
position: absolute;
z-index: 1000;
border: 0px solid #; /* Cor da Borda */
display: none;
font-family: 'Open Sans', sans-serif;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 3px;
font-size: 16px; /*tamnho das letras*/
}
</style>

Tutorial Atualizado:código na caixinha abaixo para copiar!

Para  fazer   alterações  o código  esta  marcado,  é    dar  uma  olhada  com  atenção, bom erra  isso duvidas  é só  perguntar  obrigado  até a próxima.

1 comentários: