WIDGET, CAIXA FLUTUANTE COM JQUERY NA PAGINA INICIAL NO BLOGGER

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVYDTy3Au6tpuQuML6kjVhygGpBU4Exbk57gJqhJcGP7PA5honOt7G5liN2dYT2xZiWxR6PhlIkGkbzsxnWmGCcauRIxUR20R91OG-5jkyVBtaEkFovcR01FU6aKtv3_cYb66fEM7HjiDY/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 == &quot;index&quot;'>
<div class='mensagem' id='caixa'>
<img id='fechar_mensagem' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1m6vszqq_OKwkfsq0ZSzL99OltVHfv2jrWM9biUVnAq1TZqEa6w6XehWr5UGtVPHSy7L6xjLVQgiKyf0Yl4HT_aT53lERGF05gWlNXfQqKpRj87odzUTZQtVvjPhByXeuX1hDHUIGxI30/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.

Divulgue no twitter (Link curto):