Área de Login/Administração flutuante no Blogger

Olá amigos do blog Mundo Informal! Tenho por alguns dias, desenvolvido e testado entre alguns widgets, um em especial. Uma área de login para o administrador do blog. 

Como o Blogger não oferece uma opção de login diretamente no blog, muitos usuários procuram por inúmeras formas de simplificar este processo, e agilizar nas tarefas no blog. Tendo em vista essa dificuldade, busquei criar algum recurso que realizasse essa tarefa.

O que surgiu, foi um incrível widget que é um botão que fica flutuante na lateral esquerda do blog, que ao clicar, surge uma área de administração flutuante no rodapé do blog. Nessa janela, após ter feito o login, essa mesma caixa de login exibe os principais atalhos para gerenciamento do blogger.

Demonstração

Para desenvolver o widget, usei como base do código, a área de administração desenvolvida por um blog desativado. Bom, sem mais demoras, vamos para o tutorial que é bastante simples.

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Acesse modelo → Fazer backup/Restaurar → Fazer download do modelo completo.

1° passo: Acesse o painel do Blogger , escolha o blog que você deseja instalar, selecione a opção "Layout" e clique em "Adicionar um Gadget".

2°passo: Agora selecione na lista "Html/Javascript" e cole o código abaixo:

   <style type="text/css"> /* Início do Widget Login por: www.mundoinformal.com Favor não remover os créditos do widget! */ #menuadmin { padding-left: 10px; background-color: #F4EADF; border: 1px #dcdcdc solid; border-radius: 10px; color:#06F } #menuadmin a:link { text-decoration: none; color:#F90 } </style> <a href="javascript:showHideFL()"><img border="0" src="http://marcusvs.webs.com/Widgets/login-blogger-mundoinformal2.png" alt="Member" title="Curta nossa Fanpage" style="position: fixed; top: 150px; left: 0px; cursor: pointer; opacity: 0.5; " opacity:1;filter:alpha(opacity="100)"" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;"="" height="130px" width="40px" /></a><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><style type="text/css"> #fl{ position:fixed; left:850px; z-index:+1000; } * html #fl{position:relative;} .flcontent{ float:left; border:2px solid #676767; background:whitesmoke; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; padding:10px; } </style> <script type="text/javascript"> function showHideFL(){ var fl = document.getElementById("fl"); var w = fl.offsetWidth; fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0); fl.opened = !fl.opened; } function moveFL(x0, xf){ var fl = document.getElementById("fl"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; fl.style.bottom = x.toString() + "px"; if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);} } </script> <div id="fl" style="bottom: -401px; "> <div class="fltab" onclick="showHideFL()"> </div><div class="flcontent"> <addframe> <span class="item-control blog-admin"> <center>Àrea do Administrador</center><div id="menuadmin"> <p><a href="http://blogger.com/post-create.g?blogID=3867197191000094747">Nova postagem </a> <br /> <a href="http://blogger.com/posts.g?blogID=3867197191000094747">Editar postagens</a> <br /> <a href="http://blogger.com/comment-published.g?blogID=3867197191000094747">Comentários<br /> </a><a href="http://blogger.com/blog-options-basic.g?blogID=3867197191000094747">Configurações<br /> </a><a href="http://blogger.com/rearrange?blogID=3867197191000094747">Design<br /> </a><a href="http://www.blogger.com/blogger.g?blogID=3867197191000094747#overviewstats">Estatísticas</a> </p></div></span><div style="text-align: right;"> <a href="http://blogger.com/">Fazer Login</a> <a href="javascript:showHideFL()"> [Fechar X] </a></div><div style="text-align: right;"> *<a href="http://www.mundoinformal.com/">****<a/></a></a></div></addframe></div></div><script type="text/javascript"> var fl = document.getElementById("fl"); fl.style.bottom = (-100-fl.offsetWidth).toString() + "px"; </script>

3° passo: Agora iremos substituir o ID do meu blog pelo ID do blog que você instalou. É bem simples identificar seu id, basta copiar os números assim como na foto:

Clique no nome de seu blog e copie o trecho assinalado na foto, até o sinal #.

4° passo: Agora procure por 6854786429669671859 no código que você colou no gadget Html/Javascript e substitua todos que encontrar com o ID que você encontrou no 3° passo.

Atenção! As funções do Widget só aparecerão após você já ter feito login no Blogger. Se não tiver feito login, aparecerão apenas os botões Login e Fechar.

Pronto! Agora é só testar! Comente e diga o que achou!

Share This :