domingo, 18 de outubro de 2015

Como criar sistema de Cadastro para blogger

                           image
Sistema de login para blogger dificilmente pode ser achado.Esse é um sistema de LOGIN apenas, sem cadastro, com uma caixa de emai e uma de senha, onde o usuário poderá logar com sua conta do blogger.Ao logar-se, o usuário ser00á redirecionado para a painel de controle principal do blogger.
Para instalar em seu blog, copie o código abaixo.

Vá em “Layout”  “Elementos da página” - “Adicionar um gadget” > “HTML/Javascript” , cole-os e salve!
O sistema já vem personalizado com um background azul, mas você pode estar trocando a cor do fundo, substituindo a parte destacada de vermelho no código por uma outra cor HEXADECIMAL.
A parte azul é a largura em pixels do fundo, e a parte verde é o arredondamento das bordas.

Bom vamos para o Código ok

<div style="background:#CFEEFA
padding:5px; 
width:300px
margin:3px; 
-moz-border-radius-topleft: 25px
-moz-border-radius-bottomright: 25px
-webkit-border-top-left-radius: 25px
-webkit-border-bottom-right-radius: 25px;"> 
<form onsubmit="return(gaia_onLoginSubmit());" method="post" action="https://www.google.com/accounts/ServiceLoginAuth" id="gaia_loginform"> 
<div id="gaia_loginbox"> 
<div align="right"> 
<span class="gaia le lbl"> 
</span> 
</div> 
<center> 
<div style="padding:5px;"> 
<input type="hidden" value="http://www.blogger.com/home" id="continue" name="continue" > 
<input type="hidden" value="9073907313875735129" id="dsh" name="dsh"> 
<input type="hidden" value="pt-BR" id="hl" name="hl"> 
<input type="hidden" value="" id="timeStmp" name="timeStmp"> 
<input type="hidden" value="" id="secTok" name="secTok"> 
<input type="hidden" value="W_eMxEkDm-Q" name="GALX"><div>E-mail: 
<input type="text" class="gaia le val" value="" size="18" id="Email" name="Email" ></div> 
</div> 
<div style="color: rgb(102, 102, 102); font-size: 75%;"> 
<span class="gaia le lbl"> 
</span> 
</center> 
<centeR> 
<div style="padding:5px;">Senha: 
<input type="password" class="gaia le val" size="18" id="Passwd" name="Passwd"></div>
</centeR> 
<center> 
<div> 
<input type="checkbox" checked="" value="yes" id="PersistentCookie" name="PersistentCookie"> 
<input type="hidden" value="1" name="rmShown"> 
<label class="gaia le rem" id="PersistentCookieLabel" for="PersistentCookie"> 
Quero ficar conectado! 
</label> 
</div> 
<input type="submit" value="Login" id="signIn" name="signIn" class="gaia le button"></div></form>



domingo, 11 de novembro de 2012

Gadgets com fundo colorido


Oie moranguinhos hoje vim ensinar a vocês como colocar um efeito super fácil e pratico no Gadgets do blog.
Primeiramente vá em Design > Editar Html > e procure por (CTRL+F) /*widgets  
deverá aparecer um código mas ou menos igual a este!
/* Widgets
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}
Depois do MARGIN:10px o; acrescente mas o código que divide a coluna deixando somente a cor dentro dos Gadgets 

background-color: ( A cor desejada deverá ficar aqui )

visualize e se estiver tudo certo salve caso você não achar esses códigos copie ele e coloque Acima de ]]</b:skin>.
Kissus~




sexta-feira, 9 de novembro de 2012

Como Personalizar e Colocar Imagem no Titulo dos Gadgets do Blog


Olá sonhos açucarados ?! hoje trouxe um tutorial pra vocês que me perguntam muito então 
vamos começar ?!
na maioria dos Templates do blog usam o estilo H2 
Vá em Design Editar HTML e procure por h2 {...} o conteúdo das chaves vareia entre Templates. 
não apague nada apenas acrescente deixando-o desse jeito:

h2{background-color: #6699FF
background-repeat: no- repeat; 
background-position: right top;
background-image : url ( Endereço da imagem);}               

a Linha Background-color: #6699FF é uma cor de fundo 
caso você use uma imagem pequena ou queira apenas trocar a cor do fundo do gadget.  mas você pode apagar essa linha se quiser.
o restante do código é o posicionamento e a imagem de fundo. tenha cuidado para não apagar nada por engano e também usar o url de imagem correto. 
Mas você pode edita-los separadamente por exemplo se quiser mudar a imagem ou colocar a imagem no gadget MARCADORES podendo ser em outro claro.
não altere o código apenas crie um novo logo abaixo dele com o nome #Label1 h2

#Label1 h2{background-repeat: no-repeat; 
background-position: right top; 
background-image: url( Endereço da imagem );}    

e personalize como quiser da mesma maneira que mostramos acima. mas #Label só serve para o gadget MARCADORES vocês deveram achar cada nome de gadget 

                                                                 ~Kissu~

terça-feira, 6 de novembro de 2012

Menu rolante no topo do blog


Oie  paçoquitas hoje vou ensinar a fazer o menu do blog ;)
vamos começar !
Primeiro faça o upload do seu template ;)

01- estilos css:

abra o design do blog > modelo > Editar Html > Prosseguir.
Não precisa clicar em expandir modelo.
Aperte CTRL+F e procure pela tag :
]]></b:sckin>
e cole ACIMA dela o seguinte código:
/* NavTop Menu
----------------------- */
#navtop { /*--container geral do menu--*/
border-bottom:1px solid #666; /*--Edite cor da borda--*/
background:#fff; /*--Edite cor de fundo--*/
padding:0px 20px;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
}
#navtop li {
float: left;
display: block;
padding:5px;
}
#navtop li a, #navtop li a:link, #navtop li a:visited { /*--links do menu--*/
float: left;
display: block;
padding: 5px;
text-transform: none;
text-decoration:none;
background: #ccc; /*--Edite cor de fundo dos links--*/
color:#000; /*--Edite cor dos links--*/
border:1px solid #666; /*--Edite cor de borda--*/
font-size:12px; /*--Edite tamanho da fonte--*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#navtop li a:hover { /*--links no estado hover--*/
background: #000; /*--Edite cor de fundo dos links--*/
color:#fff; /*--Edite cor dos links--*/
text-decoration:none;
}

#navtop li ul {
display: none;
}                                                  

Edite as cores que estão em Vermelho! de acordo com seu gosto!

2- inserir o código HTML:

agora inserindo o código Html para que fique visível no topo do blog, 
Procure por <body>
e cole ABAIXO dele o seguinte código: 
<div id='navtop'>
<li><a href='SEU-LINK-AQUI' title='#'>Link 1</a></li>

<li><a href='SEU-LINK-AQUI' title='#'>Link 2</a></li>

<li><a href='SEU-LINK-AQUI' title='#'>Link 3</a></li>

<li><a href='SEU-LINK-AQUI' title='#'>Link 4</a></li>

<li><a href='SEU-LINK-AQUI' title='#'>Link 5</a></li>

<li><a href='SEU-LINK-AQUI' title='#'>Link 6</a></li>

</div>
Insira seus Links nos locais em VERMELHO.
Obs : se estiver usando designer de modelo do blog cole o código HTML
 ACIMA da tag <header> 

Visualize e se estiver tudo certo salve.
kissu~

domingo, 4 de novembro de 2012

afiliados com nome do lado do gifs.


Oi seduzentes trouxe para vocês um tutorial " Afiliados com nome do lado do gifs"
vamos começar ?!
Design>> Layout>> adicionar gadget>>TEXTO
 deixa essa pagina aberta agora e clique em nova postagem com o botão direito>abrir em uma nova ABA.
agora cole o Endereço do blog afiliado e altere o nome feito isso deixe aberto e na página que você deixou aberto antes você vai colar a Imagem de gif que você quiser, Lembrando que é colar imagem e não url da imagem.
depois de ter colocado o gif de preferencia. vai na aba do endereço do blog que você alterou o nome e copie o nome alterado, e cole do lado do gif, 
Salve visualize! 
Kissu
Lembrando não quero créditos mas comentem ;)

Como colocar Elite De afiliados com imagens


                          Olá Docinhos de amora ;)
Vou colocar um tutorial super Simples pra vocês "como por elite de afiliados com imagens 
Vamos começar : EXEMPLO

Você vai abrir seu blog e vai em :
-Design >> layout >>Adicionar um gadget >> HTML/JavaScript
Lembre-se de colocar o TITULO >>AFILIADOS<< 
Feito assim coloque o seguinte código:

<a href="Endereço-do-blog"><img src="URL-da-Imagem" title="Titulo-do-blog" target="blank" /></a>

Edição :
01-Aonde está ENDEREÇO-DO-BLOG você vai colocar o endereço do blog afiliado
02-Aonde está URL-DA-IMAGEM você vai colocar o url da imagem que deseja. (sugiro imagens de 50x50 ou 250x35)
03-Aonde está TITULO-DO-BLOG você vai colocar o titulo do blog afiliado.
                                                       Feito isso é só salvar e visualizar !
OBS: caso queira mas fotos é só repetir o código não editado !


Alterando os gadgets


Mas um tutorial para vocês meus docinhos Açucarados 
Vá Em layout > Adicionar HTML/JavaScript e cole o seguinte código :

<style>
/**PERSONALIZAÇÃO DA SIDEBAR**/
.sidebar .widget {
  width:100% !important; 
     background:#fff;   
    margin:30px 0 !important;
       border-top:5px #0000FF solid;
       border-radius:0 0 10px 10px;
    padding:10px;
            box-shadow: inset 0 0 50px #eee, 0 0 3px #ccc; 
overflow:hidden
}
.sidebar .widget h2 {
    font: normal 21px Arial Font ;
     text-shadow: 1px 0px 10px #FFFFFF;
   color: #0000FF ;
       background: url(Image url) no-repeat center; 
height: 35px;
width: 225px;
     text-align: center; /*Alinhamento do texto*/
   margin-top:-10px /** MARGIN **/;
    margin-left:-10px /** MARGIN **/;
    margin-bottom:5px /** MARGIN **/;
padding:5px;
width:150%;
overflow:hidden
}
/** FIM DA SIDEBAR**/
</style>

Nas parte de azul (****) Personalize como quiser...
                               Exemplo do Gadget personalizado:
                                   
SALVE E PRONTINHO!