CONCEITO
Blog vem do termo inglês Web Log, cujo significado atual é algo como "diário da web".
Existem diferentes tipos de blogs. Aqueles que contam sobre a vida do autor, os que fazem piadas, outros que servem como fonte de informações, etc. Blog é tudo aquilo que usa o sistema de Blogging, que se baseia em uma um site com uma única página, com textos organizados em posts.
Mas se explicações técnicas não lhe agradam, crie o seu agora mesmo e descubra, verdadeiramente, o que é essa nova revolução da internet.
TEXTO
EM ITÁLICO
Digite <i> para abrir o código.
O seu texto em seguida.
E feche com o </i>
Assim, o <i>seu texto</i> ficará desta forma.
TEXTO
EM NEGRITO
Similar ao processo de criação de texto em itálico.
Digite <b> para abrir o código.
E o seu texto em seguida.
Feche com o </b>
Desta forma, <b>seu texto</b> ficará assim.
SUBLINHADO
Já aprendeu os anteriores? Então vai ficar fácil!
<u> primeiro.
O texto em seguida.
</u> pra fechar.
<u> Viu como é simples? </u>
Pronto, seu texto ficará assim: Viu como é simples?
TEXTO
RISCADO
<s> Texto riscado </s>
Resultado: Texto Riscado.
Cuidado para não confundir esse "s" com o "u". Lembre-se que "U", vem da palavra inglesa "Underline", o mesmo que "sublinhar".
ABRIR SITES EM UMA NOVA JANELA
A opção de colocar link para outro site existe em todos os editores de blogs e se baseia no seguinte código: <a href="http://www.endereco.com.br">Visite esse site</a>
Para fazer com que os sites que você linka abram em outra janela, basta acrescentar o target="_blank" depois do endereço.
Ok, você quer algo mais explicativo.
Digite <a href="endereço do site target="_blank">
Depois a descrição dele. Ex: Veja o blog da Juliana!
Para finalizar, coloque um </a>
Recapitulando. <a href="http://insensibilidade16.blogger.com.br target="_blank">Veja o Blog
da Juliana!</a>
O resultado será este.
CORES NO TEXTO
Que tal mudar as cores da fonte em alguns textos? Pra dar destaque, para deixar mais bonito, enfim. Onde usar é uma opção sua.
Mas vamos lhe ensinar como.
<FONT COLOR = "#FF0000">Um texto vermelho. </FONT>
Resultado:
um texto vermelho.
<FONT COLOR = "#0000FF"> Texto azul </FONT>.
Você pode substituir as cores, trocando o código "#0000FF" (azul) pelo
"#FF0000" (vermelho), por exemplo. Clique
aqui e veja a tabela de cores que são vistas perfeitamente em todos os navegadores.
LINK
PARA E-MAIL
Quer deixar um link para que os seus leitores lhe mandem e-mail?
É simples, simples.
Você irá escrever um código semelhante ao usado para abrir sites, mudando apenas uma parte.
<a href="mailto:seuemail@provedor.com.br"> Clique aqui e me envie uma mensagem! </a>
Troque a parte seuemail@provedor.com.br pelo endereço do seu e-mail.
O resultado será este:
Clique aqui e me envie uma mensagem!
ACESSAR
IMAGEM/VÍDEO/SOM..
Imagem
Basta colocar o endereço da imagem.
<a href="http://endereço.com.br/imagem.gif"> Minha foto </a>
Ficará assim: Minha
foto.
Você também pode colocar o target="_blank", para abrir em uma nova página.
(recomendado)
Como?
Não se preocupe, aqui nós lhe explicamos como fazer.
<a href="http://www.endereço.com.br/imagem.gif target="_blank"> Minha foto em uma nova página! </a>
Resultado: Minha foto em uma nova página.
Vídeo
Similar ao código da imagem. Basta colocar o endereço do vídeo. Mas lembre-se de observar o formato dele.
RAM (Real Player), WMV (Windows Media) abrem ao clicar. Em outros caso, como o WMV (Windows Media), é necessário salvar no computador.
Então alerte aos seus amigos para que cliquem no link com o botão direito do mouse e selecionem
"Salvar Destino Como.."
Só pra constar, aí vai um exemplo:
<a href="http://www.endereço.com.br/video.ram"> Clique e assista ao trailer novo do The Strokes! </a>
Clique e assista ao trailer novo do The Strokes!
Viu como fica?
E, lembrando, se for um vídeo WMV, escreva o mesmo código acima (trocando o formato do arquivo para .wmv, claro) e indique como deverá ser salvo.
Lá vai: <a href="http://www.endereço.com.br/video.wmv"> Para salvar,
clique aqui com o botão direito do mouse e selecione "Salvar Destino como"</a>
Som
Arquivo MP3? WAV? Ou RM?
Não tem muita diferença dos links para vídeos.
MP3, WAV, entre outros, com o texto indicando que o arquivo deve ser salvo clicando com o botão direito do mouse e selecionando a opção "Salvar Destino como".
Para RM, que é executado diretamente, basta colocar um link para o endereço do arquivo.
ACESSAR OS ARQUIVOS
Geralmente um código é adicionado embaixo do seu post.
Pode ser um "#" com um link, o horário da publicação com um link, ou qualquer coisa para um link parecido com este:
http://blog.blogger.com/2003_09_01_archive.html#8782659
Pois então, você acabou de escrever um texto muito bacana, mas se lembrou de que ele tem relação com um post antigo. Que tal linká-lo?
<a href="http://endereço.com.br"> E eu já escrevi sobre isso aqui </a>
Resultado: E eu já escrevi sobre isso
aqui.
Para descobrir o endereço é simples. Clique com o botão direito do mouse em cima da opção que tiver o link para um determinado post, como eu já expliquei lá em cima.
INSERINDO IMAGENS
Se você quer enfeitar o seu blog com umas imagens legais, sugiro que passe lá na
parte de imagens do nosso portal. Bastará um clique para copiar o código e um CTRL + V para colar em seu post.
Mas apesar de termos simplificado este processo, esta dica foi criada para lhe dar uma noção de como é o procedimento.
<img src="http://site.com.br/imagem.gif">
Prontinho. É só trocar o
http://site.com.br/imagem.gif
pelo
endereço da imagem que você deseja utilizar.
Esse código pode ser usado tanto nos posts quanto no template do site. Templates estes, que nós disponibilizamos aqui.
E que tal colocar um texto nesta imagem? Funciona assim: Quando alguém colocar a seta do mouse em cima da figura, aparecerá um texto sobre ela.
Vamos ensinar como fazer e depois mostrar o resultado.
<img src="http://site.com.br/imagem.gif" alt="Seu texto aqui">
E, tcharam! Fica assim:
Imagem com seu texto aqui.
Diga lá, você sabia que fazer blogs era simples, mas ao ler este tutorial está percebendo que é mais
ainda..
IMAGEM COM LINK
Agora só é preciso juntar dois códigos: o usado para inserir imagens e o que funciona para colocar um link.
<a href="http://www.b-log.net"><img src="http://site.com.br/imagem.gif alt="Texto aqui"></a>
O <a href="endereço"> abre o código de link.
O <img src="endereço"> abre o da imagem.
E o </a> fecha o código do link. O da imagem não precisa ser fechado.
Resultado:
lalalalallala
IMAGEM COM LINK PARA E-MAIL
Aquela cartinha que você achou aqui bem que poderia ser usada para colocar um link para o seu e-mail, não é mesmo?
Siga as nossas instruções e faça tudo certinho!
<a href="mailto=endereço@dominio.com.br"> no começo.
<img src="http://www.b-log.net/imagem.gif" alt="clique e me mande um e-mail"> em seguida.
</a> pra finalizar.
O ALT="texto" é opcional, sempre.
Assim,
<a href="mailto=endereço@dominio.com.br"><img src="http://www.b-log.net/imagem.gif" alt="clique e me mande um
e-mail"></a>
O resultado será este!
Clique e me mande um e-mail!
TAMANHO DA IMAGEM
Que tal redefinir o tamanho da imagem?
Imagem no tamanho original:
<img src= "http://www.b-log.net/imagem.gif" alt= "Texto aqui">
Imagem ampliada:
<img src= "http://www.b-log.net/imagem.gif" width= "226" height="170" alt= "Coloca qualquer coisa aqui, amigão">
Imagem reduzida
<img src= "http://www.b-log.net/imagem.gif" width= "82" height="62" alt= "Ah, o comando ALT. Tão simples!">
Nós até pensamos em finalizar dizendo que o width="número" e o height="número" são os determinantes do tamanho, mas sabemos que nossos leitores são muito espertos e já perceberam
isso.
Belezinha.
IMAGEM COM BORDA
É só acrescentar um border="número" ao código da imagem.
<img src="http://www.b-log.net/imagem.gif" alt="Tanto faz" border="5">
Troque-o para ver o resultado.
ALINHAMENTO
Para colocar o texto ao lado da imagem.
<img src="http://www.b-log.net/imagem.gif" alt="Tanto faz" align="top">Texto
ao lado.
Resultado:
laalalla
Texto ao lado, na parte central.
<img src="http://www.b-log.net/imagem.gif" alt="Tanto faz" align="middle" >Texto
no meio.
Texto ao lado da imagem, embaixo.
<img src="http://www.b-log.net/imagem.gif" alt="Tanto faz" align="bottom" > Texto
em baixo
Imagem alinhada à esquerda do texto.
<img src="http://www.b-log.net/imagem.gif" alt="Tanto faz" align="left" > Imagem alinhada a esquerda do texto.
Quando se usa o parametro ALIGN=LEFT, pode-se ter mais de uma linha de texto ao lado da imagem, o que não acontece com
ALIGN=TOP ou MIDDLE
Imagem alinhada à direita.
<img src="http://www.b-log.net/imagem.gif" alt="Tanto faz"> Imagem alinhada à direita do texto. Quando se usa o parametro ALIGN=RIGHT, pode-se ter mais de uma linha de texto ao lado da imagem, o que não acontece com
ALIGN=TOP ou MIDDLE
IMAGEM DE FUNDO
Vá no código do Template do seu blog.
Procure por essa parte (é óbvio que não estará igualzinho ao exemplo).
<HTML>
<HEAD>
<TITLE>Titulo da sua página</TITLE>
</HEAD>
<BODY BACKGROUND="http://endereço.com.br/pink-03.gif">
Corpo da página
</BODY>
</HTML>
Ok, o que importa mesmo é a parte BODY BACKGROUND.
Troque o endereço pelo lugar onde está a figura que você deseja utilizar.
Cuidado para não deixar um contraste muito grande entre o texto e o fundo, pois isso atrapalha a leitura. Use fundos claros com textos escuros, e vice-versa.
TEXTO COM EFEITOS
Para colocar efeitos em títulos, links e etc (não coloque um texto inteiro
assim, pois isso prejudica a leitura).
Faça as alterações indicadas nos códigos abaixo:
Efeito Glow (o que está em vermelho pode ser alterado)
<font face="Verdana"
size="2"
color="#00FFFF"><SPAN
style="filter:glow(color=#054565);
height:7">Seu
texto</font>
font face=
Tipo de fonte. Pode ser também Arial, Helvetica, etc.
size=
Tamanho.
color=
O código com a cor que você irá usar. Se não sabe qual é, consulte a
nossa tabela de cores.
(color=#054565):
Aqui você deve especificar a cor que será usada no efeito.
height: tamanho efeito 3d, sombra
Ex: b-log.net
Efeito Shadow
<font face="Verdana"
size="2"
color="#00FFFF"><SPAN
style="filter:shadow#054565);
height:7">Seu
texto</font>
Note que há apenas uma mudança em relação ao efeito anterior, a troca do nome "glow" por "shadow".
Ex: b-log.net
Voltar