Dicas para Blogs e Sites

Veja como fazer efeitos em links de texto no seu blog ou efeitos em botões de menus usando gifs animados como imagem de fundo. Colocar uma imagem com movimento (animada) como imagem de fundo é da mesma forma que qualquer outra imagem de fundo, mas usando o posicionamento e controlando a repetição da imagem de fundo pode criar ótimos efeitos em links ou menus. Veja no final deste post algumas demonstrações dos efeitos nos links.

Mais informações »

Marcadores: CSS, Efeitos, Imagem de Fundo

Veja uma lista de dicas e tutoriais sobre como criar e editar fotos e imagens para usar como banners ou ilustrar as postagens do seu blog. São varias opções para fazer ou modificar suas imagens e também sobre achar ícones, mas é claro que somente fazendo testes e com um pouco de pratica poderá decidir qual dessas opções funciona melhor para você e seu site.
Mais informações »

Marcadores: Imagem de Fundo, Imagens, Iniciantes, Segurança, Sites Úteis

Você pode alterar o tamanho das imagens que usa nas postagens do seu blog apenas modificando um trecho do endereço da imagem. Fazendo isso é possível redimensionar as imagens do blog para vários tamanhos e até modificar o formato delas e com isso adaptar as imagens para seu template imagens para seu template, parcerias ou qualquer outra utilidade que imaginar.
Mais informações »

Marcadores: Códigos, Imagem de Fundo, Imagens, Personalizar

Encontre texturas ou imagens de fundo para você colocar no seu blog ou site. São muitos backgrounds prontos para download e você acha imagens com degrade, texturas de diversas cores ou temas como musica, computadores, pessoas, natureza e outros tipos de imagens prontas para usar como fundo no blogger.
Mais informações »

Marcadores: Imagem de Fundo, Sites Úteis, Template

Você pode personalizar os títulos dos gadgets do blogger colocando imagens de fundo, mudando as cores e formatação do texto do titulo do gadget. Essa é uma mudança simples no código HTML do seu blog e permitirá personalizar cada um dos gadgets do seu blog da maneira que desejar.
Mais informações »

Marcadores: CSS, Gadgets, Imagem de Fundo, Personalizar, Template

Fazer uma imagem ou banner para usar no blog envolve varias etapas: achar imagens ou fazer as próprias imagens usando programas ou sites para editar imagens, hospedagem de imagens, gerar código do banner, colocar o código do banner no blog e analisar os resultados no caso de banners de parcerias com outros blogs ou sites. Então vamos começar nosso tutorial passo a passo sobre fazer banners para blogs.
Mais informações »

Marcadores: Imagem de Fundo, Imagens, Iniciantes, Sites Úteis

Corrigir os erros do seu site ou blog é fundamental para conseguir ter sucesso na internet e a central para webmasters do google, além dos sitemaps para indexar seu blog no Google existem ferramentas para encontrar erros no seu blog como, por exemplo, resolver o problema de paginas não encontradas (erro 404) mostrando onde estão os links errados para suas paginas.
Mais informações »

Marcadores: Configurações Avançadas, Dicas para Sites, Erros do Blog, Imagem de Fundo, Seo, Sites Úteis

Depois do Blogger lançar novos templates com layout dinâmico, agora é possível personalizar os novos templates dinâmicos do blogger fazendo alterações de cores de fundo, tipos de fontes, trocar imagens de fundo e muito mais. Isso certamente deixará o seu blog muito mais bonito. Já mostramos neste outro tutorial sobre Novos Templates para Blogger.
Mais informações »

Marcadores: Configurações Avançadas, Imagem de Fundo, Personalizar, Template

Sempre é bom ter um blog com um template original e imagens interessantes. Achamos um site com centenas de texturas para usar como imagem de fundo no seu blog e o melhor você pode escolher e baixar totalmente grátis qualquer uma das texturas mostradas no site.

Veja aqui algumas dicas extras sobre Imagem no fundo do blog por exemplo:como escolher o posicionamento ou deixar a imagem de fundo fixa.
Mais informações »

Marcadores: Imagem de Fundo, Sites Úteis, Template

Quando fazemos uma lista de links no blog podemos colocar uma imagem ao lado de cada link para ficar mais bonito, isto pode ser feito colocando setinhas ao lado dos links ou alguma outra imagem que podem ser gifs animados como utilizamos muitas vezes em nossos blogs. Veja também como fazer um menu horizontal.

Esse tutorial mostrará como colocar imagens do lado dos links utilizando um menu feito com um gadget de html/javascript, mas se quiser pode ver aqui como aplicar esse mesmo estilo de formatação em qualquer gadget do seu blog, por exemplo, nos marcadores ou qualquer outro.
Mais informações »

Marcadores: Códigos, Colocar Menu, CSS, Html, Imagem de Fundo, Iniciantes

Agora o blogger permite enviar imagens de fundo diretamente pela pagina designer do modelo, ficou muito mais simples usar uma imagem de fundo personalizada. Você pode achar ou editar uma imagem para usar como fundo do blog e depois enviar para o blogger sem se preocupar com hospedagem ou endereços de imagens de fundo.Mais informações »

Marcadores: Imagem de Fundo, Template, Video Aula

Com a pagina designer de modelo o blogger tem muitas imagens de fundo prontas para serem instaladas no blog com apenas um clique do mouse, porém ainda é possível que você queira colocar sua própria imagem de fundo no seu blog, então vamos ver como colocar uma imagem de fundo personalizada no blog.
Mais informações »

Marcadores: Imagem de Fundo, Personalizar

Colocar os títulos da sidebar, menu lateral, com formatação diferente ou dentro de uma caixa, ou qualquer outra forma como fazemos aqui em um retângulo com cantos arredondados devemos fazer isso pela pagina editar HTML, colocando uma imagem de fundo de fundo no estilo h2 .

Falamos h2, pois é assim na maioria dos blogs, mas se no seu caso não funcionar para saber qual o estilo dos títulos do menu veja o HTML do seu blog e procure pelos títulos que usa então saberá qual configurar. Entre no seu blog clique com o botão direito do mouse num espaço vazio(fora de imagens ou video) e escolha a opção exibir código de fonte, então procure por um dos títulos do seu menu. No caso do Dicas para Blogs encontramos assim: <h2>Guia Rápido</h2> , portanto vamos formatar o h2, mas se no seu blog for outro use esse outro estilo.

Na pagina editar HTML encontramos

h2{..........} então coloque aqui a imagem de fundo junto com o restante do código. O nosso blog ficou assim:
h2 {background-image: url(http://img24.imageshack.us/img24/8909/menudm1.jpg);background-repeat: no-repeat;background-position: center;font-size: 120%;text-align: center;height: 30px;padding-top:9px;color: #000000}

o começo do código é a imagem de fundo background-image: url(http://img24.imageshack.us/img24/8909/menudm1.jpg

Depois tem a parte que impede a repetição e centraliza a imagem de fundo background-repeat: no-repeat;background-position: center;

height: 30px; é a altura da linha, ou seja, deixe igual à altura da imagem.

Outro detalhe é caso aparecer essa imagem de fundo em outro lugar como, por exemplo, no titulo das postagens, então corrigimos isso assim:

h2.date-header {background-image: none;

Isso faz que o estilo h2 date-header não tenha fundo, mais uma vez se precisar localizar o nome exato do estilo faça do mesmo jeito que indicamos para saber qual o estilo dos títulos do menu.

Veja também:

Imagem da carta - enviar postagem
Deixar a mesma postagem no ínicio do blog
Formatação diferente em uma parte do texto
Noções de formatação em CSS
Sobre imagens de fundo
Como hospedar imagens

Marcadores: CSS, Imagem de Fundo, Iniciantes, Personalizar

Quando temos que fazer uma imagem para usar como textura no fundo do blog geralmente enfrentamos muitos problemas, pois é difícil fazer uma imagem que encaixe perfeitamente. Logo abaixo você tem imagens para usar como plano de fundo no seu site, você apenas precisa salvar e hospedar em algum lugar, sugerimos o http://imageshack.us








No site All Free Backgrounds e Free Backgrounds você encontra muitas outras imagens de fundo, e o procedimento é o mesmo, salvar e hospedar a imagem e depois você entra na pagina editar html do seu blog e coloca a linha de código background-image: url(endereço da imagem); junto com :
body{................
...........
..........}
E já está pronto, se você quiser testar essas imagens antes de colocar no seu blog copie esse código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {background-image: url(fundo4.gif);
}
-->
</style></head>
<body>
</body>
</html>

Cole no bloco de notas, altere onde está escrito fundo4.gif para o nome da imagem que você quer testar, mas não se esqueça de colocar .jpg ou .gif no nome da imagem porque isso também faz parte do nome da imagem. E salve no seu computador na mesma pasta onde salvou a imagem, com o nome planodefundo.htm, desse mesmo jeito o nome do arquivo precisa ter o .htm no final pois assim será como se fosse uma pagina de internet. Agora é só ir até a pasta e clicar sobre esse arquivo que ele abrirá em seu navegador de internet e você poderá ver como fica a imagem de fundo sem precisar hospedar e mexer no seu blog. Isso poupa muito trabalho, afinal somente irá mexer no seu blog depois de visualizar a imagem de fundo que escolheu e já tem certeza que deseja usar-la.

Veja também:

Por que a imagem não aparece
Posicionar imagem de fundo
Fixar imagem de fundo
Como hospedar imagens

Marcadores: Acessórios, Imagem de Fundo, Sites Úteis

O código para posicionar a imagem de fundo do seu site é:

background-repeat: no-repeat;
background-position: right top;
background-color: #6699FF;
background-image: url(fundofixo.jpg);

Esse código deve ser colocado na tag body{...} do seu html(página editar html). A linha background-repeat: no-repeat; faz que a imagem apareça somente uma vez.

background-position: right top; aqui escolhemos o lugar que a imagem de fundo aparecerá.

Então no lugar de right(direita) pode ser center(centro) ou left(esquerda).

E no lugar de top(alto da página) você pode usar center(meio da página) ou bottom(embaixo da página)

As últimas duas linhas:

background-color: #6699FF;
background-image: url(fundofixo.jpg);

São a cor e a imagem de fundo as quais você colocará a seu critério, se precisar de ajuda para achar o código das cores clique aqui.

Outra coisa que pode ser adicionada a este código é: background-attachment: fixed;
para fazer a imagem ficar parada, ou seja, somente o conteúdo do seu site irá se mover assim a imagem ficará sempre visível, veja mais sobre fixar a imagem de fundo.

Veja um exemplo de página com imagem de fundo posicionada.

Leia também:
Mais detalhes sobre posicionar a imagem de fundo no blog
O que é CSS? Para que Serve e Como usar o CSS

Marcadores: Códigos, Imagem de Fundo

Para deixar uma imagem de fundo fixa no blog entre na pagina editar html e procure por body{....}, caso já tenha a imagem de fundo então coloque esse código junto:

background-attachment: fixed;

se ainda não tiver a imagem o código é assim:

background-image: url(URL DA IMAGEM);
background-attachment: fixed;

Então ficará desse jeito:

body{background-image:url("endereço da imagem");
background-attachment: fixed;.....}

Claro que precisa colocar um endereço de imagem(url da imagem) no local indicado. Se tiver duvidas veja se está usando o endereço correto da imagem.

Marcadores: Imagem de Fundo

Um tipo de fundo de página que pode produzir um efeito visual muito interessante é o degrade no topo da página ou seja o site começa com fundo de uma cor e vai mudando para outra que ocupara a página inteira, mas como fazer isso? Pode acreditar é mais fácil do que parece.
O primeiro passo é escolher as cores que você usará, então faça uma imagem degrade dessas cores, mas não precisa ser uma imagem com muita largura, sugiro 10 pixels pois ela se repetira horizontalmente no topo da página, quanto a altura da imagem isso depende da sua vontade pois é o tamanho que terá o degrade. Contudo se em vez de usar um degrade com cores você preferir usar uma textura a largura da imagem terá que ser do tamanho da textura. Depois da imagem pronta é só hospedar em algum lugar, por exemplo no http://imageshack.us.
O código para colocar esse fundo degrade no seu site ou blog é:

background-color: #FFCC99;
background-image: url(degrade.jpg);
background-repeat: repeat-x;

Coloque o endereço da imagem no lugar indicado e no lugar de #FFCC99, coloque a cor da parte debaixo da imagem degrade que você fez, veja uma tabela com o código das cores. A ultima linha do código faz que a imagem se repita somente na na direção horizontal da página dando a impressão que o fundo é degrade.
No Blogspot vá até a página layout, editar html e coloque o código na parte do .body{..........
......
.......}

Veja também:

Onde e como hospedar imagens
Problemas com imagens que não aparecem no blog
Programas grátis para editar ou fazer imagens

Marcadores: Códigos, Imagem de Fundo

Para colocar uma imagem fixa como fundo do blog ou site use o seguinte código:

background-attachment: fixed;
background-image: url(endereço da imagem);

Isso funcionar tanto para a pagina inteira como para algum setor especifico como por exemplo main, sidebar ou qualquer outra parte dependendo de como é escrito o CSS do seu site. Usei como exemplo as partes mais comuns do blogspot.

Evidentemente isso só terá utilidade no caso de usar uma imagem de fundo. No lugar onde está escrito endereço da imagem coloque a url da imagem(lugar onde você hospedou a imagem), pode usar para hospedar esse site http://imageshack.us. A url correta é aquela que termina com .gif ou .jpg dependendo como você salvou a imagem no seu computador, geralmente encontramos essa url no campo Direct link to image.

Essas alterações no código das imagens de fundo são feitas pela página editar html no Blogspot, para chegar nessa página clique em layout depois na guia editar html, então é só achar a parte do código que você deseja mudar para ficar mais fácil encontrar o que deseja clique ctrl F(isso abre uma janela para você escrever o que procura).

Marcadores: Imagem de Fundo

Fazer códigos as vezes é complicado para quem não tem costume, então preencha os campos abaixo e faça o link que deseja. Aqui é possível fazer: link de texto, link com imagem e ainda a caixinha com o código para as pessoas linkarem seu site.

Se precisar de ajuda para criar a imagem do seu blog veja neste tutorial: Como fazer um banner. Além disso recomendamos que use Botões para Divulgar Blog nas Redes Sociais. Isso pode gerar mais visitas e se quiser poderá organizar um sistema de Top Parceiros do Blog. Depois é só colocar o código no blog através da página layout, adicionar gadget, html/javascript, então cole o código feito no gerador abaixo.

Se a imagem não aparecer talvez esteja usando a url errada(endereço) da imagem, veja aqui como saber se o endereço da imagem está correto.

Veja mais dicas uteis sobre fazer banners e parceiras entre blogs:
Organizar Banners ou Pagina de Parcerias entre Blogs
Criar Banner Animado com as Postagens Recentes do Blog
Colocar Efeitos em Fotos e Imagens: Bordas, Desenhos, Texto, Editar Cores

Depois que gerar o código clica na caixa de texto, clique ctrl+A(selecionar tudo), ctrl+C(copiar) e depois entre na pagina layout > adicionar gadget > html/javascript e cole o código, então pode arrastar o gadget para escolher o melhor lugar para ele no seu layout.

Marcadores: Códigos, Imagem de Fundo, Iniciantes