In Tutoriais

Caixinha Flutuante para Texto e HTML

Oie ^_^ Desejo super boas vindas a vcs sempre!
Como podem ver, estou atualizando o layout, com chocolate, já que agora sim nosso Valentine's Day está pertinho e chocolates nessa época (e em qualquer época) são bem-vindos! Por favor, não reparem a bagunça¬¬...
Hoje vou mostrar como fazer uma caixinha com opção de fechar e flutuante, de modo que você possa personalizá-la como quiser, deixando um recadinho aos seus leitores, um aviso, regrinhas do seu blog/site, dar boas vindas, mostrar ícones de redes sociais, colocar um vídeo ou outro HTML, enfim, o que você quiser.
O resultado fica mais ou menos assim:

Para isso basta adicionar o código abaixo em Layout-Elementos da Página-Adicionar Gadget- Html/JavaScript:
<style type="text/css">

#txt{

width:400px; /* largura */

padding:5px; position:absolute; z-index:5000;}

.caixa-txt{

border:2px double #fcc; /* cor, tipo e espessura da borda */

-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #808080; -moz-box-shadow: 8px 8px 6px #fcc;  box-shadow: 8px 8px 6px #fcc; /* arredondado e sombra */

background: url(http://1.bp.blogspot.com/-uve1BG94d2w/T2YvvLn_P1I/AAAAAAAAFu4/kdsCiLgIA2Q/s1600/M2.gif) repeat; /* Cor de fundo ou background */

padding: 10px; font-family: Verdana, Geneva, sans-serif;

color: #ffffff; /* Cor do texto */

}

.letreiro-txt { /* Estilos do titulo */

font-size:18pt;

font-weight:bold;

color:#ffffff;

text-shadow: 0px 0px 10px #fcc;}

</style>

<div id="txt" style=" left:-300px; top:100px; padding:0;">
<div align="right" style="margin-bottom:-40px;"><b><a href="javascript:closeit()" ><font face="Arial" size="1">[Close]</font> <img valign="middle" style="vertical-align:middle;"/></a></b></div>

<br/>

<fieldset class="caixa-txt">

<legend class="letreiro-txt" align="center">Título</legend>

...ESCREVA AQUI...

<br/><div align="right"><a href="http://www.facebook.com/usuario " target="blank"><img src="URL DA IMAGEM PARA FACEBOOK" width="26"/></a>

<a href="http://twitter.com/usuario " target="blank"><img src="URL DA IMAGEM PARA TWITTER" width="26"/></a></div>


</fieldset>

<script>

function closeit(){

document.getElementById("txt").style.visibility = "hidden";

}

</script>

</div><div class="clear"/></div>
Note que as áreas em negrito podem ser editadas também; destaquei as mais relevantes:
- width:400px;: basta alterar o número para aumentar ou diminuir a largura da caixinha;
- background: troque o link da imagem por outra caso você queira; esse já é fofinho, polka dots ^^ Se quiser colocar uma cor basta substituir por: background-color:#código da cor. Se quiser colocar uma imagem de fundo grande, troque repeat por no-repeat;
- <div id="txt" style=" left:-300px; top:100px; padding:0;">: posicionamento da caixinha em seu blog; se aumentar o número em left, fica mais para a direita; se aumentar o número em top, fica mais para baixo ou vice-versa;
- margin-bottom:-40px: posição da palavra CLOSE; vc pode substituir a palavra por um [X] também;
-<div align="right"><a href="http://www.facebook.com/usuario " target="blank"><img src="URL DA IMAGEM PARA FACEBOOK" width="26"/></a>
<a href="http://twitter.com/usuario " target="blank"><img src="URL DA IMAGEM PARA TWITTER" width="26"/></a></div>:
basta trocar pelo seu nome de usuário em cada rede e colocar a URL de uma imagem e seus links vão aparecer na caixinha ^^
É isso. Espero que gostem e beijus<3

Esse tutorial foi encontrado em: Ciudad Blogger (http://ciudadblogger.com/2011/09/caja-de-aviso-para-el-blog-con-opcion.html) e editado por mim.

Related Articles

8 comentários:

  1. ótimo tutorial! vou já já adiciona-lo ao meu blog! mas queria lhe pedir parceria... aceita?
    Blog:
    brightnessgirl.blogspot.com.br
    Espero esperanças... Beijinhos de chocolate!
    :j:

    ResponderExcluir
  2. muito útil, vou tentar fazer!!! <3

    Teu blog é demasiado kawaii u.u eu ia morrendo de overdose de fofura quando visitei. ;_;

    Vou seguir vc!!!!! *3*

    continue postando tutus em seu blog mega fofo. não para nuuuunca!!!! S2 S2


    http://sorvete--de--morango.blogspot.com/

    ResponderExcluir
  3. Já estou seguindo e já está em meus afiliiados, beijos.

    ResponderExcluir
  4. *--* Seu blog é lindo,beijos :*
    Ai que layout fofo :)

    Dreams-of-imagine.blogspot.com

    ResponderExcluir
  5. :v:Oi Beatriz^^ As vagas para parcerias e afiliações já estão completas; ontem eu aguardava a confirmação da última do blog World Candy. Mas assim qu visitar você eu adiciono aos favoritos ok? Beijus<3
    :v:Nesu~Chan: obrigada ^^ Vou continuar sim :3 Beijus<3
    :v:Deluxes Photoscape: Já adicionei aqui também. Obrigada e beijus<3
    :v:Julia: muito obrigada mesmo! Fico feliz que goste ^^ Beijus<3
    Obrigada a todas!!!

    ResponderExcluir
  6. Obrigada pela oportunidade Roberta! Estou muito feliz ! PS: Seu blog e SHOW! brightnessgirl.blogspot.com.br/

    :cat:

    ResponderExcluir
  7. Oi Roberta!

    Será que tem como você me ajudar??

    Gostaria muito de saber, como coloca esses babadinhos ao redor do post e do sidebar, e onde pegou ou criou aquele seu antigo menu em que podíamos movê-lo! Eu estou criando um layout, e gostaria de colocar essas funções mas não acho nenhum tutorial deles.

    Se puder, ok! Um beijo, e seu blog está cada vez mais lindo, parabéns pelo trabalho! ♥

    http://candy-bruna.blogspot.com

    ResponderExcluir
  8. Ok Bruna:v: :3
    Em breve faço a postagem do tutorial do menu; quanto aos babadinhos, esses foram feitos no layout mesmo, com imagens. É que uso um lay base que possui 3 imagens para formar o template. Eu apenas personalizei essas imagens. Mesmo assim vou ver se há como fazer isso no HTML e se houver faço uma postagem tamb ok?
    Beijus e obrigada:cat:

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart