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">Note que as áreas em negrito podem ser editadas também; destaquei as mais relevantes:
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyBPhRXk-3A8I54-4nrp3Y_POAtuZ9SUGF2TptEkxLKrTlV269LQAHJI4NnjUEw0mRG__YdLUNKqlkRElx-KJFoVYhU890ymb3bcie-5VuB3tuEIg-Mdoc3XRrMvpwlXkb8ViLj5dFPdo/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>
- 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.
ótimo tutorial! vou já já adiciona-lo ao meu blog! mas queria lhe pedir parceria... aceita?
ResponderExcluirBlog:
brightnessgirl.blogspot.com.br
Espero esperanças... Beijinhos de chocolate!
:j:
muito útil, vou tentar fazer!!! <3
ResponderExcluirTeu 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/
Já estou seguindo e já está em meus afiliiados, beijos.
ResponderExcluir*--* Seu blog é lindo,beijos :*
ResponderExcluirAi que layout fofo :)
Dreams-of-imagine.blogspot.com
: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
ResponderExcluir: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!!!
Obrigada pela oportunidade Roberta! Estou muito feliz ! PS: Seu blog e SHOW! brightnessgirl.blogspot.com.br/
ResponderExcluir:cat:
Oi Roberta!
ResponderExcluirSerá 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
Ok Bruna:v: :3
ResponderExcluirEm 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: