Little Wonders: tutorial

Tutorial: Editar imagem para postar

edição 08:00

Share |

Tutorial | Data personalizada

blogger 10:00

Share |

Tutorial | Blockquote personalizado

blockquote 10:00

Share |

Tutorial | Rodapé Personalizado

blogs 10:00

Já mostrei para vocês alguns dos tutoriais que usei aqui no blog(veja aqui),mas sei que é sempre melhor mostrar passo a passo do que só deixar o link,já que às vezes a gente se perde ou não entende o que vai aonde e não consegue fazer o tutorial.

Hoje,eu vou ensinar como fazer o rodapé igual aqui do blog,eu peguei o tutorial da Sugoi Tutoriais,mas modifiquei algumas coisas para ficar mais fácil de fazer e usar,então vamos lá.

Vá em Modelo>Editar HTML

Quando entrar,você vai ver a tag <head> ACIMA dela cole

Essa é a fonte que vamos usar no tutorial,mas você também pode usar a Open Sans Condense,que é assim

É só colar isso no lugar da fonte anterior

Depois disso aperte nos três pontinhos entre os skin e aperte Ctrl F

Procure por </b:skin> e acima disso cole o código abaixo,fazendo a modificações necessárias.

#rodape {

background: #7B68EE;

height: 120px;

padding-top: 10px;

text-align: center;

font-size: 20px;

font-family: 'Pacifico';

letter-spacing: 1px;

}

#rodape a {

text-align:left;

text-decoration: none;

color: #F0FFFF;

padding: 1px;

margin: 10px;

-webkit-transition-duration: 0.8s;

}

#rodape a:hover {

color: #F0FFFF;

background: #7B68EE;

padding: 1px;

-webkit-transition-duration: 1.0s;

}

Em background você muda a cor de fundo,em height você muda a altura do rodapé,em font-family você muda a fonte.
Em color você muda a cor da fonte.
Em a:hover é quando você clica em alguma parte do rodapé.
Se precisar use ESSA TABELA DE CORES
Para que o rodapé funcione você precisa colocá-lo no blog,entãoANTES de </body> cole isso

</div>

<b> Tecnologia do </b>

<a href='http://www.blogger.com/'>Blogger</a>

<br/>

</div>

Em ALING='left' você vai decidir de que lado vai ficar seu logotipo,se não quiser colocar um é só apagar a parte <img ALIGN='left' height='120px' src='seu-logo-aqui'/>
Edite apenas a parte indicada.
E depois SALVE
Se você não havia editado seu rodapé ainda é quase certo que ainda tem o Tecnologia do Blogger no seu rodapé,como esse

Para retirá-lo é muito simples,vá em Ir para um widget>Attribution 1(ou qualquer nome que comece com Attribution)

Quando você clicar será redirecionado à parte do rodapé do seu blog,na parte locked='true' e mude para locked='false' e SALVE

Agora vá em Layout>Footer Atribuição>Editar>Clique em Excluir.

E pronto,seu novo rodapé já está instalado no blog :D
Apesar de parecer ter vários passos,esse tutorial é bem simples e funciona em qualquer blog.Espero que tenham gostado e testem.
Beijos

Share |

Tutoriais que usei no blog #2

blog 10:00

Essa é a segunda parte de personalização do blog,vamos primeiro mudar algumas coisas na parte de Layout e aí partiremos para o HTML :)

**ESSA É A SEGUNDA PARTE DOS TUTORIAIS QUE USEI NO BLOG,SE VOCÊ AINDA NÃO VIU A PRIMEIRA PARTE,CLIQUE AQUI**

Vá em Layout e vamos descobrir mais sobre o blog :)

Em Favicon você muda o símbolozinho do Blogger que aparece nessa parte de cima,é só colocar em Editar e Salvar o que você preferir,se precisar de sugestões aqui tem algumas

Agora,você precisa desabilitar a Navbar é que aquela aba de pesquisa e algumas funções do Blogger,é muito limitada e não ajuda em nada kkkk então vamos tirar

Vá em Editar>Desativado e Salve

Na parte do Cabeçalho você pode colocar uma imagem feita por você,é só colocar em Imagem>Do seu computador e Em vez de título e descrição

Espere carregar e salve(a imagem usada no cabeçalho deve ter em torno de 1000x315 se você usar a medida que eu usei na primeira parte)

Também recomendo retirar a parte do Perfil,é só clicar nela e excluir,porque vamos usar outro tutorial para ela.

Sem mais delongas,vamos a parte do HTML :D

Clique em Modelo>Editar HTML

Você vai encontrar algo assim

Para começar a editar você precisa ter a noção geral de cada parte do seu blog,por isso,clique nesses três pontinhos entre os skin e você vai ver tudo que precisa :)

Para o seu blog ser 100% exclusivo você pode alterar a parte indicada abaixo

Dê um nome,escreva o seu como Designer e coloque a URL do seu blog.

Agora,já que você está aqui,vamos facilitar a sua vida,para achar todos os tópicos que eu vou mostrar aqui é só apertar Ctrl F no seu teclado e irá surgir uma caixa de pesquisa,nela você vai digitar tudo que eu mostrar e vai achar bem mais fácil do que indo linha por linha.

Para começar procure por .content-inner

É lá que vamos tirar aquela cor preta que havia ficado no layout

Troque o $ por transparent e salve,assim você verá que preto da área de postagem sumiu.

Agora,para tirar a parte preta dos gadgets é só ir em .main-inner .fauxcolumn-right-outer .fauxcolumn-inner { e mudar o $ por transparent também.

Depois disso feito você pode começar com os tutoriais mais simples.

Área de Postagens

Para arrumar a área de postagem e deixá-la separada dos gadgets você vai em .main-inner .column-center-outer {

E vai trocar tudo isso .main-inner .column-center-outer {

background: $(post.background.color) $(post.background.url) repeat scroll top left;

_background-image: none;

}

Por isso

.post-outer {

margin: 5px 10px 15px;

background:#fff;

padding: 10px 10px;

}

E sua área de postagem vai estar assim

Agora vamos à área da sidebar,onde ficam os gadgets

Primeiro vá em /* Widgets

----------------------------------------------- */

.sidebar .widget {

border-bottom: 2px solid $(widget.border.bevel.color);

padding-bottom: 10px;

margin: 10px 0;

E abaixo disso cole

background: #fff;

Por último vá em /* Headings,de h2 {

font: $(widget.title.font);

color: $(widget.title.text.color);

}

Troque por

.sidebar h2 {
	border-bottom: 1px solid #FFC0CB;
	text-align: center;
	font-size: 21px;
	color: #B03060;
	padding-bottom: 10px;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 8px;
	font-weight: normal;
	font-family: 'Arial', sans-serif;
	}

Depois salve,agora a parte dos gadgets vai estar assim

Para personalizar a parte do Título das Postagens vá em /* Post

E substitua os três primeiros h3.post-title por

/* Posts
----------------------------------------------- */
h3.post-title {
margin-top: 20px; /* espaço entre o título e a margem */
text-align: center; /* posicionamento do título */
border-bottom: 3px dotted #eee; /* cor, tamanho e tipo de borda */
background: #F9F9F9; /* cor do background do título */
}
h3.post-title a {
font-family: Trebuchet MS; /* fonte do título */
font-size: 26px; /* tamanho da fonte */
color: #E9B2C1; /* cor do título em estado normal */
}
h3.post-title a:hover {
color: #CBDCE9; /* cor do título em estado hover */
text-decoration: none; /* isso tira a borda do título quando o mouse parar sobre ele */
}

E Salve,vai ficar assim

Esses são os tutoriais principais,agora,para personalizar ainda mais vou deixar a lista dos outros tutoriais que vocês podem precisar e são simples :)

-Data personalizada por Renata Massa

-Comentários personalizados por Cherry Bomb

-Blockquote personalizado por Cherry Bomb

-Arquivo do blog em forma de calendário por Follow Your Dreams

-Perfil da autora arredondado com descrição e redes sociais por Follow Your Dreams

-Personalizar Início,Anterior e Próxima por Mundo Fantástico Feminino

-Menu fixo no topo do blog por Coisas de Blogueiro

-Menu fixo com imagens e caixa de pesquisa por Renata Massa

-Menu com abas(submenus) por Renata Massa

-Caixa de pesquisa por Go Imagine

-Marcadores personalizados divididos em duas colunas

-Rodapé personalizado por Sugoi Tutoriais

Esses são os tutoriais que eu usei no meu blog,alguns extras para vocês,porque fui testando um e outro e vendo qual ficava melhor,espero que tenham gostado e que usem :D

Qualquer dúvida ou pedido de tutorial é só falar,vou tentar fazer um tema bem básico para disponibilizar para vocês,mas isso vem em breve :)

Beijos

Share |

Tutorial: Editar imagem para postar

Tutorial | Data personalizada

Tutorial | Blockquote personalizado

Tutorial | Rodapé Personalizado

Tutoriais que usei no blog #2

A AUTORA

REDES SOCIAIS

AVISO AOS NAVEGANTES

CATEGORIAS

POSTAGENS RECENTES

ARQUIVO

Wonders

Visitas

Agregador de links

Pesquise aqui

PARCEIROS