quinta-feira, 17 de julho de 2014

Espaço do Rodapé

Créditos do tutorial para o blog On The Fame .





O código só foi testado no modelo Travel.
1 - Vá em Design > Editar HTML > Ctrl + F e pesquise por :
.footer-inner {

Você deve ter achado algo parecido com isso :
background: transparent $(footer.background.gradient) repeat scroll top center;

2 - Substitua todo este trecho pelo seguinte código :
margin: -40px;

3 - Entendo esse código :  O número 40 define o tamanho do espaço, quanto maior o número, mais o espaço é retirado. Quanto menor o número, mais o espaço é adicionado.

quarta-feira, 16 de julho de 2014

Rodapé personalizados

Rodapé do blog personalizado


Dias atrás eu fiz uma perguntinha na fanpage do blog sobre o que vocês gostariam de ver por aqui. Então aqui estou eu para atender o pedido do Luiz Antico , que é como fazer o rodapé de créditos igual ao que eu uso aqui no blog.
Vamos aprender então?

No HTML do seu blog procure por:
: ]]></b:skin>

Cole ANTES dele o código abaixo:
#rodape-creditos {
font:normal bold 13px Arial;   /* - Fonte do rodapé - */
color:#FFFFFF;   /* - Cor da fonte - */
background:#303030;   /* - Cor de Fundo do Rodapé - */
border-top:4px solid #3F4C6B;     /* - Edite a borda - */ Retire essa linha se não quiser borda
margin:0px 0px 0px;     /* - Não é necessário editar - */
}
#rodape-creditos a:link {
color:#A8B5C4;   /* - Cor dos Links do Rodapé - */
text-decoration:none;  /* - Decorações do Link - */
outline:0px solid #FFFFFF;  /* - Não é necessário editar - */
}
#rodape-creditos a:visited {
color:#A8B5C4;    /* - Cor dos Links Visitados - */
text-decoration:none;   /* - Decoração dos Links Visitados - */
outline:0px solid #FFFFFF;   /* - Não é necessário edittar - */
}
#rodape-creditos a:hover {
color:#A8B5C4;   /* - Cor do Link com o Mouse em cima - */
text-decoration:underline;    /* - Decoração do Link com o mouse em cima - */
outline:0px solid #FFFFFF;    /* - Não é necessário edittar - */
}
Agora procure por:
 </body>

ANTES dele cole:

<div id='rodape-creditos'>
<table border='0' cellpadding='5' cellspacing='0' oncontextmenu='return false' ondragstart='return false' width='100%'>
<tr>
<td style='width:72%;text-align:left;'>&#169; <a href='LINK DO BLOG'>NOME DO BLOG</a> - 2012. Todos os direitos reservados.<br/>Criado por: <a href='URL DO AUTOR DO BLOG' rel='nofollow' target='_blank'>NOME DO AUTOR DO BLOG</a>.<br/>Tecnologia do <a href='http://www.blogger.com' target='_blank'>Blogger</a>.</td>
<td style='width:28%;text-align:center;'><a href='LINK DO BLOG'><img alt='imagem-logo' border='0' id='logo-footer' oncontextmenu='return false' ondragstart='return false' src='LINK DA LOGO DO BLOG'/></a><br/></td>
</tr>
</table>
</div>
Agora vamos personalizar mais um pouquinho. Como vocês devem ter percebido, eu destaquei algumas partes nos códigos. 
A seleção em azul corresponde ao fundo do rodapé, que pode ser uma cor ou uma imagem, como eu uso aqui no blog. Para usar uma imagem substitua a linha selecionada por:
background: url(URL DA IMAGEM);
A seleção em amarelo é muito importante e não deve ser retirada. Isso evitará futuras punições do Google à você e ao seu blog.

Tirar espaço entre postagem e cabeçalho

Primeiramente:
Aperte Ctrl+F > Pesquise por /* Tabs > apague margin: 1em 0 0;


 Ctrl+F > Pesquise por /* Main > adicione margin-top: -10px; 
Vá aumentando o número, visualize antes de salvar, e se tiver descido, diminua o número, e se diminuir para -5 e não estiver bom, tire o -

quarta-feira, 9 de julho de 2014

Como colocar imagem no rodapé do blog.

 a largura de 1040px então faço as imagens com a largura de 1020px.

Fiz um mini tutorial por imagem para os mais iniciantes de como fazer a imagem do rodapé, só não reparem é bem meia boca rsrs. Clique nos links abaixo para ver as imagens.
Obs: Na imagem tutorial eu disse para fazer a imagem com a largura 20px menor que a largura do blog, mas se você quiser tente primeiro fazer a imagem com a largura do seu blog mesmo e se não der certo faça 20px menor.
Logo após fazer sua imagem, salve e hospede em algum local.

Sem mais delongas, vamos pro tutorial:

Vá em Design > Editar HTML, e marque a opção "expandir modelos de widgets" . Pressione Ctrl + F e procure por  <!-- main -->   Logo ACIMA adicione o seguinte código:
<center> <img height='altura' src='Url da sua imagem' width='largura'/> </center> 
Onde estiver "altura" troque pela medida de altura da sua imagem, a minha é 100 e acho que é um bom tamanho se você estiver indeciso.
Troque também "Url da sua imagem" pela url (link) da sua imagem. Meio obvio né? rsrs
E onde estiver "largura" substitua pela medida de largura da sua imagem.