Começar a modificar o blog

Vamos começar uma serie de postagens para blogueiros iniciantes, nós sabemos que ao criar o primeiro blog as pessoas têm vontade de mudar tudo do seu novo blog no primeiro dia, mas certamente isso não é possível afinal é preciso aprender a dar os primeiros passos antes de começar a correr. Já publicamos algumas coisas para iniciantes até criamos um marcador para isso em nosso guia rápido, aqui estão algumas delas:

Programas grátis para editar imagens
Onde e como hospedar imagens
Formatar o texto das postagens ou colunas (sidebar)
Criar ou modificar bordas

Mas como já dissemos é preciso começar por algum lugar, então vamos falar sobre trocar a cor de fundo do blog. Quando entrar no painel do blog clique em layout e depois em fontes e cores.


Normalmente nesta pagina basta procurar no menu por cor do plano de fundo da pagina, clicar nele e depois clicar na cor desejada e pronto. Você visualizará a mudança no seu blog que aparece na parte inferior da tela. Esse texto plano de fundo pode variar um pouco pode ser fundo da pagina ou background. Outra coisa se você não gostar das cores que aparece pode colocar o código de outra cor na caixa Editar código de cor hexadecimal, onde na imagem acima aparece ffffff, veja aqui o código hexadecimal das cores.

Se por acaso no seu blog não funcionar entre na janela editar html e procure por body{...} está logo no começo do código, veja se tem algo parecido com isso lá:

body {background-color: #0000FF;
...
...

Caso não tenha pode colocar se já tiver background mais alguma coisa altere para ficar igual o exemplo acima e a cor no final novamente usando código hexadecimal das cores você pode colocar a cor que desejar. Para colocar uma imagem de fundo use esse código:

body {background-color: #0000FF;
background-image: url(endereço da imagem)

Mesmo usando uma imagem é bom colocar a cor, assim caso haja algum problema e a imagem de fundo não aparecer o blog ficará com um fundo numa cor próxima da imagem. Veja mais detalhes sobre imagens de fundo.

Talvez alguns achem essa postagem simples demais, mas devemos lembrar aos mais experientes como foi difícil começar e quantas perguntas simples sofremos tanto para descobrir a resposta.

Compartilhe - Redes Sociais

Enviar por email

Dividir o rodapé do blog - Footer

Dividir o rodapé do blogspot (footer do blog) é mais fácil do que parece, basta trocar algumas linhas de códigos e pronto. Sugerimos que antes de começar entre na pagina layout e remova tudo que tiver no rodapé do blog, você não precisa excluir apenas arrasta para a coluna do blog ou embaixo das postagens, pois em poucos minutos vamos colocá-los no lugar novamente.


Mas para começar a divisão do footer em 3 partes o primeiro passo é entrar na pagina editar html (não clique para expandir o modelo), mas antes de começar é bom fazer um backup do blog para não perder nada no caso de imprevistos. Agora que não corremos mais o risco de estragar nada vamos começar.

Procure por esse trecho no html do seu blog (está quase no final):

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Quando achar apague, tome cuidado para não tirar ou deixar nenhum sinal no inicio ou fim do código e coloque esse no lugar:

<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-column-left' style='float:left; width: 32%;margin: 2px;'>
<b:section class='footer-column' id='footer2' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-center' style='float:left; width: 32%;margin: 2px'>
<b:section class='footer-column' id='footer3' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-right' style='float:right; width: 32%;'>
<b:section class='footer-column' id='footer4' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer-bottom'>
<b:section class='footer' id='footer-column-bottom' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div></div>
<div style='clear:both;'/>

E já está tudo pronto, agora é só entrar na pagina layout e arrastar os gadgets para cada uma das colunas do rodapé do seu blog e assim usar melhor o espaço disponível.

Se a parte do rodapé ficar sem cor de fundo podemos colocar esse código:

#footer-wrapper{background-color: #ffff66;border: 1px solid #0000FF}

junto com os outros estilos CSS do blog, isso fica no começo do html. É fácil de achar porque no blog tem muitos códigos parecidos com esse. Para trocar a cor é só mudar o final ffff66, veja aqui o código de outras cores. E as bordas você pode ver nosso tutorial sobre colocar e alterar bordas que tem explicações detalhadas.


Note que neste código que colocamos apareceu 3 vezes width: 32%; isso é a largura de cada uma das colunas no rodapé do blog, portanto altere os valores como desejar, mas claro que a soma das 3 chegar até 100% provalemente uma das colunas passará para linha debaixo, então se tiver esse problema é só reduzir um dos valores (sempre é bom deixar algum espaço sobrando).

Compartilhe - Redes Sociais

Enviar por email

Usar Feed como Acessórios

Já falamos sobre como usar os feeds em algumas postagens, mas faltou reunir varias informações num mesmo lugar, por exemplo: como mostrar quem linkou o blog ou mostrar os comentários recebidos recentemente no blog. Além disso, usar feed é uma ótima maneira de ter conteúdo sempre atualizado automaticamente no seu blog.

Para colocar qualquer feed no seu blog entre na pagina layout, adicionar gadget, feed. Vamos usar como exemplo o feed do nosso blog: http://www.dicasparablogs.com.br/feeds/posts/default

Agora coloque o endereço do feed do site que deseja usar e clique em continuar

Escolha as opções e salve, agora já está pronto.



Isso é a maneira mais fácil de mostrar uma lista das suas postagens mais recentes no blog, mas não é só isso, para mostrar os últimos comentários recebidos use esse endereço:
http://www.dicasparablogs.com.br/feeds/comments/default

O feed para mostrar quais os últimos links recebidos (backlinks) pelo seu blog é:
http://search.blogger.com/blogsearch?q=link:www.dicasparablogs.com.br

Lembramos que colocamos nosso endereço no feed, portanto qualquer um deles precisa ser alterado antes de colocar no seu blog. Cuidado na hora de colocar o endereço, pois precisa ser exato, algumas pessoas colocam www no endereço blogspot, mas na verdade isso não faz parte do endereço, o link padrão do blog é http:///seublog.blogspot.com.

Esses feed ainda servem para mostrar as ultimas noticias, esportes, enfim o conteúdo atualizado de qualquer site que tenha o feed (RSS), por exemplo, se adicionar: http://rss.terra.com.br/0,,EI1,00.xml terá as ultimas noticias do site Terra no seu blog ou as novidades do esporte através da Gazeta Esportiva http://www.gazetaesportiva.net/rss/jogoRapido.xml. Então espero que gostem e aproveitem para colocar novos conteúdos no blog.

Compartilhe - Redes Sociais

Enviar por email

Como colocar musica no blog

Um site que achamos muito fácil de usar para colocar musica no blog é o Goear, basta procurar pela musica que deseja depois copiar o código do player que está na caixinha This song in your site, e colocar no seu blog pela pagina layout, adicionar gadget, html/javascript.


Além disso, se quiser pode fazer um cadastro clicando em Login / Register e depois hospedar (fazer upload) de suas próprias musicas ou qualquer arquivo de som. Isso pode servir até mesmo para colocar sua voz falando algo no seu blog. Tudo isso de maneira muito simples e rápida de fazer.

Compartilhe - Redes Sociais

Enviar por email

Video do Youtube

Colocar qualquer vídeo do Youtube ou algum outro site no seu blog é bem simples de fazer basta copiar o código que está em incorporar como podemos ver na imagem logo abaixo, mas se quiser colocar um link para a pagina use o endereço acima onde está escrito url, então o código fica assim:

<a href="http://www.youtube.com/watch?v=NBQXLNM-tnM" target="_blank">Motoboy – Terça Insana</a>


Voltando ao assunto como colocar um vídeo do Youtube no seu blog se quiser personalizar o modo de exibição (cor e tamanho do player) usado para mostrar o vídeo é só clicar na imagem de engrenagem ao lado do código incorporar e fazer suas escolhas, isto é muito útil para combinar as cores e principalmente por causa do tamanho (espaço) que o vídeo ocupará no blog, deste modo podemos e evitar que a largura do vídeo seja maior que a da coluna onde ele está colocado.

Compartilhe - Redes Sociais

Enviar por email

Cópia de segurança

Quando o assunto são computadores é sempre bom ter uma copia de segurança de nossos arquivos e isso vale também na hora de editar o html do blog. Quando vamos modificar o html sempre corremos o risco de apagar ou colocar algo no lugar errado e não conseguir mais encontrar o erro e acabamos desconfigurando o template inteiro do blog com isso.

Para evitar estragar o layout do blog quando mexemos no html dele vale à pena salvar uma cópia do modelo antes de começar, então na hora que entrar na pagina editar html clique em baixar modelo completo, aparecerá uma janela para inicio do download para você escolher onde salvará o arquivo.



Esse é um trabalho simples e rápido, depois que fizer isso pode alterar seu html tranquilamente, pois em caso de problemas será só enviar o arquivo que baixou clicando no botão enviar arquivo, achando o arquivo do template e depois clique em upload e seu blog voltará ao que era no inicio.

Já que estamos no assunto copias de segurança, pense também nos arquivos que tem no seu computador: fotos, textos, musicas e tantas outras coisas é muito recomendáveis salvar um copia delas em um CD, DVD, ou qualquer outra forma de armazenamento, pois nunca sabemos quando vamos pegar um vírus ou ter problemas no computador e ter essas cópias de segurança evitam muitas perdas de tempo e às vezes dinheiro.

Compartilhe - Redes Sociais

Enviar por email