Indice Blogger: Templates

Mostrando postagens com marcador Templates. 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

Blogger comments Gadget Hacks Mod Layout Templates

» Daniel Ikeda « 15:49 Add Comment

» Daniel Ikeda «

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:

Jquery;
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>