Como alinhar imagens lado a lado no post

04 Outubro 2011

0 comentários
Algumas pessoas me perguntaram como fazem para colocar lado a lado imagens dentro do post. Para compreender melhor como funcionam as imagens dentro de um post, é preciso clicar na aba HTML do painel de postagem e ver como se apresenta o código de cada uma.

Código de uma imagem em um post do Blogger - clique na Aba HTML
O código da imagem está representado por:
<img border="0" height="100" width="94" src="http://4.bp.blogspot.com/-2QsUcP6xA40/TosMzgLgpoI/AAAAAAAAb9Q/ohS4LbvUfN4/s400/device.jpg" />

O link da imagem (para onde o leitor é levado quando clica na imagem) em:
<a href="http://4.bp.blogspot.com/-2QsUcP6xA40/TosMzgLgpoI/AAAAAAAAb9Q/ohS4LbvUfN4/s1600/device.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"> (aqui vai o código da imagem) </a>


Note que por padrão, o link sempre apontará para a própria imagem (o que faz com que ela abra em uma nova aba quando clicamos nela) mas que pode ser alterado, ou seja, você pode substituir o que está entre aspas (o "http://...) por um outro link, se desejar que a imagem leve para outro blog/site ou página do seu blog.

E, por fim, tanto o link quanto a imagem estão dentro de uma div (ou um bloco) chamado separator, que carrega algumas definições de estilo, como clear:both e text-align:center:

<div class="separator" style="clear: both; text-align: center;">
código do link e da imagem
</div>


Quando queremos colocar duas ou mais imagens lado a lado em um post, o primeiro a fazer é remover o código acima (da div separator) de todas as imagens:


Na imagem acima você vê o código de duas imagens acrescentadas em um post, já com o código do div separator eliminadas (não esqueça de apagar o </div> também).

Se você der uma olhada nestas imagens agora no modo Escrever, elas não se apresentarão lado a lado ainda, mas estarão acima uma da outra. Devemos então eliminar todos os espaços entre elas, ficando assim:


Se você olhar agora no modo Escrever, elas estarão lado a lado:

Agora, para alinhá-las ao centro, basta, no modo Escrever, clicar sobre a primeira e centralizá-la ao centro, como abaixo:

Isso fará com que, automaticamente, as duas imagens sejam alinhadas ao centro, lado a lado.

Blogger e seus Modelos

07 Agosto 2011

0 comentários
Nos seus dez anos de existência, a plataforma Blogger evoluiu bastante e esta evolução nos presenteou com modelos de templates diferentes ao longo deste tempo. Atualmente, o modelo mais recente é o Designer de Modelo e se você acaba de criar um blog, são estes templates que lhe são apresentados:


Estes novos modelos contam com  uma série de recursos e variáveis que permitem que o usuário faça grandes modificações no layout (como inserir ou retirar colunas, aumentar e diminuir a largura do layout, etc) sem precisar tocar em uma linha sequer do código HTML. Para quem deseja apenas criar um blog e não ter que se preocupar em aprender algo sobre CSS e HTML para personalizar um modelo, indico estes novos modelos.

Clicando em Designer do Modelo você é levado para um painel onde pode fazer grandes mudanças em qualquer um dos modelos disponíveis, como trocar a imagem de fundo, do cabeçalho, alterar fontes e cores e disposição das colunas, apenas com alguns cliques e nada mais. Você pode ainda inserir trechos de CSS (se for sua vontade) neste mesmo painel, sem precisar procurar os locais corretos para isso no HTML do template:

Adicionando estilo ao cabeçalho através do painel e vendo o resultado abaixo

Mas, nem sempre foi assim, tão fácil modificar um template. Quando comecei a utilizar a plataforma Blogger, em 2006, apenas o Modelo Clássico estava disponível e não cheguei a ter muita familiaridade com ele e suas tags, por que imediatamente depois que criei meu primeiro blog (dias depois), lançaram um novo modelo (Layout) e todos ficaram perdidos com os novos códigos e queriam saber onde encontrar 'templates para o novo blogger'. A quase totalidade dos templates disponíveis para download hoje em dia são para os modelos Layout(2006), já que não faz sentido fazer templates para o modelo Clássico (muito ultrapassado e limitado) e para os Designers de Modelo (não faz sentido modificar um modelo que o usuário pode modificar sozinho). O que fazemos, atualmente, é colocar à disposição para download os modelos de Layout com variáveis suficientes para que o usuário possa fazer algumas (mas limitadas) alterações na aparência do template, como fontes e cores.

Mas onde encontro maneira de mudar o meu template?

Vá até a aba Editar HTML e desça até o final da página. Você encontrará os links para os modelos anteriores. Note que, ao alterar o modelo atual, você perderá o template que estará usando, por isso salve-o primeiramente em seu computador. As mudanças são reversíveis, ou seja, se você não se acostumar com Designer do Modelo, poderá voltar para a versão Layout quando quiser:

Onde você poderá alterar o modelo do seu template.
Desde 2010, ao criar um blog no Blogger, imediatamente ele coloca à disposição os novos modelos (Designer do Modelo) e muitas pessoas não sabem que existem os modelos anteriores. Assim, quando fazem o download de um template em algum outro site e não conseguem depois modificar as colunas ou largura do layout, não entendem o por quê. Por isso é necessário entender a diferença que há entre estes modelos e que eles fazem parte desta evolução que vem ocorrendo na plataforma Blogger. Uns gostam, outros rejeitam as mudanças, mas o que importa é:

- se você quer ter  liberdade para modificar todos os detalhes do seu template, use o Designer de Modelo;
- se você se 'apaixonou' por um template que está disponível para download em outro site, saiba que ele (muito provavelmente) foi feito com o modelo Layout(2006) e você não poderá fazer grandes alterações nele, além de algumas fontes e cores;
-e os Modelos Clássicos...bem, não conheço ninguém que ainda os use.

Como trocar de template

09 Dezembro 2008

59 comentários
Templates são documentos sem conteúdo, apenas com uma apresentação visual, que podem ser incoporados ao seu blog, determinando a aparência que ele terá. No sistema Blogger (ou Novo Blogger) este documento se apresenta no formato XML e deve ser salvo em seu computador (download) e depois colocado em seu blog (upload). Existem centenas de modelos à disposição em diversos sites, para uso gratuito, com a única e justa condição de que não se retirem os créditos dos mesmos. No final deste artigo indicarei sites onde se pode fazer o download de temas/templates para Blogger.

Para trocar de template você deve primeiro fazer o download de um arquivo XML onde se encontra os códigos que determinarão a aparência de seu blog. Geralmente os templates são distribuídos em pastas zipadas que devem ser descompactadas após o download. Normalmente estas pastas contém, além do arquivo XML, as imagens utilizadas na criação do template, bem como qualquer instrução de uso que o autor considere necessária. Apenas o arquivo XML deve ser 'colocado' em seu blog; as imagens servem apenas para serem guardadas e futuramente hospedadas em outros locais, se assim for necessário.

Para 'subir' um template para seu blog:

1-Guarde todas as suas widgets: widgets são todos os códigos e listas que você incorporou ao seu blog através do painel Adicionar Elemento de Página. Quando você troca seu template, você automaticamente perde todas as suas widgets, por isso, torna-se necessário fazer uma cópia de todos os códigos que complementam seu blog: contador, banners, links, códigos de imagens, códigos de programas de afiliados, etc. Para isso, basta clicar em Editar no retângulo correspondente à widget e copiar o código que aparece, colando-o no Bloco de Notas, por exemplo. Faça isso com todas as suas widgets (com exceção de Arquivos, Perfil e Marcadores).



2- Tendo copiado todos os códigos das widgets, clique em Editar HTML



Esta deve ser a página que você irá visualizar, e que contém todos os códigos do seu template atual:



3- Clique em Arquivo e procure em seu computador o arquivo XML que você baixou. Clique em Abrir e em Fazer Upload. Uma mensagem aparecerá avisando que suas widgets serão excluídas (e aparecerá uma lista com todas as widgets que você possui) e uma confirmação será pedida. Ao confirmar, suas widgets serão excluídas e o novo template será instalado.

Algumas vezes ocorrem erros que impedem a instalação de um template. Algumas medidas simples podem evitar dor de cabeça na hora de trocar um template:
  • Deixe marcada a opção Expandir Modelo de Widget;
  • Certifique-se de que está fazendo o upload do arquivo XML e não de uma imagem (GIF, JPG)
  • Se uma mensagem de erro persistir, troque de navegador. Algumas vezes ocorrem alguns bugs no Firefox e no Internet Explore vai tudo bem e vice-versa.
  • Se você fez muitas modificações em seu blog em um curto espaço de tempo (em uma hora, por exemplo), espere mais algumas horas para trocar o template. 
  • Se estas medidas não resolverem o problema, veja se é possível consultar o autor do template para obter informações ou procure testar outros modelos. 
Depois de instalar o novo template, recoloque suas widgets no blog.

Sites que oferecem templates gratuitos para o Blogger:

Templates e Acessórios
Templates para Você
Templates Novo Blogger
Blogger Templates
eblog templates
Blogger Tricks
Blogger Templates
Zona Cerebral
BlogTemplates

Transformar uma imagem na Sidebar em Link

31 Agosto 2008

39 comentários

Se você deseja colocar uma imagem na sua sidebar (coluna lateral) que sirva de link para outra página (blog, site, fórum, etc), basta clicar em Adicionar Gadget (ou Widget) e escolher a opção Imagem.

imagem1

Clique em Arquivo para buscar no seu computador uma imagem, ou digite a url da página onde se encontra a imagem, no campo abaixo:

imagem3

Ao escolher uma imagem do seu computador ou da internet, uma  prévia da mesma será mostrada. No campo Link, coloque  a url da página que a imagem irá linkar e clique em salvar.

imagem2

No meu exemplo escolhí uma imagem de Feed e inserí a url do Feed do Como ter um Blog, que por padrão é: http://nomedoseublog.blogspot.com/feeds/posts/default.

Com este recurso é possível colocar rapidamente banners de blogs amigos, feed com imagem ou mesmo imagens que levam à determinadas seções do seu blog (um About Me por exemplo).

Conhecendo a aba Layout

12 Agosto 2008

12 comentários

Na aba Layout (ou Modelo) você poderá adicionar elementos na página de seu blog sem a necessidade de mexer com os códigos do template.

layout

Veja que todas as divs (estes 'blocos' que agrupam elementos, como o cabeçalho, postagem e sidebar) estão visíveis e  que é possível adicionar elementos tanto na Sidebar quanto no Footer (rodapé do template). Muitos templates disponibilizados na internet contém outras tantas colunas mas este template apresentado na imagem é um template simples do Blogger.

Adicionando Elementos de Página

Para adicionar elementos na página (sidebar ou coluna lateral), basta clicar no link Adicionar Elemento de Página (ou ainda, Adicionar Gadget) e uma lista de opções se abrirá em uma nova janela.

gadgets

Todas as opções são de fácil instalação e acompanham explicações claras de suas funções. Para mudar a localização de um elemento que foi inserido na página, basta clicar sobre o retângulo correspondente e arrastar até a posição desejada.

movendo

Além das opções oferecidas pelo Blogger, como lista de links, slide, etc, você também pode acrescentar em sua página qualquer serviço oferecido por um outro site, como contador, relógio, banners, etc. Para tanto, basta copiar o código fornecido pelo serviço, escolher o elemento de página HTML/JavaScript  e colar o código.

java 

    JavaScript sendo adicionado à página.

Fontes e Cores

Na aba Fontes e Cores é possível fazer algumas alterações na aparência do seu template sem a necessidade de mexer com códigos. Claro que as opções são muito limitadas, o que leva muitas pessoas à aprenderem, com tutoriais mais avançados, os códigos do template e criarem seus estilos próprios.

Aqui neste painel você pode brincar à vontade com as opções de cores: a mudança só será definitiva após clicar em Salvar Alterações.

Editar HTML

Na aba Editar HTML você encontra, além do código completo do seu template, a opção de salvar o  template em seu computador ou 'subir' um outro modelo que tenha feito download em algum site.

backup

Para fazer o Backup (ou salvar no seu computador), basta clicar no link correspondente. Note que você estará apenas salvando o template, não seus artigos!

Para trocar de modelo e fazer Upload ('subir') de um modelo de template que esteja em seu computador, clique no botão Arquivo, procure o código do template (XML) e clique em Fazer Upload.

Note que nesta mudança uma mensagem de aviso do Blogger surgirá alertando para a perda de todos os widgets (ou aqueles elementos que você colocou em sua página). O Blogger não salva suas widgets com a troca de template por isso, é preciso salvar todos os códigos (do seu contador, relógio, banner, lista de parceiros, etc...tudo o que for externo) no Bloco de Notas (no seu computador) e depois recolocar no template novo.

Por fim, em Escolher Novo Modelo, você poderá optar por um outro template oferecido pelo Blogger.

Editar Postagens

05 Agosto 2008

6 comentários

Ainda no Painel de Postagens você verá o link Editar Postagens. Clicando neste link você será levado à uma lista com todas as suas postagens, publicadas ou não (rascunho) e será possível modificar seus textos à partir daí. Basta clicar em Editar ao lado da postagem que deseja alterar e fazer suas modificações, publicando normalmente. A posição desta postagem em seu blog será mantida, à menos que você faça alterações na data, como vimos aqui. Ainda nesta mesma página você terá controle dos Marcadores, podendo desativar ou criar alguns. Para inserir um novo Marcador, clique no quadradinho que corresponde à postagem que deseja alterar, em seguida clique no menu Opções de Marcador e faça suas alterações.

editarpostagem

Technorati Marcas: ,

Adicionando imagem na postagem

04 Agosto 2008

16 comentários

Para adicionar imagem em sua postagem, como vimos anteriormente, é necessário clicar no ícone correspondente imagem no painel de edição de postagens. Ao clicar neste ícone, uma janela se abrirá para que você carregue uma imagem do seu computador ou de outra página da web:

inserindoimagem

Na primeira vez que você usar este recurso, terá primeiro que aceitar os Termos de Uso, clicando no quadradinho assinalado. Quando você insere imagens através do Blogger, um album no Picasa é criado para guardar suas imagens, mesmo que você não tenha nenhuma conta lá. A princípio seu album não será publico - para torná-lo público você deve acessar a página do Picasa (com o mesmo e-mail e senha que us para entrar no Blogger) e fazer a modificação.

Para subir uma imagem do seu computador

Clique em Arquivo e uma nova janela se abrirá, mostrando os documentos e imagens salvas no seu computador. Clique sobre a imagem que deseja postar e clique em Abrir

imagem1

Feito isso, assinale a posição em que sua imagem deve aparecer (Esquerda, Centralizado, Direita ou Nenhuma) e o tamanho da imagem (Pequena, Media, Grande). Ao clicar em Usar este layout sempre? a formatação escolhida será automaticamente repetida para novas imagens postadas. Se não deseja repetir automaticamente esta formatação no futuro, desmarque a opção. Você pode ainda clicar em Adicionar outra imagem, podendo carregar até cinco imagens ao mesmo tempo, porém, a formatação escolhido (por ex: à esquerda, tamanho médio), servirá para todas.

Para postar uma imagem da Internet

Para fazer o upload de uma imagem da Internet, antes é preciso ler com atenção o que o Blogger tem a dizer sobre isso:

não deverá usar uma localização de imagens que esteja hospedada por outra pessoa sem sua permissão. Em alguns casos, isso é chamado "roubo de largura de banda", porque toda vez que seu blog é carregado, a imagem é carregada do servidor dessa pessoa, que tem que pagar pelas despesas.

E ainda:
Antes de colocar uma imagem no seu blog, saiba que algumas imagens são protegidas como propriedade intelectual por meio de direitos autorais. Isso significa que o criador possui direitos legais exclusivos sobre suas obras e pode não querer que você as copie e exiba. Caso você não tenha certeza se uma imagem está ou não protegida por leis de direitos autorais, é melhor não se arriscar.

Para conhecer mais detalhes, clique no link Saiba Mais localizado abaixo do campo onde deverá inserir a url (o endereço) da imagem. Tendo se certificado de que o uso deste recurso não ferirá os direitos alheios, insira a url da imagem no campo apropriado e siga os mesmos passos já descritos para o upload de imagens do seu computador.

Dica1: Para se obter o endereço de uma imagem, clique com o botão direito do mouse sobre ela e escolha a opção Copiar Endereço da Imagem.

Dica 2: Para não correr o risco de infringir direitos alheios, certifique-se sobre as licenças de uso da imagem (este post da Nospheratt contém uma seleção muito interessante de sites que disponibilizam imagens e o significado de cada tipo de licença) e ainda, para não correr o risco de 'roubar banda', tenha o costume de salvar a imagem no seu computador e depois fazer o upload para sua postagem.

Após estabelecer como sua imagem deve ser exibida, clique em Fazer Upload de Imagem e aguarde que ela será carregada para sua postagem.

Mesmo depois de transferir uma imagem para sua postagem, você poderá alterar o tamanho pré-defido, bastando para isso clicar sobre ela e arrastar os quadradinhos que aparecerão à sua volta:

imagemmaior

Se desejar alterar o posicionamento da imagem, clique sobre a mesma e use o alinhamento do painel (direita, centro, esquerda) já visto anteriormente.

 

Posts Comments

©2006-2010 ·TNB