Home
Tutoriais
Efeitos
Ilustrações
Menus
Psds
Vagas
F.A.Q
Mapa
Layout free

Tutorial: Tooltip de coração.


Hey amores! 

Estou muito feliz pelos comentários da postagem anterior. Fico muito grata a todos que me desejaram parabéns pelo quatrocentos seguidores, vocês são demais! Bom, me desculpem por não entrar e postar antes, é que ainda estou naquela época de bloqueio criativo então fico um pouco sem ideia do que vir e postar, e não tem pedidos na ask então eu fiquei sem postar por realmente não ter ideia alguma do que trazer. Bom, mas acho que tá voltando ao normal. Eu acho. Eu também estou preparando um novo layout free e acho que será de natal, então em breve eu comento com vocês sobre ele, que na verdade nem saiu da ideia, só tá em pensamento.(^▽^●)

Enfim, vamos ao assunto do post de hoje, que é um tooltip super fofo, e reparei que tem alguns blogs usando, e tem até algumas pessoas querendo saber como coloca ele no blog, então eu resolvi trazer um tutorial sobre esse tooltip lindo e perfeito. Só pra avisar, o código desse tutorial eu peguei no Honey Pixel, um blog divoso mas, eu fiz algumas alterações mudando a cor do tooltip que era totalmente rosa e a fonte que eu não gostava. Bom caso queiram saber qual é, cliquem aqui e passe o mouse em "Passe o mouse aqui". E vamos ao tutorial? ih weeeeeeeh!


1º Passo vá em Modelo > Editar HTML e procura por ]]></b:skin> e acima dele cole: 

div#toolTip {
background: #f4f4f4;
text-align: center;
font: normal 12px Arial;
padding: 4px;
border: 1px solid #e7d7da;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-top: -44px !important;
position: absolute;
z-index: 1000;
}
div#toolTip p {
color: #e694a3;
text-shadow: 0 1px #fff;
margin: 0 auto;
padding: 0;
}
div#toolTip p em {
display: block;
margin-top: 2px;
color: #e7768b;
}
2º Passo: Agora você vai procurar por </head>

3º Passo: Escolhendo (abaixo) qual cor você prefere (de coração do tooltip) copie os códigos correspondentes e cole abaixo de </head>


  Azul escuro
<script src='http://static.tumblr.com/tk5mvj5/z0Amwe0di/onedithings2.js' type='text/javascript'/>
 <script src='http://static.tumblr.com/tk5mvj5/RCpmwe09a/onedithings.js' type='text/javascript'/>
  Preto
<script src='http://static.tumblr.com/tk5mvj5/z0Amwe0di/onedithings2.js' type='text/javascript'/>
 <script src='http://static.tumblr.com/tk5mvj5/PSemweaxl/onedithingspreto.js' type='text/javascript'/>
  Azul claro
<script src='http://static.tumblr.com/tk5mvj5/z0Amwe0di/onedithings2.js' type='text/javascript'/>
 <script src='http://static.tumblr.com/tk5mvj5/Yvmmweb5r/onedithingsazul.js' type='text/javascript'/>
  Rosa claro
<script src='http://static.tumblr.com/tk5mvj5/z0Amwe0di/onedithings2.js' type='text/javascript'/>
 <script src='http://static.tumblr.com/tk5mvj5/LkJmweb7p/onedithingsrosaclaro.js' type='text/javascript'/>
  Lilás
<script src='http://static.tumblr.com/tk5mvj5/z0Amwe0di/onedithings2.js' type='text/javascript'/>
 <script src='http://static.tumblr.com/tk5mvj5/l2tmweb9x/onedithingslil__s.js' type='text/javascript'/>
  Vermelho
<script src='http://static.tumblr.com/tk5mvj5/z0Amwe0di/onedithings2.js' type='text/javascript'/>
 <script src='http://static.tumblr.com/tk5mvj5/bTpmwebc0/onedithingsvermelho.js' type='text/javascript'/>
  Verde
<script src='http://static.tumblr.com/tk5mvj5/z0Amwe0di/onedithings2.js' type='text/javascript'/>
 <script src='http://static.tumblr.com/tk5mvj5/iommwebdt/onedithingsverde.js' type='text/javascript'/>
  Rosa escuro
<script src='http://static.tumblr.com/tk5mvj5/z0Amwe0di/onedithings2.js' type='text/javascript'/>
 <script src='http://static.tumblr.com/tk5mvj5/B72mwebfv/onedithingsrosaescura.js' type='text/javascript'/>
  Cinza 
<script src='http://static.tumblr.com/tk5mvj5/z0Amwe0di/onedithings2.js' type='text/javascript'/>
 <script src='http://static.tumblr.com/tk5mvj5/TzXmwebhv/onedithingscinza.js' type='text/javascript'/>
  Roxo escuro
<script src='http://static.tumblr.com/tk5mvj5/z0Amwe0di/onedithings2.js' type='text/javascript'/>
 <script src='http://static.tumblr.com/tk5mvj5/vdOmwebk8/onedithingsroxo.js' type='text/javascript'/>

Se usarem, deem créditos parcialmente, ao Honey Pixel pelo tooltip e a ao One Dí Things pela diversidade de cores! E qualquer dúvida pergunte nos comentários! Espero que gostem, até em breve! Bai :)x

2 comentários:

  1. Eu queria saber desse tuto, muito fofo, muito mesmo *--*

    htmlandresources.blogspot.com.br

    ResponderExcluir
  2. Adorei *u* usei no meu blog.

    http://wohoomagic.blogspot.com.br/

    ResponderExcluir