Hoje vou mostrar como inserir uma caixa flutuante no canto da página, essa caixa funciona como um widget, sendo assim você pode inserir o que quiser nela pelo "Elementos de Página", sendo necessário mexer na sua template apenas na instalação. Vamos aos códigos.
1- Antes de tudo é recomendável que faça um backup da sua template, clicando em "Baixar modelo completo" em "Design > Editar HTML".
2- Feito o backup da sua template, vamos no "Editar HTML", procure por:
]]></b:skin>
E acima dele insira o seguinte código :
.mensagem{
border:1px solid #333;
position:fixed;
width:250px;
margin: 0 5px 5px 0;
background:#fff url(http://1.bp.blogspot.com/-U5GF5XlYjgM/Tn4ldPCJz0I/AAAAAAAAAGM/DkYNTrTGqKI/s1600/top.png) repeat-x;
padding:5px;
right:2px;
bottom : 25px;
}
3- Depois novemente procure por:
]]></b:skin>
E insira abaixo o seguinte código:
<script src='http://www.google.com/jsapi'/>
<script type='text/javascript'>
// Carrega jQuery
google.load("jquery", "1.3");
google.setOnLoadCallback(function() {
$(document).ready(function()
{
//Caixa cai quando a pagina é carregada
$("#caixa").animate({
bottom: "-1px"
}, 2500
).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
//Fechar a caixa quando o X é clicado
$("#fechar_mensagem").click(function()
{
$("#caixa").fadeOut("slow");
});
});
});
</script>
3- Agora procure por:
</body>
E acima insira o seguinte código:
<b:if cond='data:blog.pageType == "index"'>
<div class='mensagem' id='caixa'>
<img id='fechar_mensagem' src='http://2.bp.blogspot.com/-ghZFPhvw6Ek/Tn4uHSsEPsI/AAAAAAAAAGY/M_4jzke5Pvw/s1600/Untitled-1.png' style='float:right;cursor:pointer'/>
<div style='color: #fff;'>Blogger widgets</div><b:section class='widget1' id='widet1' maxwidgets='1'/>
<center><small><small>Widget modificado por <a alt='Blogocracia, dicas de comor criar um blog' href='http://www.blogocracia.com/' style='color: rgb(255, 153, 0);'>Blogocracia</a></small></small></center>
</div>
<b:else/>
</b:if>
Agora clique em "Salvar modelo", e a caixa ja estará funcionando. Para mudar o nome que vai ser visto na caixa edite o texto marcado em vermelho, pelo nome que queira.
Para inserir seus widgets na caixa, é simples, é só ir em "Design > Elementos da página" e no canto você vai ver a caixa flutuante. Parecido como na imagem abaixo.
Lembrando que a caixa flutuante irá aparecer apenas na página inicial, para não ficar cansativo para quem vê. È interessante colocar o Widget, "Follow by email", que está na página inicial dos widgets do blogger. Abaixo um link com um exemplo.
