Mostrando postagens com marcador HTML. Mostrar todas as postagens

inscreva se por Email Feedburner

07:45 Eduardo Archieri 1 comment

Enviar Atualizações por Email

Alguns blogs inclusive esse tem um serviço que envia um email avisando sobre nossas atualizações, isso é bem útil e aumenta o numero de visitas do blog. E fazer o mesmo com o seu blog é mais fácil do parece, você só precisa fazer um cadastro no Feedburner e configurar seu blog nele.
Primeiro vamos deixar o site em português, pois assim é mais fácil, no topo da pagina tem a palavra language, clique nela e na próxima pagina clique na palavra português, está certo que não é uma tradução perfeita, pois ele usa a expressão Queime um feed agora mesmo. Mas é melhor do que usar o site em inglês.

Depois que fizer o cadastro coloque o feed do seu blog no campo Queime um feed agora mesmo, se não souber seu feed vá até seu blog e copie o link que está no final da pagina na “Assinar: Postagens (Atom)”, seu feed é assim:
http://SEUBLOG.blogspot.com/feeds/posts/default
Então é só clicar em avançar, e avançar novamente, o site já vai mostrar o endereço do seu feed gerado pelo Feedburner, é o link abaixo disso: Congrats! Your FeedBurner feed is now live. Want to dress it up a little?Subscribe to your feed (and share with others!) at.

Clique no botão próximo no final da pagina e clique novamente. Agora clique na guia publicar e no menu da esquerda em Email Subscriptions, agora aperto o botão ativar e aparecerá a tela Gerenciamento de Cadastros, troque a language para Português e pronto. Agora é só copiar um dos códigos abaixo. O primeiro código mostrará no seu blog um campo de texto para a pessoa digitar o email e assinar o feed, para receber as suas atualizações no email que ela indicou.

O segundo código que tem nesta pagina mostra apenas um link para assinar o feed e o processo é o mesmo, então se quiser usar alguma imagem como link para receber suas atualizações por email é só copiar esse código da segunda caixa e colocar uma imagem nele. O código com imagem fica assim:

<a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2104814&loc=pt_BR"
target="_blank" title="Receba nossas mensagens por e-mail"><img
border="0" src="http://img6.imageshack.us/img6/2467/emaillw8.jpg"/></a>

Copiamos esse exemplo do nosso outro blog Frases Curtas. Depois que pegar esse código entre na pagina layout do seu blog, clique para adicionar um gadget, escolha a opção html/javascript e cole o código.

Leia mais

Caixa de Texto

10:29 Eduardo Archieri 8 comments

Como criar caixa de texto

Com esta caixinha de texto ,é possível também publicar códigos ou mesmo dar um destaque em um post.

caixa de texto

Codigo: html

<div style="text-align: center;">
<textarea cols="50" name="textarea" onfocus="this.select()" onmouseover="this.focus()" rows="5">Texto aqui </textarea></div>

O    cols="50" serve para medir a largura , se quiser mudar a altura é só alterar o numero que esta "entre aspas" cols="largura da caixa"

O    rows="5" serve para medir a altura, se quiser mudar a altura mude o numero que esta "entre aspas"
rows="altura da caixa"
   A caixa de texto ficara assim

caixa:editavel

Codigo: html

Leia mais

Mais informações »

link-me para blog

17:32 Eduardo Archieri No comments

Criando Botão de link-me para blog

<center> <img vspace="2" hspace="2" src="URL DA IMAGEM"/>
<textarea
cols="15" rows="3" onfocus="this.select()" onmouseover="this.focus()"

Leia mais

Mais informações »

Mural de recados no blog

11:15 Eduardo Archieri 3 comments

É muito interessante ter um Mural de Recados no seu blog ou site para interagir com o leitor. Lá ele coloca algo sobre o blog, sobre novidades e modificações feitas, ou qualquer coisa que queira, até mesmo para o autor. Um tipo excelente de mural de recados é o Cbox, site especialista em Mural de recados. Vou ensinar passo-a-passo como criar o seu!

Faça o seguinte: Clique aqui para acessar o Cbox.

Criando o Mural
1 - Clique em "Sign Up" para fazer o seu cadastro e preencha todos os campos. No campos "Skin", você escolhe o modelo de cor para o mural, a pré-visualização está ao lado (Dica: escolha uma que combine com as cores do seu blog).

2 - Depois clique em "Create my cbox" para completar o cadastro. Foi enviado para o seu e-mail um pedido de confirmação de cadastro, acesse-o e clique no link para confirmar.

3 - Agora faça o login, se já estiver logado, clique na aba "ADMIN"
4 - Clique em "Cbox options"

5 - Faça as modificações que deseja, de tamanho e cores (Width= horizontal - Heigth=vertical) e clique em "Save".

6 - Você será direcionado para a página contendo o código html para incluir o Mural de Recados no seu blog, clique em "Copy to clipboard" para copiar o código.

Colocando no Blogger7 - Abra o seu blog e na aba Layout, clique em Elementos de página.

8 - Inclua um elemento de página do tipo HTML.

9 - Cole o código que você copiou (Dica: pressione no teclado CTRL + V).

10 - Salve e disponha onde achar conveniente o seu mural.

Excluindo mensagens indesejadas
Se você deseja excluir e gerenciar as mensagens deixadas no mural de recados, é necessário acessar o site do CBox com login e senha.

Após fazer login, clique em "Messages" e depois, novamente em "Messages" no submenu.

Você irá visualizar a lista de 100 mensagens (limite que o CBox gratuito armazena). Aí você poderá selecionar e deletar as mensagens desejadas (ou indesejadas).

Visualizando todas as mensagens

No próprio Mural de Recados, arraste a barra do painel de mensagens até embaixo e verá a opção "Mensagens Antigas". Clique aí e verá todas as últimas 100 mensagens enviadas no seu Mural de Recados.

Excluindo mensagens do mural

Acesse o site do CBOX, efetue seu login e navegue até a opção MESSAGES / Messages

Selecione na lista a mensagem que deseja apagar e depois clique em DELETE.

Filtros de palavras

O CBOX na versão gratuita já possui um filtro de palavras de forma que rejeita "palavrões" entre outros conteúdos como spams, etc. Você só poderá incluir filtros por palavras escolhidas utilizando a versão paga do mural.

Leia mais

MENU SUSPENSO

16:33 Eduardo Archieri 3 comments

COMO CRIAR MENU SUSPENSO

Basta inserir o codigo abaixo em sua barra lateral ou em uma postagem , substituindo as palavras em Vermelho .

<form name="jump">

<select size="1" name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="Ir">

<option>NOME DO MENU</option>

Leia mais

Mais informações »

Adicionar três colunas no footer (Rodapé do blog) - Blogger

15:11 Eduardo Archieri 1 comment

Se seu blog está faltando espaço para adicionar Gadgets, adicione mais espaço no rodapé e deixe seu blog com mais Gadgets e mais bonito .

Leia mais

Mais informações »

Mensagem ao entrar no blog

09:11 Eduardo Archieri No comments

Embora não seja recomendável algumas pessoas gostam e procuram como colocar uma mensagem ao entrar no blog, aquela caixinha de texto escrito bem vindo ou algo parecido com isso.
O código para fazer isso é:

<script>alert('texto do alerta');</script>

Primeiro altere o texto da mensagem(texto do alerta) para o que deseja depois entre na página editar HTML e coloque esse código antes de</body> , e já está pronto é só clicar para salvar.

ou está

Para você colocar uma pequena caixa de mensagem na abertura do seu blog é só copiar o código aí abaixo, fazer a devida alteração e colocar na sua sidebar.
Funciona no IE, FF e GC.

<script language="javascript"
type="text/javascript">
alert("Sua mensagem aqui") </script> <font
face="Verdana"><span
>8pt; text-decoration:
none"></span></a></font>

Em vermelho, coloque a sua mensagem.
Em azul, coloque a fonte e o tamanho que quiser.

Leia mais

Dicas em HTML para criar seu BLOG

15:38 Eduardo Archieri No comments

1. O que é HTML e como posso utilizá-lo?

Hypertext Markup Language (HTML - linguagem de marcação de hipertexto) é a linguagem utilizada na produção de páginas na Internet. O HTML permite a criação de documentos que podem ser lidos em qualquer tipo de computador e transmitidos pela Internet até por correio eletrônico. Para escrever documentos HTML não é necessário mais do que um editor de texto simples e conhecimentos dos códigos que compõem a linguagem. Os códigos, conhecidos como "tags", servem para indicar a função de cada elemento da página na rede.

2. Estrutura básica de um documento HTML

<html>
<head>
<title>Título do site</title>
</head>
<body>Conteúdo do site</body>
</html>

3. Bloco de HTML

<html></html>

- indicam o início e o fim de um documento. Para que o computador reconheça que você está escrevendo um documento em HTML, todo o seu conteúdo deverá ser colocado no meio destas duas tags.

4. Cabeçalho do documento

<head></head>

- delimitam o cabeçalho do documento.

5. Título do documento

<title></title>

- entre estas duas tags, você deve escrever o título do site, que deve aparecer na barra no topo da tela de seu navegador.

6. Corpo do documento

<body></body>

- estas duas tags delimitam todo o conteúdo do site. É aí que aparecerão os textos, as imagens, o fundo de tela, entre outras coisas. Dentro da tag

<body>

você conseguirá especificar:

Imagem de fundo

<body background="imagem.gif">

- a imagem que você deseja configurar como fundo de tela.

Cor de fundo

<body bgcolor="cor">

- a cor de fundo de tela.

Cor do texto padrão

<body text="cor">

- a cor padrão de todo o texto da página.

Cor dos links

<body link="cor">

- determina a cor de todos os links da página.

Cor dos links visitados

<body vlink="cor">

- determina a cor de todos os links já visitados na página.

Cor dos links ativos

<body alink="cor">

- determina a cor dos links ativos.

Por exemplo:

<body background="imagem.gif" bgcolor="cor" text="cor" link="cor" alink="cor" vlink="cor">conteúdo</body>

O exemplo seguinte determina que a cor de fundo do site será amarela, o texto será preto, os links ainda não visitados serão azuis, os links já visitados serão roxos, e os links ativos serão verdes:

<body bgcolor="yellow" text="black" link="blue" vlink="purple" alink="green">conteúdo</body>

7. Tamanho da fonte
A maneira mais fácil de mudar o tamanho da fonte é utilizar as tags:

<H1>texto tamanho H1</H1>
<H2>texto tamanho H2</H2>
<H3>texto tamanho H3</H3>
<H4>texto tamanho H4</H4>
<H5>texto tamanho H5</H5>
<H6>texto tamanho H6</H6>

O

<H1>

deixa a letra maior que o

<H2>

, e assim por diante.

8. Alinhamento do texto
O parâmetro que deve ser utilizado é o ALIGN, seguido de:

LEFT - se você quiser que o texto fique alinhado à esquerda.
RIGHT - se você quiser que o texto fique alinhado à direita.
CENTER - se você quiser que o texto fique alinhado ao centro.

Por exemplo:

<H1 align="left">texto alinhado à esquerda</H1>
<H2 align="right">texto alinhado à direita</H2>
<H3 align="center">texto alinhado ao centro</H3>

9. Negrito

[b][/b]

- tudo o que for escrito entre essas duas tags virá em negrito

10. Itálico

<I></I>

- tudo o que for escrito entre essas duas tags virá em itálico

11. Sublinhado

<U></U>

- tudo o que for escrito entre essas duas tags virá sublinhado

12. Subscrito

<sub></sub>

- essas tags rebaixam o texto. Por exemplo: H2O. Ficaria: H2O.

13. Sobrescrito

<sup></sup>

- essas tags elevam o texto. Exemplo: 400 m2. Seria: 400 m2.

14. Formatação de fonte

<font face="tipologia" size="tamanho" color="cor"></font>

- determina o tipo da fonte, o tamanho e a cor do texto que vier escrito entre essas tags.

Por exemplo:

<font face="arial" size=6 color="red">O texto será escrito em vermelho, com fonte arial e tamanho 6.</font>

OBS: O tamanho da fonte pode variar de 1 a 7, sendo 1 a menor fonte, e 7, a maior.

15. Parágrafo

<P></P>

- essas tags delimitam um parágrafo no texto. É possível, neste caso, não fechar a tag

<P>

, ou seja, omitir o

</P>

, sem prejudicar o resultado final.

16. Alinhamento de parágrafo

<P align="left">
<P align="right">
<P align="center">

17. Quebra de linha

- quebra linha. Mas, ao contrário do parágrafo, não é deixada uma linha em branco antes da próxima.

18. Alinhamento de bloco de texto

<div align="…"></div>

- configura o alinhamento de um bloco todo de texto. O alinhamento pode ser à esquerda (left), à direita (right) e ao centro (center).

19. Centralização de texto

<center></center>

- outra maneira de centralizar o texto

20. Régua horizontal

<HR>

- parâmetro utilizado para colocar linhas horizontais em uma página. Você pode determinar a altura, a largura e o alinhamento da linha.

Por exemplo:

<hr size=8 align="center" width=75%>

Size - configura a espessura da linha
Width - configura a largura da linha (pode ser em porcentagem ou em pixels)
Align - determina o posicionamento da linha

21. Imagem

<img>

- é a tag necessária para se colocar uma imagem na página. A tag <img> pode vir acompanhada de diversos parâmetros:

Localização da imagem

<img src="nomedaimagem">

- especifica o endereço da imagem a ser colocada na página. Normalmente, as imagens têm terminação .gif ou .jpg.

Texto alternativo

<img alt="textoalternativo">

- o texto acompanhado do alt aparecerá quando o usuário passar o cursor em cima da imagem. É uma legenda alternativa para a imagem.

Alinhamento de imagem

<img align="alinhamento">

- alinha a imagem à esquerda (left), direita (right), ao centro (middle), no topo da página (top) ou no pé da página (bottom).

Borda da imagem

<img border="tamanhodaborda">

- especifica o tamanho da borda, em pixels. Os números têm de ser inteiros.

Altura em pixels

<img height="alturadaimagem">

- especifica a altura da imagem, tanto em pixels como em porcentagem.

Largura em pixels

<img width="larguradaimagem">

- especifica a largura da imagem, tanto em pixels como em porcentagem.

Espaçamento horizontal

<img hspace="espaçohorizontal">

- especifica um espaço em branco a ser deixado entre as bordas esquerda e direita da imagem, em pixels. Ou seja, os textos que forem escritos ao redor da imagem não ficarão grudados nela.

Espaçamento vertical

<img vspace="espaçovertical">

- especifica um espaço em branco a ser deixado entre o topo e o pé da imagem, em pixels. Ou seja, os textos que forem escritos ao redor da imagem não ficarão grudados nela.

Por exemplo:

<img src="computador.gif" alt="Pentium 3" align="right" border=1 height=180 width=120 hspace=10 vspace=10>

- a imagem estará alinhada à direita, e toda vez que um usuário passar o cursor em cima dela, aparecerá o texto "Pentium 3".

22. Hipertexto

Referência de hipertexto

<a href="http://endereçodapágina.htm">Aqui vai o nome ou o endereço da página para a qual você está apontando o link</a>

- estas tags criam links para outras páginas da Internet.
Por exempo: para colocar um link do Brasil Online na sua página, escreva:

<a href=http://www.bol.com.br>Brasil Online</a>

.
Um visitante na sua página que clicar sobre o link Brasil Online será levado à página principal do site.

Referência de hipertexto com imagem

<a href=http://www.bol.com.br><img src="bol.gif border=0 alt="BOL"></a>

- neste caso, em vez de colocar o link em um texto, você estará colocando o link em uma imagem.

Links na mesma página (âncora)

<a name=região>

- este atributo permite que você crie links internos na mesma página. Por exemplo:

<a href="#explicação">Saiba mais sobre o meu site</a>
.
.
.
<a name="explicação">O meu site</a>

No exemplo acima, "Saiba mais sobre o meu site" está vinculado à região chamada "O meu site", ou seja, quando um usuário clicar sobre "Saiba mais sobre o meu site", vai ser levado para a região, na mesma página, chamada "Meu site". O caracter "#" indica que se trata de um link em uma mesma página.

Link para e-mail

<a href=mailto:username@provedor.com.br>Mande-me um e-mail</a>

- Essas tags permitem que os visitantes mandem e-mail para o autor do site, ao clicar no endereço.

Leia mais