09 abril 2010
22 janeiro 2010
Contador para blogs
Eu utilizo o Google Analytics e o Histats recomendo-os são ótimos.
Mais tarde estarei publicando tutoria sobre o analytics.
O histats é gratuito.
Por Ramon Ricardo 3 comentários
Marcadores: Estatísticas
18 janeiro 2010
Caixa de busca do Blogger
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.
Por Ramon Ricardo 0 comentários
Marcadores: Widgets
Colocando 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
Por Ramon Ricardo 4 comentários
Marcadores: Layouts
14 janeiro 2010
Como inserir um formulário de contato no 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:
Abraços.
Por Ramon Ricardo 1 Comentário
Marcadores: Divulgação, Widgets
Gerador de logotipo no estilo do Twitter
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
Por Ramon Ricardo 0 comentários
Marcadores: Twitter
10 janeiro 2010
Twitter Widgets para Blogger
Para aderir basta utilizar esse instalador:
Para você exibir a contagem dos seus seguidores no Twitter use o:
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.
Por Ramon Ricardo 0 comentários
05 janeiro 2010
Pacote de ícones para RSS/Feed
Para baixar o pacote, Acesse:
Download - Pacote de Ícones RSS/Feed
Abraços.
Por Ramon Ricardo 0 comentários
Colocando a favicon no blog
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.
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.
Por Ramon Ricardo 2 comentários
Hospedagem gratuita de arquivos
- http://www.flickr.com/
- http://picasaweb.google.com/home
- http://imageshack.us/
- http://s566.photobucket.com/
Arquivos em geral:
Leia também: Como hospedar imagens
Por Ramon Ricardo 0 comentários
Marcadores: Imagens, Utilidades
03 janeiro 2010
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.
Por Ramon Ricardo 0 comentários
Marcadores: Utilidades
Sitemap para o blogger
O que é Sitemap
Por Ramon Ricardo 0 comentários
Marcadores: Seo, Utilidades
Hacks para personalizar a caixa dos comentários do blogger
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'>Destacando os comentários do autor
<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>
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'>Inclua as partes que está em negrito
<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>
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 {Mude a cor e o plano de fundo como quiser.
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #c0c0c0;
background:#f5f5f5;
}
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'>Inserindo icones dos comentários do autor
<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>
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'>Para aprender a habilitar a caixa de comentários no blogger, leia: Formulário de comentários no blogger
<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>
Sugiro as leituras:
Personalizando a caixa de comentários do Blogger
Personalizar caixa de comentários do Blogger
Por Ramon Ricardo 3 comentários
Marcadores: Códigos/Scripts, Hacks
Wufoo - Formulário de contato
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: O tema padrão poderá ser alterado. Clique na aba themes.
Por Ramon Ricardo 2 comentários
Marcadores: Utilidades
02 janeiro 2010
Formspring.me – Uma entrevista livre
Acesse: Formspring.me
Quer me perguntar, então acesse: http://www.formspring.me/RamonPE
Por Ramon Ricardo 1 Comentário
Marcadores: Twitter, Utilidades
Background Labs - Imagens de fundo para o seu blog
Acesse: http://www.backgroundlabs.com/
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):
Por Ramon Ricardo 0 comentários
Marcadores: Layouts, Primeiros Passos
Como mudar o plano do 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;
Por Ramon Ricardo 1 Comentário
01 janeiro 2010
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
Por Ramon Ricardo 1 Comentário
Marcadores: Botões/Banners, Primeiros Passos
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.
Por Ramon Ricardo 1 Comentário
Marcadores: Primeiros Passos, Widgets
Como colocar marcadores no blog
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.
Por Ramon Ricardo 4 comentários
Marcadores: Primeiros Passos, Widgets