12/29/2014

♡YEAH!!-Modelos Para Tooltip ♡

-Hey sou eu mesma a sumidinha!Quer dizer um dia sem postar não é sumiço...É que eu amo vocês e seu eu ficar 1 dia sem  postar já fico preocupada!Então toda hora só fico postando tutorial e tutorial,e isso enjoa então trouxe um utilitário mega fofo e bacana pro seu blog,vocês sabem o que tooltip??Então sabe quando você chega perto de alguma foto e aparece uma caixa cina com uma mensagem?Então é isso,trouxe modelos super personalizados pro seu blog ficar mega personalizado!Todos são do bloguito The Moon Reverse,então se usar avise aqui e credite!!Let's go?
                   
~Yoo!Como vão bolinhos deliciosos,eu estou ótima e feliz falta 2 dias para o Ano Novo,ainda bem quero que 2.015 chegue logo cheio de boas vibes e saúde!!Okay bom todos são do bloguinho The Moon Reverse super fofos e variados,façam bom proveito meus docinhos!:
1.Para aplicar o tooltip você precisa ir em Html,aperte as teclas Ctrl+f e procure por:
</head>
Ao achar o código procurado,cole isso acima dele:
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> <script language="JavaScript" src="//yourjavascript.com/1411249631/qTip.js" type="text/JavaScript"></script>
2.Agora procure por:
]]></b:skin>


Então cole o código do tooltip que você mais gostou e vai usar,ai estão os códigos e as imagens:

                                                  
div#qTip { position: absolute; z-index: 1700; display: none; margin-top: 6px; background: #f9cfe1; background: -moz-linear-gradient(top, #f9cfe1 0%, #efacc8 85%, #f4bcd3 87%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9cfe1), color-stop(85%,#efacc8), color-stop(87%,#f4bcd3)); background: -webkit-linear-gradient(top, #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%); background: -o-linear-gradient(top, #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%); background: -ms-linear-gradient(top, #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%); background: linear-gradient(to bottom, #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9cfe1', endColorstr='#f4bcd3',GradientType=0 ); box-shadow: inset 1px 1px 0 #ffe4ef; border: 1px solid #dfa1bb; padding: 6px; font-family: "arial"; font-size: 10px; color: #fff; text-shadow: 1px 1px 0 #d689a9; }

                                            
@font-face { font-family: "littlefont"; src: url('http://static.tumblr.com/4yxykdm/NMJlre6xz/04b_03___1_.ttf'); } div#qTip { position: absolute; z-index: 1700; display: none; margin-top: 6px; background: #606060; box-shadow: 3px 3px 2px #f3f3f3; padding: 6px; font-family: "littlefont"; text-transform: uppercase; font-size: 8px; color: #e1e1e1; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

                                          
div#qTip { position: absolute; z-index: 1700; display: none; margin-top: 6px; background: #d0dbe4; background: -moz-linear-gradient(top, #d0dbe4 0%, #e1e7ed 51%, #d0dbe4 51%, #d0dbe4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0dbe4), color-stop(51%,#e1e7ed), color-stop(51%,#d0dbe4), color-stop(100%,#d0dbe4)); background: -webkit-linear-gradient(top, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%); background: -o-linear-gradient(top, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%); background: -ms-linear-gradient(top, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%); background: linear-gradient(to bottom, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0dbe4', endColorstr='#d0dbe4',GradientType=0 ); box-shadow: inset 1px 1px 0 #eaf0f4; border: 1px solid #bdccd8; padding: 4px; font-family: 'Trebuchet MS', Trebuchet, sans-serif; font-size: 12px; color: #fff; text-shadow: 1px 1px 0 #bdccd8;


                                      
div#qTip { position: absolute; z-index: 1700; display: none; margin-top: 6px; background: #f4f4f4; background: -moz-linear-gradient(top, #f4f4f4 19%, #e5e5e5 99%); background: -webkit-gradient(linear, left top, left bottom, color-stop(19%,#f4f4f4), color-stop(99%,#e5e5e5)); background: -webkit-linear-gradient(top, #f4f4f4 19%,#e5e5e5 99%); background: -o-linear-gradient(top, #f4f4f4 19%,#e5e5e5 99%); background: -ms-linear-gradient(top, #f4f4f4 19%,#e5e5e5 99%); background: linear-gradient(to bottom, #f4f4f4 19%,#e5e5e5 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e5e5e5',GradientType=0 ); box-shadow: inset 1px 1px 0 #fff; border: 1px solid #d1d1d1; padding: 4px; font-family: 'Trebuchet MS', Trebuchet, sans-serif; font-size: 12px; color: #bcbcbc; text-shadow: 1px 1px 0 #fafafa; }
Bom espero que tenha dado,certinho no seu blog!Ah!Para quem não sabe o que é tooltip,é isso:

~Kisses Bolinhos

2 comentários :