Pelo Estilo

Ajuda para os blogues

2016-08-04T06:31:00.000-07:00

ola para eu continuar a ajudar os bloguers preciso de uma contribuição de R$100,00 quem puder ajudar e contribuir para que os blogues continuem na web com a minha ajuda é só depositar na conta
agencia 2940 / 013 cc: 00039484-8

Enfim...

2010-04-09T20:34:00.000-07:00

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

Acesse o link:

Palavras Autênticas

Contador para blogs

2010-01-22T17:11:00.001-08:00

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

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

2010-01-18T17:21:00.000-08:00

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

2010-01-18T17:16:00.000-08:00

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

2010-01-14T17:35:00.000-08:00

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:

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

2010-01-14T17:30:00.001-08:00

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

2010-01-10T16:27:00.001-08:00

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

2010-01-05T09:04:00.001-08:00

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

2010-01-05T09:02:00.000-08:00

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:

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

2010-01-05T08:58:00.000-08:00

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:

Músicas:

Arquivos em geral:

Google Webmaster Tools

2010-01-03T20:07:00.001-08:00

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

2010-01-03T19:59:00.001-08:00

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

2010-01-03T19:46:00.001-08:00

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='"comment-" +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='"comment-" +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

2010-01-03T19:02:00.001-08:00

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

2010-01-02T19:01:00.001-08:00

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

2010-01-02T18:34:00.001-08:00

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

2010-01-02T18:26:00.001-08:00

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

2010-01-01T19:38:00.001-08:00

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

2010-01-01T19:03:00.001-08:00

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

2010-01-01T18:48:00.001-08:00

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

Administrando a URL do seu blog

2009-12-31T19:54:00.001-08:00

Nesse artigo vamos aprender a escolher, trocar e corrigir a URL do seu blog.

Escolhendo a URL certa para seu blog

Muitos usuários às vezes ficam em dúvida na escolha da URL para seus blogs. Então vou dar dicas de como escolher a URL certa, pois é de grande importância no blog.
A URL do seu blog tem que ser: Original, criativa, interessante, curta e fácil de memorizar e ter a ver com o tema do seu blog.
O ideal é que a URL do seu blog seja o nome do seu blog, pois seus leitores irão ler o nome do seu blog e por ele irão definir qual será o conteúdo presente no blog. Um exemplo é o meu blog “Pelo Estilo” tudo se remete a palavra estilo, no caso que tem o sentido de ter uma maneira de dizer escrever, ou seja, o meu jeito de escrever dando dicas sobre criação de blogs e tudo mais…

Alterando o domínio do seu blog

Vejam que o final da URL de todos os blogs do blogger terá sempre o final blogspot.com que significa o domínio onde o blog está hospedado.

Para conhecer a plataforma blogger e aprender a criar o seu blog. Leia:

É possível você mudar o domínio do seu blog no caso se tiver sido criado no blogger iria trocar blogspot.com por .com, .com.br, .net e etc.. Fazendo isso seu endereço ficará ainda mais fácil de memorizar aumentando as visitas e deixando a URL mais elegante e profissional. Existem serviços específicos na web que fazem essa mudança de domínio é uma coisa fácil e barata um exemplo Locaweb eu ainda não criei artigos sobre como fazer isso mais é bem fácil.

Alterando a URL do seu blog no blogger

Algumas vezes queremos trocar a URL do blog mantendo o blog como está. E também sem trocar o domínio no caso do blogger o blogspot.com e também quando ocorre o acidente de ter digitado a URL errada na hora que você está criando seu blog.
No blogger não tem rodeios é muito fácil essa troca, também tem a opção de escolher um domino personalizado com essa troca você não irá perder visitas, pois os mecanismos de buscas são avisados é tudo automático.
Entre com sua conta da Google no blogger, clique em “Configurações” depois em “Publicação” e onde está pedindo “Endereço do blogspot” você digita sua nova URL

Clique na imagem para ampliar

Para acompanhar todos os artigos dessa serie, leia:

Escolhendo o tema certo para você e para os leitores

Sobre a criatividade no blog

KeyWord Tool – Ferramenta de Palavras-Chave

2009-12-30T18:03:00.001-08:00

Vamos conhecer uma ferramenta da Google: Google Adwords Keyword Tools é uma ferramenta voltada para Adwords, mas também muito útil para SEO na hora da escolha de keywords, ele mostra o grau de competição pela keyword e o volume de buscas, complementando o google trends, mas nesse caso com uma quantidade muito maior de resultados.

Resumindo: Ele mostra o grau de competição pela keyword e o volume de buscas, com uma grande quantidade de resultados.
Dica: Utilize essa ferramenta para definir a descrição do seu blog.

Acesse: https://adwords.google.com.br/select/KeywordToolExternal

Leia também:

Google Trends – ferramenta para pesquisa de volume de buscas

Meta Tags - Descrição e palavras chave

2009-12-30T17:44:00.001-08:00

Vamos ver o que são meta tags e aprender a implantá-las.

O que são

“É um elemento do código do HTML em um site, usado pelos sites de busca para facilitar a leitura do conteúdo de um site. A maioria das Meta-Tags são incluídas dentro do código HTML, no “cabeçalho” e não são visualizados pelos usuários. As Tags mais importantes são: título, descrição e de palavras-chave, que ajudam a passar informações aos robôs dos Sites de busca. Existem regras diferentes para cada mecanismo de busca, em relação a quantos caracteres essas tags devem conter ou em relação à maneira que elas são formatadas. As Meta Tags já tiveram funções importantes na relevância dos resultados de busca, mas atualmente nos principais buscadores influenciam apenas o texto do resultado, sem ter qualquer influência no posicionamento.”

Fonte: jumpmedia

Como Implantar as meta-tags

Atualmente se fala muito em SEO (Search Engine Optimization) ou em português otimização de sites, este é um nome bonito que gera mais visitas para o seu blog com bons resultados.

É bem fácil veja:

<b:if cond='data:blog.pageType == "index"'> <meta content='descricao do blog' name='description'/> <meta content='dicas,template' name='keywords'/> <meta content='seu nome' name='author'/> </b:if>

Basta você escrever a descrição do blog, seu nome, e colocar as palavras que tem alguma relação com seu conteúdo. Nas keywords separe os itens com vírgulas.

Dica: Para você saber as frases ou o conjunto de palavras mais pesquisadas, Leia:

Assim você poderá criar uma boa descrição para o seu blog!

Para colocar o código acima em seu blog

Entre em Layout/Editar HTML, clique em expandir modelos de widgets e coloque o código entre:

<b:include data='blog' name='all-head-content'/> e <title><data:blog.pageTitle/></title>

Ficará assim:

<b:include data='blog' name='all-head-content'/> <b:if cond='data:blog.pageType =="index"'> <meta content='descricao do blog' name='description'/> <meta content='dicas,template' name='keywords'/> <meta content='seu nome' name='author'/> </b:if> <title><data:blog.title/></title>

Google Trends – ferramenta para pesquisa de volume de buscas

2009-12-30T17:26:00.001-08:00

Vamos conhecer uma das ferramentas do google: O Google Trends é uma ferramenta para pesquisa de volume de buscas, onde você pode pesquisar até cinco keywords ou frases simultaneamente, basta utilizar vírgulas para separá-las, e o resultado será apresentado na forma de gráfico. Alguns trechos do gráfico são marcados e relacionados com algum evento.

Acesse: http://www.google.com/trends

Experimente também:

O Google Suggest, da sugestão de buscas, basta escreverem a primeira keyword e as sugestões aparecerão.