tutorial

domingo, 2 de março de 2014

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 !