Big Post...Com big Tutoriais!

            963405519bjolipnr_77271_ad76c2efbd_large
Oi,então hoje trouxe um Big Post...com  Big Tutoriais! Meus queridinhos amores,Esse post vai demorar(rsrs)Bom sem enrolação,vamos lá?
Bom o primeiro Tuto é sobre como personalizar a post-footer do blog..
-Ãm?Oque é Post-Footer?
-É a área em que fica o autor,os coment's e tal,não sei se dá para modificar quando a post-footer está em cima!


é esta parte aii!...Querem saber?Continue lendo =)



                    Primeiro,vá em seu design--> Html-->Tecle ctrl+f e procure por:.post-footer {
Logo á pós fazer isso,apague-o com toda a tag...e cole isso:

                                                    .post-footer {
border-top:1px dashed #666666;
background: #fff9fc;
color:#000000;
font-size: 12px;
letter-spacing:1px;
margin:0.73em 0;
padding:5px 8px;
text-transform:none;
}

Depois que vocês fizerem isso...personalizem da forma que quiserem eu recomendo a tabela de cores aqui!
Mas se quiserem personalizar no modelo...fiquem a vontade!

Nesse 2°Tuto vou ensinar vocês á..fazer um menu Divo(minha opnião)u.u,fuii!
O menu é esse:
                                                       Bom,primeiro vocês vão em design..editar html,e então procure por: ]]></b:skin>
E cole esse códico...abaixo da tag:
/*** MENU CUTE extras-placefame.tk ***/
#menucute {
background: #FFE8F3;
border-left: 3px solid #FF99CC;
color: #666666;
font-family: tahoma;
font-size: 11px;
text-align : left;
padding-bottom : 2px;
padding-left : 5px;
margin-bottom: 3px;
}

#menucute:hover {
background: #DDF7F7;
border-right: 3px solid #33CCCC;
border-left: 3px solid #DDF7F7;
color: #B5B5B5;
font-family: tahoma;
font-size: 11px;
text-align : right;
padding-bottom : 2px;
padding-right : 5px;
margin-bottom: 3px;
} 

Se quiser modificar as cores:  Tabela de coresaqui...
Agora para colocar no blog,vá no design add gadjet,Html..javascript e cole..
<div id="menucute">
<a href="LINK_AQUI" title="DESCRIÇÃO_AO_PASSAR_O_MOUSE">NOME</a>- Descrição do link.</div>
<div id="menucute">
<a href="LINK_AQUI" title="DESCRIÇÃO_AO_PASSAR_O_MOUSE">NOME</a> - Descrição do link.</div>
<div id="menucute">
<a href="LINK_AQUI" title="DESCRIÇÃO_AO_PASSAR_O_MOUSE">NOME</a> - Descrição do link.</div>
<div id="menucute">
<a href="LINK_AQUI" title="DESCRIÇÃO_AO_PASSAR_O_MOUSE">NOME</a> - Descrição do link.</div>
Personalizando..da forma certa!


Beijinhos,e vamos para  próximo tuto:

Créditos:Place Fame-Place Fame



TUTORIAL EXCLUSIVO MEU!
Bom,vou ensinar vocês que são autores de algum blog..esse tuto é eu que estou fazendo,mais quem me falou sobre essa ideia foi a Gisely do blog Nois Conectados!
Bom é bem simples,quando seu amigo(a) está fazendo um post,vc vai em editar posts e vai está lá o post que ele ta fazendo..ai você pega clica em visualizar e você vê o post..em tempo real ela fazendo...gostaram?
Bom,primeiro procurem por ]]></b:skin>
Agora ACIMA dela cole o código abaixo:
.post-body a:link {
color:#58CEB5;
text-decoration:none; }

.post-body a:hover {
background-color:#58CEB5;
color:#FFFFFF; text-decoration:none; 

onde está destacado  com a cor salmão é a cor do link normal, já aonde está de verde é a cor do fundo quando se passa o mouse em cima. E também na cor azul, é a cor do link no estado hover (mouse acima).
Fácil não é ? Bom eu aprendi no blog divo: Place Fame,por isso todos os créditos ao Place Fame...


Ir ao topo..com efeito deslizante:
Proucure pela tag </body> e antes dela, insira:
<script type="text/javascript">
    $(document).ready(function() {
       $('#subir').click(function(){
          $('html, body').animate({scrollTop:0}, 'slow');
      return false;
         });
     });
</script>
Agora, procure por </head> e como anteriormente, ANTES dessa tag insira:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Agora, insira o código do efeito deslizante aonde quiser.
<a href="#" id="subir"><img src="URL_DA_IMAGEM"/></a> 
Caso queira um texto no lugar da imagem, substitua o código em vermelho pelo texto desejado.
Novamente créditos ao Place Fame..                                                                                                                                       

Um comentário:

Gisely Garcia disse...

Bem legais os tutos ;)
bjos