domingo, 18 de dezembro de 2016

Criando Uma Área de Login no Blogger

Zoom: A+ A-
http://zerobugs.com.br/upload/-tutorial-sistema-de-login-de-usuarios-com-php-mysql-html-e-css-33.jpg

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:



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

0 comentários :

Postar um comentário

Este blog não é destinado apenas para adultos, portanto não seram admitidos propagandas, linguagem impropria, ofensiva ou obsena que caracterize atitudes evidentes de desrespeito ou grosseria e/ou nada que a desperte curiosidade ou a atenção de menores ou contribuir para que eles adotem valores morais ou hábitos incompatíveis com a menoridade.
As pessoas que inflingir estas regras serão denunciadas ao setor de analize de conteúdo do Google podendo ter sua conta encerrada permanentemente.