SemNome

Como listar os últimos posts no Blogger

2011-02-03T16:33:00.002-03:00

[Liste seus links e os de quem você quiser!]

Tem procurado formas de listar postagens recentes de um blog, mas sem sucesso? Tem buscado alguma maneira de listar as últimas postagens de uma categoria?

Esse post poderia facilmente se chamar "Listar postagens num post", "Página de categoria personalizada" ou "Widget Posts recentes".

Ao contrário do Banner de posts recentes, ou dos widgets de feeds, esse script tem algumas funções a mais:

Widgets com listagens das últimas postagens
Widgets com listagens das últimas postagens por categoria
Lista de postagens dentro de um post
Lista de postagens de uma categoria dentro de um post

Ou seja, esse script é um script completo de listagem de posts para Blogger (Blogspot). Nesse artigo, ensinarei como utilizá-lo e mostrarei alguns exemplos:

Atenção! Caso você esteja lendo esse post por feed, é possível que as listas não apareçam.

O script

O primeiro passo para utilizar o script é Ir em Editar HTML e adicionar a seguinte linha antes de </head>

<script src='http://semnomenet.googlecode.com/files/posts_categoria.js' type='text/javascript'></script>

Após isso, você pode usar as funções em qualquer lugar: postagens, código HTML do blog ou dentro de um widget. Basta usar as funções do próximo tópico.

Funções

O script é baseado em duas funções básicas: listar postagens do blog e listar postagens de uma categoria. A sintaxe das funções é:

lista_posts(num, [blog]); //Lista de posts do blog inteiro
lista_categoria(cat,num,[blog]); // Lista de posts por categoria

num – número de itens a aparecer na lista
cat – nome da categoria a ser listada
[blog] – Url do blog (opcional). Caso não seja adicionada, irá listar os posts do blog atual.

Uso do script

» Listar os últimos posts do blog

<script type="text/javascript">
lista_posts(10);
</script>

Exemplo: Os 5 últimos posts do SemNome foram:

» Listar os últimos post de um blog qualquer

<script type="text/javascript">
lista_posts(10,"URL_DO_BLOG");
</script>

Exemplo: Os 3 últimos posts do Blog Nerd foram:

» Listar os últimos posts de uma determinada categoria do blog

<script type="text/javascript">
lista_categoria("CATEGORIA",10,"URL_DO_BLOG");
</script>

Exemplo: Os 7 últimos posts da categoria "Blog" do SemNome foram:

» Listar os últimos posts de uma categoria de um blog qualquer

<script type="text/javascript">
lista_categoria("CATEGORIA",10,"URL_DO_BLOG");
</script>

Exemplo: os 5 últimos tutoriais do Photoshop Tutoriais com a categoria "Tratamento" (tratamento de fotos) foram:

* Uma coisa a se observar é que, caso tenha menos postagens que o solicitado, ele só irá listar as que existem.

» Listar Posts com duas categorias

Caso queira listar artigos que tenham duas categorias, basta usar o mesmo script acima, só que citando as duas categorias, sem espaços, separadas por uma barra:

<script type="text/javascript">
lista_categoria("Blog/Tutoriais",5);
</script>

O exemplo acima lista os últimos 5 artigos do SemNome que tenham as duas (não uma das duas) categorias: Blogs e Tutoriais:

E então, o que você achou? Acha que deve ser mudado algo? Tem alguma sugestão de função para isso?
Em breve serão postados mais widgets baseados nesse script. Aguarde!

Como transformar vários feeds em 1

2011-01-26T10:29:00.001-03:00

Seja para ping ou para widgets, às vezes sentimos a necessidade de unir os feeds. A minha necessidade ocorreu quando criei a comunidade SemNome no diHITT, então criei o feed SemNome Group.

Se você tem uma comunidade no diHITT ou quer fazer um widget com o feed de vários blogs, provavelmente é isso que você estava procurando. Vamos ao tutorial:

1 - Entre em http://pipes.yahoo.com/ e clique em “Create a pipe”. Faça login se necessário.

2 - Nessa página, arraste da barra lateral 2 módulos:

Source -> Fetch feed

Operators -> Sort

3 - Ligue Fetch Feed ao Sort e o Sort ao Pipe Output:

4 - No Fetch Feed, clique no “+” ao lado de URL, até ter o número de campos desejados. Adicione as URLs dos seus feeds. No meu caso, eu coloquei 3:

Nota: Não coloque muitos itens de feed, senão o Yahoo Pipes não rodará a pipe. Eu limitei a 1 item para cada feed:

http://semnome.net/atom.xml?redirect=false&max-results=1
http://www.blognerd.net/atom.xml?redirect=false&max-results=1
http://www.toosco.net/atom.xml?redirect=false&max-results=1

5 - No campo Sort, deixe as opções em “Sort by item.pubDate in descending order”:

6 - Clique em untitled e altere para o título de Feed desejado.

7 - Clique em Save

8 – Após salvar, clique em “Run pipe”.

Veja como a nossa ficou (Clique aqui para ver em ação):

9 - Na Pipe, clique em “Get as RSS” (Confira o nosso aqui)

10 - Copie a URL do feed na barra do navegador.

11 - Pronto! Você pode usar esse feed com a URL dada ou usá-lo no FeedBurner.

5 dicas para ganhar links espontâneos para seu blog

2011-01-23T10:39:00.001-03:00

Link é uma palavra inglesa que significa “ligação”. Na blogosfera, essas ‘ligações’ são importantes para que leitores de outros blogs possam encontrar o seu.

Links espontâneos são aqueles que o seu blog recebe de outros blogs de forma espontânea: o blogueiro visita seu blog, acha seu artigo útil, legal ou importante e linka seu conteúdo.

Porém, esses links não são tão fáceis de conseguir, pois não basta seu conteúdo apenas ser bom: tem que ser interessante suficiente para fazer outro blogueiro criar um artigo e linkar seu conteúdo.

Hoje veremos algumas dicas para ganhar links espontâneos de outros blogs:

1 - Seja o mais original possível

Você linkaria um conteúdo que já viu em dezenas de outros blogs?
Se você não linkaria, por que outros blogueiros linkariam o seu?

Seja original no que faz, de preferência, seja o único. Assim, os leitores acharão o seu post altamente útil e linkarão.

2 - Linke outros blogs

Ao linkar e mandar visitas para outro blog, o dono deste poderá sentir a necessidade de retribuir com a mesma moeda. Assim, você “corre o risco” de ser linkado num próximo post dele.

Claro que essa tática não funcionará se o nível do seu blog é bem menor que o do blog que você quer linkar, mas tem grandes chances de funcionar caso você saiba escolher quais blogs linkar.

Mas preste atenção: Não linke só para receber links de volta. Se você fizer isso, provavelmente não terá links. Como dito na dica 1, você deve produzir conteúdo original e útil para os outros leitores.

3 - Seja útil nos comentários

Você pode – e deve – escrever comentários que complementem o que o autor disse nos seus artigos.
Que dicas você daria para complementar o que o autor disse nesse post? Quais informações ele poderia ter passado? Ao ser útil para um autor nos seus comentários, você pode ganhar as visitas dele, assim como as visitas dos leitores deles, que entrarão no seu blog pelo fato de você ter sido útil.

Assim, mais leitores encontrarão o seu blog por ser útil, o que aumenta as suas possibilidades de ganhar links.

Nota: Comente com OpenID – Jamais coloque o link no corpo de seu comentário, nem como assinatura!

4 - Escreva artigos virais

Você pode realmente ver o sucesso dos artigos virais de outros blogs. Vários artigos sobre o que está acontecendo agora, sempre com algo inédito e interessante.

Como o próprio nome já diz, esses artigos se espalham como vírus: você verá links para eles em vários blogs e redes sociais.

Porém, escrever um artigo viral não é nada fácil. Confira no artigo “Como criar um artigo viral”, do Escola Dinheiro, como fazer um.

5 - Seja visível na web

Não adianta escrever artigos originais se ninguém vai te achar por eles. Então, para dar mais visibilidade ao seu blog na web, siga as dicas:

Faça parcerias com outros blogs do mesmo nicho que o seu
Nos fóruns, adicione seu blog à sua assinatura. Assim, todas as suas postagens terão seu link.
Nas redes sociais, poste o link do seu blog no seu perfil.
Nos outros blogs, comente utilizando sua URL.
Escreva guest-posts em outros blogs do mesmo nicho que o seu.

Dê ao seu blog a visualização que ele merece, assim você ganhará mais visitantes e mais links de outros blogs. Mas tome cuidado: Não faça SPAM!

Essas são minhas dicas para ganhar mais links de outros blogs. Tem alguma outra dica a ser compartilhada? Deixe nos comentários.

Como e porque escrever guest posts

2011-01-21T11:03:00.001-03:00

Você já ouviu falar no termo guest post? Ele se refere às postagens de um blog que são escritas por outro escritor (guest = convidado).

E por que eles têm importância? Não são artigos como quaisquer outros?

Não. Eles não são. E você vai descobrir assim que ler os motivos:

Motivo 1: Os blogs do seu nicho não são seus concorrentes

Você não deve tratar blogs do mesmo nicho que o seu como concorrentes. Eles são amigos, que irão te ajudar a crescer como um blogueiro.

O conteúdo desses blogs poderá complementar o seu e servir de base para novos artigos. Além disso, os leitores deles procuram pelo mesmo conteúdo que você escreve.

Motivo 2: Você não irá perder conteúdo

Se você se perguntou “Por que eu deveria escrever um artigo para um blog se eu posso escrever para o meu?”, eis a resposta: você não perderá um artigo: você ganhará mais leitores com isso.

Você não necessita escrever algo que nunca foi dito em nenhum lugar, basta apenas escrever algo que aquele blog não tenha. Você pode escrever uma lista exclusiva, algo como uma compilação de tudo que está relacionado ao nicho.

Motivo 3: Seu conteúdo estará disponível para todos os leitores deste blog

Pense assim: se seu blog tem 1000 assinantes de feed e o blog para qual você vai escrever tem 2000, no mínimo 1000 desses são leitores em potencial.

Ao escrever para esse outro blog, o seu artigo – com seu link – será visto por esses possíveis leitores. Se o seu texto conseguir convencê-los, eles visitarão o seu blog em busca de conteúdo semelhante.

Motivo 4: Links externos

Você ganhará pelo menos um link externo para seu blog, provavelmente sem o atributo “nofollow”. Isso te ajudará com SEO, aumentando o Page Rank e a importância do seu blog para o Google: já pensou em seu blog ganhando um link num blog Page Rank 5 ou 6?

Convencido das vantagens de escrever um guest post? Que tal aprender a escrever um? Confira as dicas:

Dica 1: Não explore

Se você escrever um artigo como se fosse de seu blog e encher de links para artigos de seu blog, o dono desse blog pode acreditar que você escreveu apenas para ganhar vários links para seu blog.

Adicione o seu link apenas na área de “Autor”, no final do post. Ou melhor: mande seu link e deixe que o dono do blog coloque como ele achar melhor. Isso mostrará ao dono do blog que você não está louco por links, e sim por compartilhar conhecimento.

Dica 2: Não escreva artigos curtos

Confira quantas palavras, em média, o blog para qual você visa escrever tem nos seus posts.
Se o blog geralmente tem artigos com 1000 palavras, não escreva um artigo com menos de 500.
Você não teria o artigo postado nesse blog, perdendo seu tempo escrevendo.
Dica 3: Não escreva um artigo que já existe no blog

Tenha certeza de que o artigo que você irá escrever não tem uma versão semelhante no blog visado. Se já existir,

Dica 4: Seja impessoal

Não use a primeira pessoa do singular! Evite frases como “Como eu já disse” ou “como eu tenho feito em meus blogs”: os leitores do blog provavelmente não conhecem o seu e não conhecem você.
Ao escrever em primeira pessoa, o leitor pode achar que quem escreveu foi o dono do blog, não você.

Esses foram os meus motivos e dicas para escrever um guest post. Qual a sua opinião sobre esse tipo de postagem?

Fale-nos sobre você!

2011-01-18T23:09:00.001-03:00

[Precisamos de você!]

Olá, leitor do SemNome. O nosso blog já tem mais de 2 anos e nós queremos que ele seja o melhor para você.

Por isso, formulamos uma pesquisa rápida, para você falar um pouco sobre você, seus blogs e o que você acha do SemNome.

Preenchendo essa pesquisa – coisa que não durará mais que 5 minutos – você estará ajudando o SemNome a ajudar você.

Então, precisamos de sua opinião sincera: críticas e sugestões, não apenas elogios. Queremos saber o que nossos leitores mais desejam no blog, para assim podermos melhorar o blog.

E então, você pode nos dar 5 minutinhos do seu tempo e responder essa pesquisa rápida? Preencha o formulário abaixo e ajude o SemNome a ser um blog melhor!

Se não consegue ver o formulário, clique aqui e preencha a nossa pesquisa

Barra de compartilhamento: Personalização

2011-01-14T09:36:00.001-03:00

[Compartilhe seus artigos no Twitter, Facebook, Buzz e Orkut!]

No dia 11 de janeiro, foi postada nesse blog a Barra de compartilhamento Twitter, Facebook, Orkut e Buzz. Como prometido, vou ensinar vocês a personalizar a barra de algumas maneiras, utilizando CSS.

As personalizações dessa postagem serão basicamente relacionadas ao estilo da barra, relativamente simples.

Pronto para começar? Vamos lá!

Personalização 1: Barra na vertical

Para colocar a barra com os botões/ícones empilhados um em cima do outro, basta utilizar a barra logo antes de <data:post.body/> e colar esse código antes de </b:skin>:

.sharebar{
width:110px; /* A largura da barra, em pixels */
float:left; /* A posição da barra; left = esquerda e right = direita */
text-align:center; /* Alinha os botões no centro */
}
.sharebar .sharebutton{
clear:both;
display:block;
margin:5px auto;
}

Visualize para ver se está tudo OK e salve o modelo.

Personalização 2: Barra com fundo (não transparente) e borda

Essa personalização pode ser feita em qualquer modelo da barra. Cole isso antes de </b:skin>:

.sharebar{
padding:5px; /* espaçamento interno */
margin:5px; /* margens ao redor */
background:#CCCCCC; /* Cor de fundo */
border:1px solid #999999; /* Largura, tipo e cor da borda */
}

Personalização 3: Efeito mouseover na barra horizontal

Nesse efeito, os ícones crescem ao passar o mouse por cima. Só funciona com o modelo “Ícones Grandes” (modelo: icone, tamanho:grande) e não funciona no Internet Explorer 6.

.sharebar{
margin:5px; /* Margem */
text-align:center; /* Alinhamento dos ícones (left, right ou center)*/
line-height:61px; /* Altura da linha na barra, para os ícones ficarem centralizados */
height:61px; /* Altura da barra */
}
.sharebar a{
margin:0;padding:0; /* Retirar todo espaçamento dos botões */
}
.sharebar .sharebutton{
margin:0 5px; /* Espaçamento horizontal dos ícones */
display:inline; /* Garante que as imagens fiquem alinhadas verticalmente */
width:25px; /* Largura do ícone pequeno */
height:25px; /* Altura do ícone pequeno */
padding:13px; /* Espaçamento, para deixar os ícones centralizados */
}
.sharebar .sharebutton:hover, .sharebar a:hover .sharebutton{
width:50px; /* largura do ícone com o ponteiro do mouse em cima */
height:50px; /* altura do ícone com o ponteiro do mouse em cima */
padding:0; /* Espaçamento, para deixar os ícones centralizados */
}

Personalização 4: Efeito mouseover na barra vertical

Como o anterior, ele só funciona com ícones grandes e não funciona no Internet Explorer 6 (os ícones continuam pequenos):

.sharebar{
margin:5px; /* Margem */
text-align:center; /* Alinhamento dos ícones, centralizados*/
line-height:61px; /* Altura da linha na barra, para os ícones ficarem espaçados corretamente */
float: left; /* left ou right, onde você quer que a barra fique. */
width:61px; /* Largura da barra */
}
.sharebar a{
margin:0;padding:0; /* Retirar todo espaçamento dos botões */
}
.sharebar .sharebutton{
margin:0; /* Espaçamento 0 dos ícones */
display:block; /* Garante que as imagens fiquem uma em cada linha*/
width:25px; /* Largura do ícone pequeno */
height:25px; /* Altura do ícone pequeno */
padding:13px; /* Espaçamento, para deixar os ícones centralizados */
}
.sharebar .sharebutton:hover, .sharebar a:hover .sharebutton{
width:50px; /* largura do ícone com o ponteiro do mouse em cima */
height:50px; /* altura do ícone com o ponteiro do mouse em cima */
padding:0; /* Espaçamento, para deixar os ícones centralizados */
}

Personalização 5: botões em movimento ao passar o mouse

Nessa personalização, os ícones apenas se elevam 5px com o ponteiro do mouse em cima deles. Dessa vez, funciona com qualquer modelo, mas continua não funcionando no IE6.

.sharebar .sharebutton{
vertical-align:baseline; /* Faz com que os ícones continuem parados quando um estiver mais acima*/
display:inline; /* Faz com que a linha acima funcione */
padding:5px; /* espaçamento que irá aumentar quando o usuário passar o mouse por cima */
}
.sharebar a:hover img{
padding:0px 5px 10px 5px; /* aumenta o espaçamento abaixo e diminui acima: aí está o nosso efeito */
}

Personalização 6: Faça você mesmo

Com o básico de CSS, você pode fazer modificações simples na barra do seu blog.

Você pode colocar ela para flutuar por fora do post e acompanhar o scroll do visitante ou apenas colocar seus ícones alinhados à esquerda, direita ou centralizados. Faça como quiser e achar melhor para seu blog!

Barra de Compartilhamento Twitter, Facebook, Orkut e Buzz

2011-01-11T12:05:00.001-03:00

[Compartilhe seus artigos no Twitter, Facebook, Buzz e Orkut!]

Que tal dar a oportunidade a seus visitantes de compartilharem os seus conteúdos nas redes sociais?

Que tal abandonar a barrinha de compartilhamento do Blogger que não é atraente para o visitante?

Por esse motivo, criei essa barra de compartilhamento. Ela, por enquanto, tem suporte a 4 redes sociais (Twitter, facebook, Orkut e Google Buzz), 2 modelos de botão e 2 tamanhos. Veja:

Modelo 1: ícones grandes, 50x50, com fundo transparente;
Modelo 2: ícones pequenos, 30x30, com fundo transparente;
Modelo 3: botões pequenos, 78x20 pixels;
Modelo 4: botões grandes, 101x26 pixels.

O Script

O script foi criado para ser expansível para vários modelos e também para a possível adição de novos botões e funcionalidades.

Ele não foi escrito apenas para Blogger: ele funciona em qualquer plataforma. E, por funcionar em qualquer plataforma, ele funciona com a seguinte função, totalmente explicada:

<script type="text/javascript">
compartilha({
"twitter":"sim", // Você seleciona "sim" ou "nao" (sem acento) para a exibição do botão do Twitter
"facebook":"sim", // O Mesmo para o botão do facebook
"orkut":"sim", // A mesma coisa para o botão do Orkut
"buzz":"sim", // O mesmo para o botão do Google Buzz
"modelo":"icone", // Dois modelos disponíveis: "icone" e "botao"
"tamanho":"grande", // Dois tamanhos: "grande" e "pequeno"
"url":"URL da página para compartilhar",
"titulo":"Título do artigo para compartilhar"
});
</script>

E, claro, para a função funcionar, necessita que o arquivo JavaScript abaixo seja inserido antes da função (preferencialmente no head da página):

<script src=" http://semnomenet.googlecode.com/files/barra_compartilhamento.js" type="text/javascript"></script>

Como instalar
Como eu disse acima, o script funciona em qualquer página. Porém, só irei ensinar como instalar no Blogger:

Na Home Page do Blogger, clique em “Design” do seu blog. Após isso, vá em “Editar HTML”.

Marque a opção “Expandir modelos de widgets”:

Busque por </head> no seu código (Ctrl+F ajuda nessas horas):

Então, cole a linha logo acima do </head>:

<script src=" http://semnomenet.googlecode.com/files/barra_compartilhamento.js" type="text/javascript"></script>

Ficará assim:

Então, busque por post.body (utilize Ctrl+F novamente)

Cole o código a seguir uma linha acima, caso queira a barra acima da postagem ou uma linha abaixo, caso a queira abaixo da postagem:

<div class="sharebar">
<script type="text/javascript">
compartilha({
"twitter":"sim",
"facebook":"sim",
"orkut":"sim",
"buzz":"sim",
"modelo":"icone",
"tamanho":"grande",
"url":"<data:post.url/>",
"titulo":"<data:post.title/>"
});
</script>
</div>

Eu optei por colocar acima. Coloquei acima da div .post-body, mas isso depende do seu template:

Lembre-se de consultar a seção anterior para saber como modificar o modelo e o tamanho dos botões, além de escolher quais ícones você quer ou não.

Então, clique em “Salvar modelo” e pronto! Sua barra já está lá!

Provavelmente os botões estão colados e alinhados à esquerda. Então, temos duas soluções:
Para quem mexe com CSS, a div é da classe .sharebar e os botões são da classe .sharebutton.
Para quem não entendeu a linha acima, aguarde o próximo tutorial, onde irei ensiná-lo a personalizar a sua barra.

Aproveite e assine o nosso feed para ficar por dentro das próximas dicas de como personalizar essa barra, com CSS e outros hacks!

E você, o que achou? Tem alguma sugestão ou crítica? Deixe nos comentários. Qualquer crítica, desde que construtiva, será bem aceita! Sugira novas redes sociais e novas funções para o widget, pois se o blog é feito para você, você é quem manda!

Obs.: Esse widget foi criado pelo SemNome. A modificação é proibida e a distribuição só é permitida com os devidos créditos. Recomendo não baixar o arquivo e republicá-lo, pois novas atualizações – como a adição de novos botões para redes sociais e outros recursos – serão colocadas nesses arquivos.