Mostrando postagens com marcador Blogger. Mostrar todas as postagens
Mostrando postagens com marcador Blogger. Mostrar todas as postagens

Blogger: Novas expressões para templates Blogger

No dia 22 foi lançado algumas expressões que auxiliam na organização e customização de certas partes de um template Blogger.

Este artigo traz alguns conceitos de programação, não é recomendado que uma pessoa que possui um blog simples ou sem conhecimentos faça alterações em seu template, pois isto não é um tutorial, portanto qualquer mudança no seu template, a responsabilidade é toda do autor da alteração.
Faça Backup do modelo antes de qualquer alteração.

As expressões existem para poder determinar o que aparece em cada página visitada em seu blog, como por exemplo a página inicial, que normalmente apresenta vários posts, e a página de post apresenta um único post, infelizmente o Blogger não faz isso como mágica, mas sim tem a ajuda de cabeças pensantes por trás, os desenvolvedores.

Para facilitar certas tarefas nestes "controles" o Engenheiro de Software Luke Bjerring, nos trouxe uma ótima notícia, alguns aditivos inclusos no Blogger com adições de mais expressões, confira.

Expressões conhecidas:

Era de fato comum, o conhecimento dessas expressões:

+ Adiciona ou concatena Valores (soma ou concatenação)

- Subtrai valores (subtração)

!= e == Checa igualdade (Diferente e Igual)

<, >, <= e >= Compara valores (menor, maior, menor ou igual que, maior ou igual que)

Novas expressões:

! ou not Inversão de true/false (negação)
ex. <b:if cond='!data:post.allowComments'>...

?: Se a operação apresentada, retorna o primeiro elemento, se for falso, retorna o segundo, é conhecido como IF de uma linha ou operador Ternário.
ex. <a expr:class='data:post.allowComments ? "comments" : "no-comments"' ...
... PS.: Isso deve ser muito útil!

in/contains Constata se o objeto existe dentro de um determinado array ou conjunto de dados
ex. <b:if cond='data:blog.pageType in {"index", "archive"}'>...

and e or Combina condicionais
ex. <b:if cond='data:blog.pageType == "index" and data:post.allowComments'>...

() Assim como na matemática, força que a parte envolvida com () seja executado primeiro.
ex. <div expr:style='"max-width: " + (data:width + 10) + "px;"'>...

Para completar segue o manual completo em inglês: the help article. Você que está lendo e teve alguma ideia sobre o que fazer com os novos códigos, deixe nos comentários =D
Vou tentar implementar e auxiliar nas ideias compartilhando as novidades no blog. Boa programação!

Este artigo é uma tradução do artigo publicado em 22/05/2016 em: https://blogger.googleblog.com/2015/05/adding-new-expressions-to-blogger.html

Gadget: CommentsOrdener - Para ordenar os comentários no blogger

Hoje retorno a escrever para o Blogger, devido à vários projetos e desenvolvimentos paralelos que tinha que resolver, ainda tenho, mas vou dar uma atenção à vocês, que apesar do tempo fora estão aqui ainda aguardando uma postagem nova.

Essa vai exclusivamente para donos de blogs na plataforma blogger e quem queira aproveitar o script.
Antes de tudo, gostaria de deixar avisado que não permito que o script seja veiculado por outro site/blog, sendo de total responsabilidade do infrator. Ao invés disso, compartilhe o link no seu blog/site. Respeitando o direito autoral.

A necessidade surgiu revendo algumas postagens antigas, onde o número de comentários ocasiona uma certa desconfiança do visitante, pois ao chegar na área dos comentários, o primeiro comentário é o mais velho, pensando assim que o blog é velho e não tem conteúdo atual, o que pode enganar muita gente.

Público Alvo:

  • Blogueiros que utilizam a plataforma Blogger;

Problemas encontrados:

  • Acima de 200 comentários o script só irá ordenar os comentários vistos na página, ou seja, se houver mais de 200 comentários infelizmente o script não ordenará.

Vantagens de se utilizar o script:

  • Nenhum conhecimento é necessário, basta inserir o gadget no blog;
  • Apresenta os comentários cujo resposta mais recentes em primeiro;
  • Ordena automaticamente por ordem decrescente assim que a página é carregada.
  • Oferece a troca da ordem por meio de um botão customizado.

Resultado Final

O resultado final vai ser este:

Dependências:

Dependências são as necessidades do script para que ele funcione normalmente.
Para tanto verifique se o seu blog já possúi caso o gadget não funcione após a instalação:
  1. Jquery;
  2. FontAwesome;

Instalar no meu blog

Para adicioná-lo ao seu blog Blogger, siga estas etapas:


  • Acesse o painel de controle do Blog que quer customizar
  • Vá até a página de customização de Layout
  • Selecione um dos links de "Adicionar um Gadget"


  • Selecione a opção "HTML/JavaScript".
  • Copie o texto abaixo:

<style>
#autorgadgetordenercomments{
float: right;
font-size:smaller;
text-decoration: none;
}

#btnorderasc{
cursor: pointer;
border:1px solid #ccc;
border-radius: 5px;
clear:both;
padding: 5px;
display:block;
}

#btnorderasc:hover{
background-color:#eee;
}

#btnorderasc > span{
display: inline-block;
padding: 5px;
}
#btnorderasc > span.active{
font-weight:bolder;
background-image: linear-gradient(to top,#4399cd,#727272);
  box-shadow: inset 0 1px 6px rgba(41, 41, 41, 0.2),
                    0 1px 2px rgba(0, 0, 0, 0.05);
  color: #E6E6E6;
  border-color: transparent;
  text-shadow: 0 1px 1px rgba(40, 40, 40, 0.75);
  border-radius: 3px;
}
#btnorderasc > span.notactive{
font-weight:normal;
}
</style>
<script>
function comentariosasc(){
// @Author: Daniel Ikeda
// @Author_url: indiceblogger.blogspot.com
var comentarios = $('#comment_block > div');
var active = $('#btnorderasc > span.active');
var notactive = $('#btnorderasc > span.notactive');

$(active).addClass('notactive').removeClass('active');
$(notactive).addClass('active').removeClass('notactive');

$("#comment_block").hide("slow");
$('#comment_block').html();
for(i = comentarios.length -1; i >= 0 ;i--){
$('#comment_block').append($(comentarios[i]));
}
$("#comment_block").show("slow");
}
function readyFn(){
// criar botões para mudar o padrão do filtro.
$("#comments").prepend("<br><span id='btnorderasc'>Ordenar: <i class='fa fa-filter'></i> <span class='desc notactive'>Desc</span><span class='asc active'>Asc</span><span id='autorgadgetordenercomments'><a target='_blank' href='http://www.indiceblogger.blogspot.com' title='Author: Daniel Ikeda'>by @dfikeda</a></span></span>");
comentariosasc();
$("#btnorderasc").click(comentariosasc);
}
$(document).ready(readyFn);
</script>

  • NÃO recomendo a inserção de um título, não há necessidade.
  • Cole no campo "Conteúdo" e clique em "Salvar" .


  • Pronto, carregue alguma postagem do seu blog para ver como ficou.

Deixe seu comentário sobre o Gadget, se gostar por favor, compartilhe pois assim como me ajudou, pode ajudar outras pessoas também. Obrigado.

Botão de +1 do Google para Webmasters

"Ao fazer recomendações usando o botão +1, você pode ajudar amigos, contatos e outras pessoas na web a encontrar o que há de melhor durante suas pesquisas."

O Google anúnciou a poucos dias uma nova maneira de partilhar suas indicações, uma forma muito simples e que tem total envolvimento com o próprio Google.com, sim, o site de pesquisas.

O sistema oferece basicamente, que o usuário do "botão +1" se relacione com o sistema de pesquisa do Google, quando algum amigo for fazer uma pesquisa por exemplo, faz com que o que você compartilhe e o conteúdo se torne mais importante e relevante para um amigo que pesquise sobre algo em comum entre vocês.

Com o botão na Web podemos obter os melhores resultados de pesquisas, um bom motivo disto é de entrar em várias páginas na web e encontrar o que procura em apenas uma.

Veja agora onde fica localizado o botão neste blog:
Botão de +1 no Blog
Repare que ao clicar aparece a janela de compartilhamento, dá para reparar também que provavelmente o Google está puxando a sardinha novamente pra ele, temos de ter uma conta cadastrada no google (não importa o serviço) para podermos compartilhar. Mas só de deixar a internet mais limpa, já ajuda.

Se reparar consigo colocar o botão in-line ou seja em qualquer local da página como por exemplo aqui.
Onde encontramos o botão?
Clique neste link
Veja um dos vídeos disponibilizados pelo Google sobre o botão: Comente ou simplesmente +1:

Gadget: Twitter Updates V2: FEEDWITTER

Criado em: 11 de Julho de 2009
Atualizado em: 10 de Agosto de 2009

A Versão do Gadget que peguei a fonte pode ser conferida clicando aqui:Add to Google ou pelo blogger: dV1.3
Construi uma segunda versão com mais modificações de estilo já que a primeira não os tinha e as alterações podem ser conferidas abaixo:
Clique aqui para configurar a versão 2.x
Log:




09/08/09 - NOVA Versão 2.2: d
d
Caracteristicas e funções:
  1. Titulo [padrão]
  2. Altura [padrão]
  3. Nome no Twitter - seu nome no Twitter sem @ (arroba)
  4. Número de Tweets mostrados - Quantidade de Tweets exibidos
  5. Mostrar link para Twitter? - Se marcado exibe um link ara o Twitter com o nome que foi usado em "Nome no Twitter"
  6. Alteração da Cor do link.
  7. Alteração da Cor do texto.
  8. Link Adicionar ao Twitter (com imagem)
  9. Link para Blogger (com imagem)
  10. Listagem de Tweets exibidos com imagem lateral
Bugs FIX:
  1. Link para Adicionar ao Blog abria no frame criado pelo Twitter Updates. [corrigido]
  2. Imagem para Follow me não enquadrava no quadro do frame. [corrigido]
Bugs conhecidos:
  1. Link para Adicionar ao Blog abria no frame criado pelo Twitter Updates.
  2. Imagem para Follow me não enquadrava no quadro do frame.
Implementados nesta versão:
  1. Imagem de lista implementada na lateral de cada lista.


05/08/09 - Versão 2.1:

d
Caracteristicas e funções:
  1. Titulo [padrão]
  2. Altura [padrão]
  3. Nome no Twitter - seu nome no Twitter sem @ (arroba)
  4. Número de Tweets mostrados - Quantidade de Tweets exibidos
  5. Mostrar link para Twitter? - Se marcado exibe um link ara o Twitter com o nome que foi usado em "Nome no Twitter"
  6. Alteração da Cor do link.
  7. Alteração da Cor do texto.
  8. Link Adicionar ao Blogger (com imagem)
Bugs FIX:
  1. Link para Adicionar ao Blog abria no frame criado pelo Twitter Updates.
Bugs Conhecidos:
  1. Link para Adicionar ao Blog abria no frame criado pelo Twitter Updates.
Bugs encontrados:
  1. Imagem para Follow me não enquadrava no quadro do frame.
Implementados nesta versão:
  1. Imagem para Follow me implantada

11/07/09 - Versão 2.0:add

d
Caracteristicas e funções:
  1. Titulo [padrão]
  2. Altura [padrão]
  3. Nome no Twitter - seu nome no Twitter sem @ (arroba)
  4. Número de Tweets mostrados - Quantidade de Tweets exibidos
  5. Mostrar link para Twitter? - Se marcado exibe um link ara o Twitter com o nome que foi usado em "Nome no Twitter"
  6. Alteração da Cor do link.
  7. Alteração da Cor do texto.
  8. Link Adicionar ao Blogger
Bugs encontrados:
  1. Link para Adicionar ao Blog abria no frame criado pelo Twitter Updates.
Implementados nesta versão:
  1. Link para Adicionar ao Blog.
  2. Configuração de "Cor do Link" em hexadecimal.
  3. Configuração de "Cor do Texto" em hexadecimal.

10/07/09 - Versão 1.3:add

d
Caracteristicas e funções:
  1. Twitter Username - Coloque seu nome no Twitter.
  2. Number of updates to display - Quantidade de Tweets exibidos.
  3. Display link to you Twitter page? - Exibir link para o Twitter?



Configurando a versão 2.x:

Primeiramente caso não esteja logado ou deseja uma nova versão, entre no Painel > Layout > Elementos de Página > clique em Adicionar um Gadget > mais gadgets e pesquise por:
FeedWitter


Há um bug no Google e ele não excluiu uma das minhas versões, e ela não está funcional, então caso acusar erro de Gadget volte a página e selecione outro com o mesmo nome.
Adicione.

d


  1. Coloque o Título da postagem
  2. Editei e não vi diferença alguma, então altere apenas se necessário
  3. Seu username no Twitter sem o Arroba "@"
  4. Número de twittes que deseja que apareça
  5. Mostrar link Follow-me? Sim=marcado
  6. Cor dos link do Gadget
  7. Cor dos textos do Gadget
Como dito no início deste tutorial, caso você encontre algum erro, queira fazer críticas ou elogios ou até contribuir com uma dica, deixe um comentário.
Caso queira mais notícias, novidades, tutoriais ou templates para personalizar seu blog, assine nosso RSS: http://feeds.feedburner.com/indiceblogger
Aguarde que você receberá todas as atualizações.
Agradecimentos às idéias e dicas:
Calcular Google Pagerank

Calcular Google Pagerank

Atualizado em: 23/04/2011

Link retirado.

Inserido um novo link.
 
Pagerank é uma espécie de algoritmo criado pela google para calcular/medir o quão distribuido na rede o site está.Fonte: Wikipédia

 
Procurando ferramentas para este propósito, encontrei um que, fora os mais comuns que apenas lhe dão o número do seu Pagerank, lhe dá muitas outras informações.

Insira o URL do seu site ou blog abaixo e confira o poder desta ferramenta!
O site que havia disponibilizado aqui está fora do ar, portanto achei um muito bom, que se "bem usado" faz mais coisas que o anterior, aconselho!

Search Engine Genie

Outros sites com o mesmo propósito:
Marketing de Busca

PageRank Gratuita

PRCHECKER

O que acha sobre a ferramenta e sobre a tecnologia de analise da Google quanto ao PageRank?
Tem alguma outra ferramenta que conhece? Conte-nos!

Termos de Parceria [2.0]



Você que deseja ser parceiro e não gosta de ficar lendo as regras de parcerias, já vou logo adiantando: Você tem 90% de que apareça seu link na barra lateral.




A versão de parcerias é a 2.0 de 21 de Abril de 2011, Todo o sistema de parcerias foi alterado.


Legendas:

    Linha Atualizada

1 - Links 2 - Atualizações 3 - Validação de Parceria
4 - Determinações Gerais

Observações

5 - Disposições Finais - Modos de atualização


- Links - Regras de Parcerias

$1 - A quantidade de links para o site/blog do parceiro deverá ser limitada quanto as vagas da SIDEBAR, sendo 1(um) link para cada parceiro, no máximo 100 parceiros e que estejam dentro do percentual necessário.


$2 - O percentual necessário para ser parceiro é retirado das estatisticas do Analytics, receberá um link na barra lateral aquele que conseguir ter pelo menos 10% de visitas enviadas, em comparação com aquele que enviou mais visitas, exemplo:


O primeiro colocado envia 100 visitas. O restante portanto se envia, mais de 10 visitas entra na listagem lateral.


- Todos os parceiros são carregados na barra lateral, porém o gadget apresenta apenas 10 links na página inicial, devendo o visitante, clicar no link "mostrar todos" para ser apresentado o restante dos parceiros.



- O site do parceiro ao ser atualizado aparecerá em primeiro na lista, e assim sucessivamente entre os que estiverem na lista. Portanto não importará a ordem de parceiros (entre 1° - 100°) e sim das atualizações dos mesmos, sendo assim o parceiro que mais atualiza seu blog/site será contemplado com mais visitas.



- Atualizações - Regras de Parcerias

$1 - Todo primeiro dia do mês subsequentes ao vigente, serão atualizados os links da barra lateral


- Validação de parcerias - Regras de Parcerias

$1 - O conteúdo do parceiro NÃO poderá conter citações à violência nem tampouco apologias, discriminação ou conteúdo adulto.


- Determinações Gerais - Regras de Parcerias


$1 - Sera considerado tácita aceitação neste documento de parceria, termos propostos e regentes de todos os artigos, assim que o parceiro enviar uma visita.


$2 - Não serão apresentados por motivos administrativos a quantidade de visitas que um site nos envia, nem o relatório do Analytics, pela proteção dos dados do blog.


$3 Os dados aqui contidos poderão ser modificados a qualquer momento sem prévia autorização.


$4 - Comente neste caso não concorde com o sistema de parceiros vigente.



- Disposições Finais - Observações

1 - Como é feita a atualização deste termo de parceria?
Se ocorra erros ou atualizações será atualizado a versão e linhas conforme modificação;

LINHAS:
Linhas atualizadas receberão cor de fundo azul claro.
Caso a linha atualizada não mostre mudanças no comportamento das regras aqui impostas esta será ignorada e não será preenchida com cor de fundo.

VERSÃO:
Para cada linha modificada a adição de +1(um) no segundo digito da versão ( 1.3 )*
Para cara artigo Inserido/re-escrito a adição de +1(um) no primeiro digito da versão ( 1.3 )*

ATUALIZAÇÃO:
Quando houver atualização, seja ela da versão ou mesmo de linhas será atribuido uma nova data na publicação deste.

*Ao executar mudanças nesta seção, não será alterado a versão