Bomba de tutoriais

Olá gente! Hoje eu vou postar vários tutorias, alguns por conta de pedidos e outros porque eu quero postar mesmo. Eles está separados nas categorias "fácil" que são coisinhas bem simples  e "difícil" que não chega a ser difícil, só um pouco mais complicado que os fáceis.

Obs: todos esses tutoriais eu farei com base na interface antiga do blog, se você quiser tentar acompanhar pela nova é só clicar em "Experimente a interface atualizada do blogger" no seu painel. Se quiser voltar para a antiga é só clicar em "voltar".

Na parte de configurações do blog é onde se configura quase tudo que não seja o design e os posts como a URL e nome do blog. Mas nessa parte nós vamos aprender a fazer algumas alterações na parte de comentários então vá lá na aba "comentários". Eu não vou falar de todos os itens pois alguns são alto-explicativos e outros eu realmente não sei para o que serve,

Na 3ª parte Posição do formulário de comentários se vc selecionar :

Página inteira - serão mostrados apenas os comentários (e a parte alguem escrever o comentários) do seu post em uma nova página/guia

Janela pop-up - eles apareceram em uma nova janela menorzinha como aqui no meu blog

Postagem abaixo incorporada - eles serão mostrados embaixo da postagem

Na parte "Mensagem do formulário de comentário" você pode escrever algum recado para quem for postar o comentário que aparece em cima da parte de escrever

De baixo pra cima, na terceira parte, marque sim ou não se você quiser que quem for comentar tenha que digitar aquelas letras chatas para ver se não é spam.

Depois de alterar isso não esqueça de clicar em "salvar"

Agora vamos aprender a colocar páginas no blog, tipo vocês já devem ter percebido que aqui existem outas páginas como "parcerias" "selinhos" etc..

1. Vá em design >> adicionar gadget e adicione o de "páginas" (você pode deixa-las em baixo do cabeçalho ou na barra lateral)

2. Vá em postagem >> editar páginas e clique em "nova página" depois disso é só fazer como se fosse uma postagem normal

se você não quiser que uma página apareça no seu "menu" é só ir no gadget dela, procurar seu nome e desmarca-lo.

ahh gente agora só matando uma dúvida de muita gente: para seguir um blog não precisa ter um, precisa apenas ter uma conta do google, yahoo, ou twitter. Clicar em "seguir" ou "participar desse site " e fazer login

Primeiro vamos alterar a navbar, para quem não sabe o que é, é aquela barrinha que fica na parte superior do blog. Para mudar sua cor de forma rápida e simples você pode ir em design 

e o primeiro gedgat de cor azul é ela. Então você clica em "editar", escolhe uma cor e salva. Mas tem poucas opções de cores, se você quiser outra que não esteja lá, vá no seu HTML, de Ctrl F e procure por : 

]]></b:skin>

logo acima colo o seguinte código:

#navbar-iframe{background-color: #COR DA NAVBAR; float: bottom-page;}

substitua a parte destacada em rosa pelo código de alguma cor que voce pode encontrar aqui, mas atenção: use o segundo código, o que começa com o joguinho da velha (#).

se você quiser também, pode colocar uma imagem na Navbar substituindo o trecho "-color: #COR DA NAVBAR" por ": URL (url da imagem)" e depois trocando a parte em vermelho pela URL da sua imagem

ou então você pode ocultar (retirar) de vez sua navbar colocando logo acima do ]]></b:skin> o seguinte código:

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

Agora, graças ao tutorial do Menina Nerd vocês vão aprender a fazer uma sidebar de duas colunas juntas com cores diferentes igual a minha

Vá em design >> designer no modelo e clique em "layout"

Vá em "ajustar larguras"

clique em "aplicar ao blog"

Clique em "voltar para o blogger" e vá sem seu HTML, dê Ctrl+f e:

 se você escolheu as colunas do lado direito, procure por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

se você escolheu as colunas do lado esquerdo, procure por:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Vai aparecer assim:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

Substitua a parte destacada em vermelho por:

background: url("URL DA IMAGEM") repeat; 

agora é só substituir a parte em rosa pela URL da sua imagem. A Andreza fez uma imagem já com as medidas certinhas, então se você quiser, mude apenas a cor em algum programa de editor de imagem:

Depois é só visualizar, e se estiver tudo certinho, salve!

Agora vamos para o ultimo tutorial, que é colocar um fundo no título dos gadgets, para você não ter que criar uma nova imagem toda vez que adicionar um gadget novo

- vá em design >> editar HTML, de Ctrl F e procure por: 

]]></b:skin>

- antes dele cole o seguinte código:

.sidebar h2 {

text-align:center;

background-image: url("URL DA SUA IMAGEM") no-repeat;

width: 180px;

height: 30px; }

- troque o primeiro trecho em vermelho pela URL da sua imagem e ude os outros dois para regular o tamanho da imagem.

Obs: width é largura e height é altura

- clique em "salvar modelo" 

Ai gente o post acaba aqui, ufa! Não aguento mais escrever

xoxo'