tutorial

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é 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;'>© <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.

Parte 1 Parte 2

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  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.

domingo, 2 de março de 2014

data personalizada

1. No HTML aperte F3 e procure por .main-inner h2.date-header {
Logo abaixo, estará escrito assim:

font: $(date.font);
color: $(date.text.color);
}

Estão, substitua todo o código acima, por esse:

/* Personalizado by Farry Teen */
border-radius:10px 10px 0 0;
font: normal normal 12px tahoma; /* font */
text-transform:uppercase;
color: #000; /* cor da fonte */
background: #87CEFA; /* cor do fundo da caixa */
width: auto;
text-align: right; /* alinhamento do texto */
padding:5px; /* Tamanho da caixa */
float: right; /* Alinhamento da caixa */
right: 5px; /
margin-top:-25px; /* altura da caixa */
}

Visualize, e se a data estiver certinha, salve. Agora, personalizaremos as tags.

2. Ainda no HTML, aperte F3 e procure por ]]></b:skin> e logo acima, cole:

/* Personalização by farryteen.blogspot.com */
.post-labels {
border-radius:0 0 10px 10px;
font-size:14px; /* tamanho da fonte */
color: transparent;
background: #FFB5C5; /* cor do fundo da caixa */
width: auto;
text-align: center; /* alinhamento do texto */
font-size: 16px; /* tamanho da fonte */
padding: 3px 8px 3px 1px;
float: left; /* alinhamento da caixa */
left: -10px;
margin-top:15px; /* altura da caixa */
}

Separar area da postagem e sedebar

O tutorial de hoje é como separar as postagens e a barra lateral, vai ficar assim como esta na foto.

Então vamos lá, na nova plataforma do blog, vá em Layout, HTML, e Ctrl F e procure por:

.main-inner .column-center-outer {

Ao encontrar, apague toda essa área.

Apagou? Agora no lugar dela você vai colocar esse código:

.post-outer {background: #fff; /* Fundo da postagem */padding-top: 4px; /* Espaço do topo */padding-left: 5px; /* Espaço da esquerda */padding-right: 5px; /* Espaço da direita */margin: 5px 3px 25px; }

Visualize e prontinho.

Personalize a footer das postagens facilmente

Vá em design -> Editar html -> Dê um CTRL + F e procure por: .post-footer {

Quando encontrar substitua todo o código que vem junto com ele e acrescente esse:

.post-footer {

margin: .5em 0;

line-height: 1.6;

background-color: #FFE4E1;

border-top: 1px dashed #696969;

font-weight: bold;

}

Topo Sidebar

Barrinha no topo do blog e separar a sidebar II

Oi oi gente! No tutorial de hoje vamos aprender como colocar essa barrinha no topo do blog, havia algumas leitoras pedindo, e aqui estou eu. Eu acho que vocês vão gostar, pois é bem fácil e faz uma grande diferença no layout *-*

1- Vá até Design, Editar HTML, aperte CTRL+F e procure por: body {

2- Logo abaixo, acrescente: border-top: 9px solid #FFC0CB;

Personalização:

9px - Grossura da barra

#FFC0CB - Cor da barra, se quiser outros tipos, acesse essa tabela.

http://viverserfeliz-renata.blogspot.com.br/2012/01/barinha-no-topo-do-blog.html

--------------------------------------------------------------------------------------------------------------------------------------------------------------

Heeey meus amores, quanto tempo sem tutorial hein? Hoje trago um que está virando sensação na maioria dos blogs, são os gadgets divididos em uma coluna larga e transparente. Quem vê pensa ser super complicado, mas na prática é bem fácil, e não é necessário mexer com muitos códigos, vamos aprender?

Primeiramente vá em Design -> Designer do modelo -> Avançado -> Plano de fundo da barra lateral e selecione a opção de "Transparente". Salve e vá para "Editar html".

Lá dê um Ctrl + F e procure por: /* Widgets, antes de fechar a chavinha, acrescente:

background-color: #CORHTML;

No lugar de #CORHTL, escolha a cor que preferir usando essa tabela. Como podem perceber, é super simples e não exige nenhum conhecimento profissional em HTML, espero que tenham gostado :D

Como ficará:

nuvens nas postagens

Colocando as nuvenzinhas sem HTML:

É só você fazer um cabeçalho, saber a largura da área de posts e da sidebar do seu blog, depois subtrair os valores de largura total do blog, com o valor total da sidebar. Como por exemplo, se o seu blog for da largura de 1020 e a sidebar 300, a largura da área de posts do seu blog será 720 de largura,então será nesse espaço que você fará as nuvens.

Fiz 2 bases de cabeçalhos editáveis, ambos com as nuvenzinhas. Eu não coloquei os créditos ali porque eu sei que fica atrapalhando e tal, então peço para quem salvar, colocar os créditos do cabeçalho na página de créditos ok!

Para salvar no tamanha original, é só clicar encima na imagem e salve:

(largura total: 1100, altura: 304. largura da área de post 796)

(largura total: 1100- Altura: 300-Largura da área de post: 800)

Vamos conferir como colocar com o HTML! É só clicar em ''leia mais''!

Colocando as nuvenzinhas com o HMTL:

Vá em Desing - Editar HTML- De Ctrl + F, aí aparecerá uma caixinha de busca, então digite nela o seguinte código:

.main-inner .column-center-outer {

Se você nunca editou seu essa parte do HMTL, aparecerá mais ou menos assim:

.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}

Então,apegue a linha _background-image: none; , no lugar coloque o seguinte código:

background-image: url(url da imagem);
background-position: center top;
background-repeat:no-repeat;

Obs: Se você quiser que a imagem fique no footer da área da postagem troque top por bottom.

Então, como eu disso no começo do post, a imagem para ser colocada ali deve ser exatamente da largura da área de posts '' se o seu blog for da largura de 1020 e a sidebar 300, a largura da área de posts do seu blog será 720 de largura''.Depois de pronta a imagem, é só por o url dela no local do código onde se pede.

Repetir a data nos posts do mesmo dia

Por padrão, o Blogger não mostra a data em todos os posts escritos em um mesmo dia, deixando a informação visível apenas no último publicado. Para contornar este problema, vá em Editar HTML e clique em Expandir Modelo de Widget. Procure por:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

E substitua tudo por:

<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>

Caixa de Busca

sidebar

Para colocá-los basta ir ao esquema e adicionar um novo "html/javascript"

<style>

/*Títulos dos gadgets personalizados by Cat Girl*/

.sidebar h2 {

font-family: trebuchet ms; /* Fonte */

font-style: normal; /* Estilo da fonte, pode mudar para italic */

font-size: 14px; /* Tamanho da fonte */

text-align: left; /* Alinhamento do texto pode mudar para center ou right */

color: #FFFFFF; /*Cor da fonte*/

background: #FF69B4; /* Cor do fundo */

padding-left: 12px;

margin-bottom: 5px;

-webkit-border-top-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

-moz-border-radius-topleft: 10px;

-moz-border-radius-bottomright: 10px;

border-top-left-radius: 10px;

border-bottom-right-radius: 10px;

/*Fim dos títulos dos gadgets personalizados, não retire créditos*/

}

</style>

<style>

/*Títulos dos gadgets personalizados by Cat Girl*/

.sidebar h2 {

font-family: arial; /* Fonte */

font-style: italic; /* Estilo da fonte, pode mudar para normal */

font-size: 14px; /* Tamanho da fonte */

text-align: center; /* Alinhamento do texto, pode mudar para left ou right */

color: #FFFFFF; /*Cor da fonte*/

background: #FF69B4; /* Cor do fundo */

padding-left: 12px;

margin-bottom: 5px;

-webkit-border-radius: 100px;

-moz-border-radius: 100px;

border-radius100px;

/*Fim dos títulos dos gadgets personalizados, não retire créditos*/

}

</style>

<style>

/*Títulos dos gadgets personalizados by Cat Girl*/

.sidebar h2 {

font-family: verdana; /* Fonte */

font-style: normal; /* Estilo da fonte, pode mudar para italic */

font-size: 14px; /* Tamanho da fonte */

text-align: left; /* Alinhamento do texto pode mudar para center ou right */

color: #FFFFFF; /*Cor da fonte*/

background: #FF69B4; /* Cor do fundo */

padding-left: 12px;

margin-bottom: 5px;

-webkit-border-bottom-right-radius: 50px;

-moz-border-radius-bottomright: 50px;

border-bottom-right-radius: 50px;

/*Fim dos títulos dos gadgets personalizados, não retire créditos*/

}

</style>

<style>

/*Títulos dos gadgets personalizados by Cat Girl*/

.sidebar h2 {

font-family: trebuchet ms; /* Fonte */

font-style: normal; /* Estilo da fonte, pode mudar para italic */

font-size: 14px; /* Tamanho da fonte */

text-align: center; /* Alinhamento do texto pode mudar para left ou right*/

color: #FFFFFF; /*Cor da fonte*/

background: #FF69B4; /* Cor do fundo */

padding-left: 12px;

margin-bottom: 5px;

-webkit-border-top-left-radius: 20px;

-webkit-border-top-right-radius: 20px;

-moz-border-radius-topleft: 20px;

-moz-border-radius-topright: 20px;

border-top-left-radius: 20px;

border-top-right-radius: 20px;

/*Fim dos títulos dos gadgets personalizados, não retire créditos*/

}

</style>

Data Pers

.main-inner h2.date-header {

font: $(date.font);

color: $(date.text.color);

}

Apaga esse código e substitui pela data que mais gostares :)

1 - Data simples ( só muda a cor do fundo quando passa o mouse )

.main-inner h2.date-header {

/* Data personalizada by Cat Girl */

font: arial; /* Fonte da Data */

color: #FFFAFA; /* Cor da Fonte */

margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */

background: #00BFFF; /* Fundo da data */

float: left; /* Se você mudou acima para right , mude aqui também */

font-size: 11px; /* Tamanho da Fonte */

padding: 4px;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

}

.main-inner h2.date-header:hover {

background: #C1CDCD; /* Fundo quando o passa o mouse */

/* Fim da data personalizada by Cat Girl, não retire créditos */

}

2 - Data "folhinha"

.main-inner h2.date-header {

/* Data personalizada by Cat Girl */

font: arial; /* Fonte da Data */

color: #000000; /* Cor da Fonte */

margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */

background: #FFFFFF; /* Fundo da data */

float: left; /* Se você mudou acima para right , mude aqui também */

font-size: 11px; /* Tamanho da Fonte */

padding: 4px;

-webkit-border-top-right-radius: 20px;

-webkit-border-bottom-left-radius: 20px;

-moz-border-radius-topright: 20px;

-moz-border-radius-bottomleft: 20px;

border-top-right-radius: 20px;

border-bottom-left-radius: 20px;

}

.main-inner h2.date-header:hover {

background: #FFC0CB; /* Fundo quando o passa o mouse */

-webkit-border-top-left-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-topleft: 20px;

-moz-border-radius-bottomright: 20px;

border-top-left-radius: 20px;

border-bottom-right-radius: 20px;

/* Fim da data personalizada by Cat Girl, não retire créditos */

}

3 - Data redondinha

.main-inner h2.date-header {

/* Data personalizada by Cat Girl */

font: arial; /* Fonte da Data */

color: #00BFFF; /* Cor da Fonte */

margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */

background: #FFFFFF; /* Fundo da data */

float: left; /* Se você mudou acima para right , mude aqui também */

font-size: 11px; /* Tamanho da Fonte */

padding: 4px;

-webkit-border-top-left-radius: 100px;

-webkit-border-bottom-left-radius: 100px;

-moz-border-radius-topleft: 100px;

-moz-border-radius-bottomleft: 100px;

border-top-left-radius: 100px;

border-bottom-left-radius: 100px;

}

.main-inner h2.date-header:hover {

background: #000000; /* Fundo quando o passa o mouse */

-webkit-border-top-right-radius: 100px;

-webkit-border-bottom-right-radius: 100px;

-moz-border-radius-topright: 100px;

-moz-border-radius-bottomright: 100px;

border-top-right-radius: 100px;

border-bottom-right-radius: 100px;

/* Fim da data personalizada by Cat Girl, não retire créditos */

}

Personaliza as cores com *esta* tabela

Beijinhos, usem e abusem das minhas datas !