Enfim...

Enfim a tão esperada notícia finalmente está pronto meu projeto o:

Acesse o link:

Palavras Autênticas

Contador para blogs

Temos muitas opções de contadores na web então temos que decidir qual usaremos:

• Google Analytics
• SiteMeter
• GetClick
• Bravenet
• Histats

Eu utilizo o Google Analytics e o Histats recomendo-os são ótimos.
Mais tarde estarei publicando tutoria sobre o analytics.

O histats é gratuito.

Caixa de busca do Blogger

Uma caixa de busca do Google, personalizável e que permite oferecer aos leitores uma pesquisa mais refinada, abrangendo não só os nossos posts, mas também toda a web, a lista de links e o BlogRoll.

Para adicioná-la:

1-Passo: Vá em elementos de páginas.
2-Passo: Clique em adicionar gadgets.
3-Passo: Escolha o gadget caixa de pesquisa e configure.

Colocando imagens nos marcadores do blog

Uma coisa bem fácil, mas eu acho essêncial. Como mudar ou colocar imagens nos marcadores do blog.

Procure este trecho:

.sidebar ul
{list-style:none;
margin:0 0 0;
padding:0 0 0;
}

.sidebar li
{margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}

E acrescente logo abaixo:

.sidebar ul li {
list-style: disc url(link da imagem);
vertical-align: top;
padding: 0;margin-left: 15px;
}

Para que o marcador da lista seja um quadrado, basta colocar:
list-style: square;

Um círculo vazio:
list-style: circle;

Dica: Para voçê escolher, bullets e setas entre nesses sites:

SuperTráfego
AnimadosGifs

Como inserir um formulário de contato no seu blog

Quer receber contatos de pessoas atráves do seu blog!
Existem vários sites que fazem esses formulários de contado grátis, você só precisa fazer um cadastro, copiar o código e colocar no seu blog, entre na página layout, clique em adicionar gadget, escolha a opção html/javascript e cole o código.

Logo abaixo sites que oferecem gratuitamente esse tipo de serviço:

• AnderForm
• Wufoo
• Contactify
• Email Me Form

Leiam isso para aprender a mexer com o wufoo:

• Wufoo - um formulário de contato para o blogger

Abraços.

Gerador de logotipo no estilo do Twitter

Uma dica para quem busca Gerador de logotipos.


O site Twitlogo gera uma imagem, usando as mesmas fontes e cores do Twitter.

Pra criar seu logotipo, basta escrever o texto no local indicado, clicar em advanced options e configurar. Depois, clique em make e depois faça o download da imagem.

Obrigado pela visita!

Fonte: Twitter Brasil

Twitter Widgets para Blogger

Esse Widget serve para que você possa mostrar as atualizações do twitter na coluna lateral.

Para aderir basta utilizar esse instalador:

• Widget oficial do Twitter para o Blogspot

Para você exibir a contagem dos seus seguidores no Twitter use o:

• TwitterCounter

Que disponibiliza diversos botões estatísticos no estilo FeedBurner, e também códigos prontos para serem usados nas suas próprias personalizações.

Pacote de ícones para RSS/Feed

Um pacote com muitos e variados ícones RSS/feed. Têm de todos os tipos, tamanhos, formatos e cores, você irá encontrar ícones para atender a todas as suas necessidades. Aproveitem.

Para baixar o pacote, Acesse:

Download - Pacote de Ícones RSS/Feed

Abraços.

Colocando a favicon no blog

O que é Favicon

Favicon (Favorite Icon, em inglês) é aquele pequeno ícone que aparece na barra de endereços do navegador e/ou na aba do navegador, além de ser exbido quando o usuário adiciona o site aos favoritos.

Criando e inserindo o seu Favicon

Para criar o seu Favicon você irá precisar de duas imagens no tamanho de 16 x 16 pixels uma no formato PNG e outra convertida para o formato ICO.

1- Para criar a imagem que você irá utilizar como favicon acesse o site: Favicon.cc ou então utilize um programa Adobe Photoshop ou Adobe Fireworks se a imagem for feita no programa você terá que converte-la para o formato ICO para fazer isso acesse: http://iconverticons.com/ ou então http://www.favicon.ru/en

2- Hospede as imagens no site Image Boo Hosting (saiba mais como hospedar suas imagens) e anote o endereço das duas imagens.

3- Vá em "Layout" e depois em "Editar HTML" e localize a linha ]]></b:skin>; (Dica: utlize CTRL +F do teclado para encontrar tags no HTML do template) e logo após cole o seguinte trecho, adaptando o endereço dos arquivos que você acabou de hospedar:

<link href='URL_DA_IMAGEM_ICO' rel='shortcuticon'/>

<link href='URL_DA_IMAGEM_PNG' rel='shortcuticon'/>

<link href='URL_DA_IMAGEM_PNG'rel='apple-touch-icon'/>

<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon'type='image/x-icon'/>

Esse código irá funcionar em todos os navegadores!

Se o código acima não funcionar no seu template utilize-o assim:

link href='URL_DA_IMAGEM_FORMATO_ICO.ico' rel='shortcut icon'/
link href='URL_DA_IMAGEM_FORMATO_PNG.png' rel='shortcut icon'/

4- Visualize se estiver tudo ok, salve.

Hospedagem gratuita de arquivos

Uma dúvida frequente, principalmente prá quem está começando, é saber onde hospedar arquivos. Um blog precisa de imagens, links, documentos e até música. Existem diversos sites que oferecem este serviço e alguns deles já chegam a oferecer 5 Gb de armazenamento.

Vamos à eles:

Imagems:

• http://www.flickr.com/
• http://picasaweb.google.com/home
• http://imageshack.us/
• http://s566.photobucket.com/

Músicas:

• http://www.esnips.com/
• http://www.mp3tube.net/

Arquivos em geral:

• http://4shared.com/
• http://skydrive.com/home/welcome.aspx

Leia também: Como hospedar imagens

Google Webmaster Tools

O que é Google Webmaster Tools

É um serviço para webmasters do Google.

Para acessar: http://www.google.com/webmasters/tools/

Basta fazer o login usando a conta do Google, inserir uma tag no seu blog para comprovar a propriedade do mesmo e depois seguir os relatórios. É interessante porque dá para saber se seu site ou blog está indexado ao Google,quantos links apontam para ele, possíveis erros nas urls e muito mais. É muito interessante aproveitem.

Sitemap para o blogger

Vamos falar um pouco sobre Search Engine Optimization (SEO), e aprender o que é sitemap e a criar um sitemap para o seu blogger.

O que é Sitemap

Sitemap é um arquivo tipo XML com metadados como (a última atualização, frequência de alterações, relevância a outras URLS etc). de um site ou blog que são relevantes para motores de busca, otimizando os resultados de uma busca.

Criando o seu Sitemap

1- Passo: Cadastrar o seu blog no Google Webmaster Tools. (saiba mais)

2- Passo: Clique em "Verificar" e escolha "Adicionar uma meta tag".

3- Passo: Copie o código fornecido e entre em "Layout/Editar HTML" do seu blog e cole-o logo apos a tag <head>.

4- Passo: Volte ao webmaster e finalize o processo de verificação, feito isto clique em "adicionar um sitemap" no menu lateral.

5- Passo: Escolha a opção "Incluir Sitemap Geral da Web" No campo onde pede URL coloque:

atom.xml?redirect=false&start-index=1&max-results=100

Para inserir mais de 100 posts, você terá que que trocar o start-index para 101 se você publicou mais de 200 postagens ai você terá que criar um terceiro sitemap com start-index de 201 e assim por diante.

6- Passo: Clique em "enviar"

Pronto!

Hacks para personalizar a caixa dos comentários do blogger

Quando estava editando o meu layout procurei por códigos que me ajudassem a deixar minha caixa de comentários personalizada e com minha cara. Foi ai que eu achei algums códigos HTML que foram uma mão na roda e como ta na web e hora de compartilhar com vocês através do Pelo Estilo.

Destacar a área dos comentários

1- Faça login com sua conta da Google no Blogger, vá em “Layout”, procure por editar html e clique em expandir modelos de widgets.
2- Agora encontre o código abaixo no seu html. Para localizar utilize (Crtl+F) do seu teclado.
Para encontrar seus ícones recomendo os sites: Icon Archive e iconspedia

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<imgsrc='http://IMAGEM.png'/>
<b:if cond='data:post.numComments == 1'> 1Comentário: <b:else/>
<data:post.numComments/><data:commentLabelPlural/>:
</b:if>
</h4>

Destacando os comentários do autor

Faça login com sua conta da Google no Blogger, vá em “Layout”, procure por editar html e clique em expandir modelos de widgets.

Para destacar os comentários do autor do blog procure pelo código abaixo:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" +data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:ifcond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<spanclass='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='commentpermalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Inclua as partes que está em negrito

Dica: copie ele inteiro e cole entre as tags <dl id='comments-block'> e </dl>

Depois procure pela área do CSS, entre as tags <head></head> e cole o código abaixo:

. blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #c0c0c0;
background:#f5f5f5;
}

Mude a cor e o plano de fundo como quiser.

Alterando o link do autor

Para que seus comentários não sejam direcionados para o seu perfil do Blogger, procure pelo código abaixo, inserindo a linha em destaque.

<dt class='comment-author'expr:id='&quot;comment-&quot; +data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<aexpr:href='data:blog.homepageUrl'>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<aexpr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>

Inserindo icones dos comentários do autor

Procure pelo mesmo código anterior e insira a linha em negrito, substtuindo a url

<dt class='comment-author'expr:id='&quot;comment-&quot; +data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<aexpr:href='data:blog.homepageUrl'>
<imgsrc='http://URL_DA_IMAGEM/Imagem.png'/>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<aexpr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>

Para aprender a habilitar a caixa de comentários no blogger, leia: Formulário de comentários no blogger

Sugiro as leituras:

Personalizando a caixa de comentários do Blogger

Personalizar caixa de comentários do Blogger

Wufoo - Formulário de contato

Quando estava construindo meu blog o “Pelo Estilo”, procurei na web por um formulário de contato que fosse realmente bom e que atendesse as minhas expectativas e encontrei o Wufoo. Para fazer a configuração no site do seu novo formulário é um pouco complicado e é tudo em inglês, mas também não é um bicho de sete cabeças.

Vou explicar para vocês como proceder para criar o seu formulário.

O cadastro é simples. Clique em "Let's go make One". Agora aparecerá a página da configuração do lado esquerdo, aparecerão diversos ícones com suas respectivas descrições. Nada mais são do que os itens que poderão ser adicionados ao formulário. Para edita-lós, basta clicar sobre eles (o fundo ficará azul). Aconselho você a ir adicionando e testando, pois fica a critério de cada um quais os campos que serão incluídos. Para salvar, clique no ícone verde e para deletar, clique no ícone vermelho.

Dica: Para deixar os campos com requerimento obrigatório marque required.

Uma vez terminada a edição, clique em save forms. Você será direcionando à esta página

Escolha a segunda opção. A partir daqui, configure em qual e-mail você deseja receber as mensagens, clicando em notifications. Para obter o código, clique em code.
Dica: O tema padrão poderá ser alterado. Clique na aba themes.

Formspring.me – Uma entrevista livre

Surgiu agora uma nova onda na web se trata do Formspring.me. E um site onde você cria um perfil fazendo um cadastro gratuito ou mesmo usando sua conta do Facebook, onde seus visitantes fazem perguntas diversas e você as responde. E suas perguntas são moderadas e se respondidas, são livres para todos visualizarem.



Acesse: Formspring.me

Quer me perguntar, então acesse: http://www.formspring.me/RamonPE

Background Labs - Imagens de fundo para o seu blog

Quer ter uma imagem de fundo personalizada e atual como a usada aqui no Pelo Estilo. Uma dica para você é o Background Labs, é um site de fácil navegação (apesar de ser em inglês) que oferece uma diversidade de imagens para serem usadas no fundo do seu blog, divididas por tema e por cores, você escolhe.

Veja:

Clique na imagem para ampliar

Veja um exemplo de fundos abstratos:

Clique na imagem para ampliar

Acesse: http://www.backgroundlabs.com/

Para inserir uma dessas imagens de fundo no seu blog:

1- Salve no seu HD, hospede em algum site que utiliza esse serviço, sugestão: http://imageshack.us/ ou então http://photobucket.com/, depois...
2- Entre em "Layout" depois "Editar HTML". 3- Localize "background:" dentro do "body {" do seu template. 4- background: url(url da imagem) repeat;
No lugar da "url da imagem" você insere o endereço da imagem que você escolheu, salvou e hospedou. Pronto.

Sugiro que você leia (principalmente se você não entendeu muito bem como alterar o plano de fundo):

Como mudar o plano do fundo do blog

Como hospedar imagens

Como mudar o plano do fundo do blog

Agora vou falar de um assunto muito pesquisado por blogueiros principalmente pelos novatos que é: Como alterar o plano de fundo do blog.

Para mudar o plano de fundo do seu template, procure por Body no código CSS e alterar o que está em Background:

Dica: Utilize Ctrl + F do teclado para encontrar tags no HTML.

body {
background-color: $bgcolor;}

Se você deseja alterar somente a cor, faça como no exemplo: background-color e coloque o código da cor (hexadecimal, como: #ffffff), ficando assim:

body{background-color: #ffffff;

Se deseja colocar uma imagem:

background: url(url da imagem) repeat;

Veja as maneiras como você pode estipular o comportamento da imagem do background:

repeat; repete por todo o elemento
repeat-y; repete na vertical
repeat-x; repete na horizontal
no-repeat; não repete
background: url(url da imagem) no-repeat top left; não repete e se apresenta no topo à esquerda.
Para que a imagem fique fixa na tela:background-attachment: fixed;
Para que a imagem role com a tela:background-attachment: scroll;

Como criar botão para seu blog

 
Uma dica essencial para quem quer deixar seu blog mais funcional e organizado. 1- Passo: Para criar seu botão acesse: clique aqui, ou escolha um dos sites abaixo todos são para criação de botões:

Buttom Maker
Online Button Maker
Publicons.de
Imaxenes
Brilliant Button Maker

2- Passo: Depois de criado o seu botão, faça o upload no site que você utiliza para hospedar suas imagens como o ImageShack. (saiba mais) 3- Para inserir o botão no seu blog, acesse: http://maisblog.com/utilitarios/gerabutton.htm Para inserir o botão no blogger, vá em "Editar HTML" depois em html/javascript

Como posicionar os widgets no Blogger

Vou dar uma dica sobre como posicionar os widgets na sidebar, é uma dúvida muito comum para quem edita HTML e usuários novatos.

Para utilizar é só você substituir o "código", pelo código que será inserido na sidebar no widget "Html/Javascript".

Para Centralizar:

<div align="center">código</div>

ou simplesmente

<center>código</center>

Para posicionar à esquerda:

div align="left">código</div>

ou simplesmente

<left>código</left>

Para posicionar à direita:

<div align="right">código</div>

Exemplo de como posicionar o widget no centro:

Clique na imagem para ampliar

Como colocar marcadores no blog

Vamos aprender a colocar o gadget marcadores no blog ou nos posts tanto faz.

O que é o gadget marcador

É esse gadget que irá definir o menu do seu blog e classificar seus artigos. O marcador é conhecido também como etiqueta, label em inglês. Exemplo eu público algo como um Hack, ai é só eu colocar no marcador "Hacks". Isso irá facilitar a navegação dos visitantes. Veja um exemplo esse “Índice” são os diversos marcadores de um blog.

Inserindo o gadget marcadores

Para inserir o gadget marcadores, vá em "Layout" no painel do blogger e clique em "adicionar gadget" escolha "Marcadores". Veja:

Clique na imagem para ampliar

Inserindo marcadores nos posts

Para inserir um novo marcador, basta inserir o nome do marcador na caixa em branco que fica embaixo do editor de textos do blogger. Veja:

 Clique na imagem para ampliar

Inserido um marcador ele poderá ser usado para futuras postagens. Para visualizá-los basta clicar em "Mostrar Tudo" do lado da caixa onde escrevemos o título do marcador.

Temos também a opção de colocar marcadores em artigos já publicados sem precisar ir selecionando um por um, vá em "Editar postagens" e procure por "ações de marcador" (1), também possível visualizar os marcadores embaixo do título da postagem (2):

Clique na imagem para ampliar