Criando Uma Área de Login no Blogger

Blogger ainda não tem todas as ferramentas de seu concorrente por isso as vezes temos que criar ferramentas e adapta-las ao ele, um exemplo simples é que o Wordpress possui uma caixa de login, e como o Blogger não possui encontrei uma maneira de inseri-la para que funcione como o Gadget "Meta", veja no tutorial abaixo:

Inserindo
1)Faça login no Blogger - Clique aqui se ainda não sabe Adicionar um Gadget
2)Vá em "Layout"->"Elementos da página"->"Adicionar um Gadget"->"HTML/JavaScript", insira como conteúdo o seguinte código:

Título: Fazer Login

<!-- Inicio do Style Fazer Login
By Canal Marcos Francisco
-->
<style>
#Email, #Passwd{
border: 1px solid #659529;
}

#signin-btn-ns {
color: #FFF;
background: #659529;
border: 1px solid #659529;
}
</style>
<!-- Fim do Style Fazer Login -->

<!-- Inicio do Código Fazer Login -->
<div id="loginform"><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()">
<input value="http://draft.blogger.com/loginz?d=%2Fhome&amp;p=http%3A%2F%2Fdraft.blogger.com%2F" name="continue" type="hidden" />
<!-- Área do Email -->
<div>
<label for="Email"> E-mail:
<br /><input id="Email" tabindex="1" name="Email" size="50" type="text" />
</label>
</div>
<!-- Área da Senha -->
<div>
<label for="Passwd"> Senha: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Esqueci minha senha">?</a>)
<br />
</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="50" type="password" />
</div>
<!-- Botão Entrar -->
<br />
<input id="signin-btn-ns" tabindex="0" value="Entrar" class="ubtn ubtn-block" name="submit" type="submit" />
</form></div>
<!-- Fim do Código Fazer Login -->

 3)Salve e visualize

Ou Faça o Seguinte
1)Faça login no Blogger - Clique aqui se ainda não sabe Adicionar um Gadget
2)Vá em "Layout"->"Elementos da página"->"Adicionar um Gadget"->"HTML/JavaScript", insira como conteúdo o seguinte código:

<!-- Inicio do Código Fazer Login -->
<div id="loginform"><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()">
<input value="http://draft.blogger.com/loginz?d=%2Fhome&amp;p=http%3A%2F%2Fdraft.blogger.com%2F" name="continue" type="hidden" />

<!-- Área do Email -->
<div>
<label for="Email"> E-mail:
<br /><input id="Email" tabindex="1" name="Email" size="50" type="text" />
</label>
</div>

<!-- Área da Senha -->
<div>
<label for="Passwd"> Senha: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Esqueci minha senha">?</a>)
<br />
</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="50" type="password" />
</div>

<!-- Botão Entrar -->
<br />
<input id="signin-btn-ns" tabindex="0" value="Entrar" class="ubtn ubtn-block" name="submit" type="submit" />
</form></div>
<!-- Fim do Código Fazer Login -->

3)Salve e visualize

Estilizando com CSS (opcional)
Se desejar dar um estilo a caixa de login, veja:
1)Acesse "Layout"-> "Editar HTML", procure por "]]></b:skin>", e antes insira o seguinte:

/* Inicio do Style Fazer Login 
By Canal Marcos Francisco
*/
#Email, #Passwd{
border: 1px solid #659529;
}

#signin-btn-ns {
color: #FFF;
background: #659529;
border: 1px solid #659529;
}
/* Fim do Style Fazer Login */

2) Salve e visualize.

Seu Gadget deverá ficar assim:

E-mail:

Senha: (?)

 
Gostou? Então se inscreva no Canal no YouTube e receba mais novidades.