Tutorial - Organizando o conteúdo do seu blog

Organizando o conteúdo do seu blog

Vários leitores do meu blog, tem encontrado uma dúvida comum. Como posso organizar o conteúdo do meu blog para criar menus?. Este tutorial visa abordar este assunto de forma completa. Informo que sempre que tiverem uma dúvida, postem comentários nas postagens que dentro do possível, estarei respondendo a todos.

1 > A organização

Organizar o conteúdo de um blog, é semelhante a organizar documentos em um arquivo. Para quem já trabalhou em escritórios, entenderá que deva separar documentos por categorias e dentro destas categorias, ordaná-los através de um código em série, podendo ser números, datas, etc.

No blog é semelhante, mas é preciso tomar um certo cuidado ao fazer isso. Primeiro tenha em mente, OQUÊ será colocado em seu blog. (Ex.:  jogos para download, fotos, arquivos, músicas para ouvir e baixar). Faça uma relação de tudo o que você irá colocar de conteúdo nele em um papel.

2> E agora, como organizo tudo?

Existem duas formas de organização no Blogger através de links.

A PÁGINA - A página nada mais é do que a própria postagem. Sempre que você gera uma postagem, essa postagem possui um link, o que a torna uma página de web. Porém, você precisa ativar a opção no seu painel de controle "Páginas de postagem". (Navegue em: Painel de Controle/ Configurações/ Arquivamento).

OS MARCADORES - Os marcadores são o ponto crucial que determinam a organização do seu blog. Eles são as categorias. É como você organizar um guarda roupas, você escolherá a característica comum das roupas, seja pela cor, pelo modelo. Neste instante você está definindo uma categoria: "Calças, Camisetas, etc".

Os marcadores são gerados durante a postagem. Por isso é bom definir exatamente OQUE será postado em seu blog, pois assim você criará marcadores objetivos. Não erre como eu, veja os milhões de marcadores que existem no meu blog, pois quando eu comecei a postar, não me preocupei com isso, porém, leve em consideração a quantidade de assuntos existentes.

Para criar marcadores é fácil. Concluída a sua postagem, coloque no campo "Marcadores" uma palavra que irá servir como a CATEGORIA. (Lembrando que deverá ser referente ao assunto postado).

A título de exemplo, digamos que você usou marcadores com as palavras "Blog" e "Dicas". Após publicar sua postagem, automaticamente o Blogger transforma essas palavras em Links, que poderão ser usados em seu blog.

3 > Criamos os marcadores, 

mas como poderei usá-los em meu blog?

Primeiramente você irá mostrar esses marcadores em seu blog.

Acesse a aba "Elementos de Página" do painel de controle do seu blog. Clique em Adicionar um Gadget

Na janela que abriu, procure a opção "Marcadores" e clique em +. Agora vamos configurar nossos marcadores.

TÍTULO -  É o título da sua gadget, será mostrado no blog.
EXIBIR - Você pode selecionar quais marcadores deseja exibir. Essa opção é útil caso você deseje criar seções de marcadores. É mais uma divisão para a organização do seu blog.
CLASSIFICAÇÃO - Não precisa nem explicar...
EXIBIR - Você pode exibir no formato lista ou em forma de "Nuvem". O formato nuvem, exibe lado a lado os marcadores com destaque de tamanho de fonte para marcadores.

Clique em Salvar e pronto, será mostrado em seu blog...

4 > Criando menus com marcadores

Os menus são as formas mais práticas de navegação. Você escolhe o que deseja facilitar em seu blog para que o usuário veja, encontre, leia...

Façam bom proveito!  Esbanjem criatividade!

Fonte: Blog do palito

Quer guardar esse Tutorial ?

Entao "Clique aqui"

Tutorial - Tradutor personalizado para blog com bandeiras

Tradutor personalizado para blog com bandeiras

quarta-feira, 4 de agosto de 2010

Aqui no meu blog e utilizo um tradutor (conforme você pode observar) com bandeirinhas. Existe uma ferramenta do Google que você pode inserir no blog. É muito completo e traduz para os idiomais mais conhecidos do mundo. Masss.....se você quer a bendida bandeirinha para que o querido estrangeiro clique e traduza seu conteúdo, além de tudo seja completamente personalizável, vamos fazer. É bem facinho e você entenderá o funcionamento.

> As bandeirinhas
A primeira coisa que você irá precisar ter são as bandeirinhas. Como eu sou um cara legal (rs), disponibilizo aqui as bandeirinhas já hospedadas na web. Estão em um blog de arquivos que tenho, podem usar o link original da imagem, não tem problema.

- Italiano 
- Japones
- Holandês
- Português (Portugal)
- Rússo
- Inglês EUA
- Alemão
- Grego
- Espanhol
- Francês

> Estrutura HTML e CSS
Bom, para cada bandeirinha, você irá utilizar um endereço de imagem, um título  e um link. Conforme o código abaixo:

<div style="color: #c6c6c6; font-family: "Arial"; width: 160px; float: left; position: relative;">

Translate

<!--INGLES-->

<a href="ENDEREÇO DO BLOG TRADUZIDO" title="TITULO"><img src="IMAGEM" /></a>

</div>

• IMAGEM - É o endereço da imagem da bandeira. Como eu já disponibilizei aqui no blog as bandeirinhas, basta você clicar nelas (para mostrá-las sozinhas no navegador) e copiar o endereço da iamgem.
  
• TÍTULO - Será mostrado quando se passar o mouse sobre a bandeira. É legal você colocar o título traduzido de acordo com o idioma da bandeira.
• ENDEREÇO DO BLOG TRADUZIDO - Esta opção é a mais importante, vamos aprender a seguir.
  

> Traduzindo
Agora vamos traduzir o blog. Mas fique tranquilo! O Google Translate faz isso pra você!

Acesse o Google Translate.

Insira o URL do seu blog, selecione o idioma do seu blog (à esquerda) e o idioma que deseja traduzir (à direita). Clique em Traduzir.

Será mostrado o seu blog traduzido. Copie o endereço que aparecerá no seu navegador.

 Vá mudando as opções de idiomas conforme você deseja, copiando o endereço do blog traduzido e adicionando no código do seu tradutor.

Exemplo final:

<div style="color: #c6c6c6; font-family: "Arial"; width: 160px; float: left; position: relative;">

Translate

<!--INGLES-->

<a href="http://translate.google.com/translate?js=y&prev=_t&hl=pt-BR&ie=UTF-8&u=jhonnymoraes.blogspot.com&sl=pt&tl=en&history_state0=" title="English"><img src="http://imagem.gif" /></a>

<!--ESPANHOL-->

<a href="http://translate.google.com/translate?js=y&prev=_t&hl=pt-BR&ie=UTF-8&u=jhonnymoraes.blogspot.com&sl=pt&tl=es&history_state0=" title="Espanol"><img src="http://imagem.gif" /></a>

</div>

> Dentro do Blogger

Acesse a aba "Design / Elementos de Página" e clique em "Adicionar Gadget" . Escolha o gadget HTML / Javascript e clique em para adicioná-lo. Dentro do campo que apareceu, cole o código e salve. Depois visualize o template para ver como ficou

                                                        Fonte : Blog do palito

Quer guardar esse Tutorial ?

Entao "Clique aqui"

Tutorial - Como trocar imagem de fundo do blog

Como trocar imagem de fundo do blog

É muito fácil trocar a imagem de fundo do seu blog. Mas devemos tomar um certo cuidado ao fazer isso para que o blog não se torne pesado demais ao ser acessado por internet lenta.

A imagem usada

A maioria dos leitores está tendo problemas com a imagem. Vou explicar bem detalhado aqui como obter o endereço da imagem.

1 - Procure a imagem que lhe interesse e baixe no seu computador

2 - Acesse o PICASAWEB [nele estão todas as imagens do seu blog, não delete nada!!!]

3 - Clique no álbum em que estão as imagens do seu blog [geralmente o álbum possui o mesmo nome que o blog]

4 - Clique em "Adicionar fotos"

5 - Selecione a imagem que está em seu computador e clique em "Iniciar Upload".

...No navegador Firefox

6 -Acesse a imagem que você hospedou no Picasa. Clique sobre a imagem com o botão direito do mouse e clique em "Exibir imagem". [Obs: Existe um campo chamado Link para esta imagem, este link não funciona no blog]

7 - A imagem será mostrada sozinha no seu browser. Copie a url que está na barra de endereço do seu browser. Esta imagem será usada no código abaixo em ENDEREÇO DA IMGEM.

...no Internet Explorer 

Clique sobre a imagem com o botão direito do mouse e selecione PROPRIEDADE DA IMAGEM. Na janelinha que abriu, copie o URL da imagem.

No Blogger

1 - Abra a aba "Layout" do blog no "Painel" e clique em Editar HTML do blog, procure o código: 

body {
    background-color: $bgcolor;
    margin: 0px;
    padding: 0px;
    font: $bodyfont;
    color: $textcolor;
    }

Ele fica logo no começo do código HTML do seu blog, abaixo das variáveis do blog (lembrando que o código pode estar diferente do mencionado acima, porém se estiver depois de BODY, é esse mesmo!).


2 - Substitua todo o código acima por este aqui:

body {
    background: url (ENDEREÇO DA IMAGEM) no-repeat left top;
    margin: 0px;
    padding: 0px;
    font: $bodyfont;
    color: $textcolor;
    }

3 - Substitua ENDEREÇO DA IMAGEM pelo endereço da sua imagem hospedada na internet.

VISUALIZE O TEMPLATE antes de Salvar, se estiver OK, SALVE.


Mais opções para a imagem


Algumas configurações, dependendo do tipo de imagem que você estiver usando. Se desejar uma das opções abaixo, basta substituir a linha  "background: url (ENDEREÇO DA IMAGEM) no-repeat left top;" pela mencionada abaixo.


1 - Imagem fica centralizada e não se repete:

background: url(ENDEREÇO DA IMAGEM) top center no-repeat;

2 - Imagem fica no canto direito da página e não se repete:

background: url(ENDEREÇO DA IMAGEM) top left no-repeat;

3 - Imagem fica fixa, centralizada, não se repete e não rola junto com a página:

background: url(ENDEREÇO DA IMAGEM) top center fixed no-repeat;

4 - Imagem se repete por inteiro na página:

background: url(ENDEREÇO DA IMAGEM) repeat;

5 - Imagem se repete de cima pra baixo:

background: url(ENDEREÇO DA IMAGEM) repeat-y;

6 - Imagem se repete da esquerda pra direita:

background: url(ENDEREÇO DA IMAGEM) repeat-x;

Pra finalizar, imagem que fica com uma distância do topo e da lateral (pode ser usado para ajustar o fundo com o conteúdo que está na frente, porém ficará um espaço vazio...use a criatividade!

background: url(ENDEREÇO DA IMAGEM) x-% y-% no-repeat top;

É isso aí galera! Espero que ajude. Qualquer dúvida, pergunte.

 Fonte: blog do palito

Quer guardar esse Tutorial ?

Entao "Clique aqui"