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

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.

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:

Novo Gadget: Siga por E-mail

Foi lançado pela equipe do Blogger um novo recurso, chamado Follow by Email, Siga por Email em bom português.
Para quem conhece, o recurso é uma cópia do FeedBurner por e-mail (que também é do google), e que tem as mesmas características.
O Follow by Email encaminha diariamente uma cópia de suas postagens para o e-mail da pessoa que segue seu blog pelo Gadget (ou pelo RSS Feedburner).

Para inserir o Gadget é necessário ter uma conta no FeedBurner, com a conta criada entre no blogger (normal / draft) > clique em "Design" > "Editar Layout" > "Adicionar um Gadget" e selecione o Follow by Email (seguir por e-mail):


Agora insira as duas informações que o Gadget pede por padrão.
-Título
-URL do seu FeedBurner



Após a inserção dessas informações clique em Salvar, clique em visualizar e veja o resultado obtido.




O conteúdo do e-mail pode ser configurado no Feedburner (Login > Selecione a conta > aba "Optimizar" > seção "Content Options" > Selecione uma das 3 alternativas disponíveis.)

Postagens Relacionadas, com Widget LinkWithin

O site LinkWithin disponibilizou há alguns dias, um widget pré-automático que trouxe o recurso de Postagens Relacionadas com o uso de script, com um simples cadastro e implementação o blog fica com o recurso em menos de 1 minuto.

O recurso pode ser visualizado no meu blog.


Vá até o site do desenvolvedor: e insira os dados do blog:


 
 

  • Em e-mail - Utilize um E-mail Válido
  • Em Blog Link - Insira o URL principal do Blog
  • Em Platform - Escolha em qual plataforma o blog está
  • Em Width - Escolha a quantidade de links a serem mostrados pelo gadget
Caso seu blog possua um fundo escuro marque a caixa de seleção "My blog has light text on a dark background" (Meu blog tem texto claro com fundo escuro).

E finalmente clique em GET WIDGET!

E assim siga os passos mostrados na página ou se não sabe inglês siga:

  1. Clique (na página que abriu) em "Install Widget", faça login se necessário;
  2. Selecione na box-list qual blog a ser implementado (o do cadastro), e, clique em adicionar Widget

A configuração a seguir é opcional, por um motivo de melhor desempenho, o script gera automaticamente o local a ser implantado, por isso não há o recurso de seleção do local a ser mostrado o Widget:
  • Arraste o Bloco do Widget para baixo das postagens
 
  • Clique em salvar e visualize seu blog.
Obs.: Vale lembrar, como dito: o local do widget, não dá para ser mudado, a implementação é feita automaticamente, e, em alguns casos raros o script não funciona corretamente, caso aconteça entre em contato com o desenvolvedor.
Boa Sorte!

*Algumas imagens foram utilizadas com base de referência, tal qual o site do desenvolvedor, desculpas pelo pequeno plágio.
Para alterar os dados (quantos resumos serão apresentados)
Vá para a página de cadastro e insira os dados novamente, selecione a quantidade que mais se adequa ao seu blog e clique em "GET WIDGET" e pronto, não é necessária a modificação no Layout, já que foi alterado a quantidade no código.
Deixe seu cometário sobre o recurso abaixo:
Caso saiba de mais recursos como este compartilhe abaixo com o formulário de contato, ficaremos felizes em saber que esta contribuindo conosco, blogueiros.
Como controlar a exibição de elementos em determinadas páginas no Blogger

Como controlar a exibição de elementos em determinadas páginas no Blogger

Alguns templates trazem para nós elementos bloqueados em certas páginas, alguns bloqueados para que não apareçam na página inicial ou para determinadas páginas.
Este artigo foi retirado dos artigos originais do : Ocultando elementos em páginas especificas do blogger | Exibindo um elemento apenas na página inicial, ou de marcadores, ou de postagens no blogger onde contém alguns erros.

Entre em Layout > Editar HTML > marque a caixa Expandir modelos de Widgets.

Localize pelo ID do elemento a ser bloqueado / limitado, pois o ID não pode se repetir numa página Web.
Estas configurações estão limitados aos editores avançados, já que corre o risco de se perder os widgets no mal uso.

Insira um dos códigos, apropriado para o seu caso, após a apresentação e o chamado da Tag que representa o widget:
<b:widget id='HTML1' locked='false' title='Título' type='HTML'> e depois da tag:
<b:includable id='*****'>
Utilize o código apropriado como no exemplo substituindo a linha de <b:if...[(código da variável)]...>
<b:widget id='HTML1' locked='false' title='Título' type='HTML'>
<b:includable id='*****'>

<b:if...[(código da variável)]...>

- código do Widget -

</b:if>

</b:includable>

</b:widget>
Não se esqueça de colocar o </b:if> para finalizar o processo de limitação.
Os "*****" representam o nome do ID do elemento includable


Ocultar:


Ocultar nas páginas de postagens:
<b:if cond='data:blog.pageType != "item"'>

Ocultar na página incial:
<b:if cond='data:blog.homepageUrl != data:blog.url'>

Ocultar em uma postagem específica:
<b:if cond='data:blog.homepageUrl != "URL do post"'>

Ocultar na página inicial, de marcadores e arquivo:
<b:if cond='data:blog.pageType == "item"'>

Ocultar em uma página de marcador específica:
<b:if cond='data:blog.homepageUrl != “http://URL_do_Blog/search/label/Marcador”'>

Ocultar nas páginas de arquivo:
<b:if cond='data:blog.pageType != "archive"'>

Ocultar na página de marcadores, postagens e arquivo:
<b:if cond='data:blog.homepageUrl == data:blog.url'>


Determinar / Limitar:


Mostrar apenas nas páginas de postagens:
<b:if cond='data:blog.pageType == "item"'>
Mostrar apenas na página incial:
<b:if cond='data:blog.homepageUrl == data:blog.url'>
Mostrar apenas em uma postagem específica:
<b:if cond='data:blog.url == "URL_do_Post"'>
Mostrar na página inicial, de marcadores e arquivo:
<b:if cond='data:blog.pageType != "item"'>
Mostrar apenas em uma página de marcador específica:
<b:if cond='data:blog.homepageUrl == "http://URL_do_Blog/search/label/Marcador"'>
Mostrar nas páginas de arquivo:
<b:if cond='data:blog.pageType == "archive"'>
Mostrar na página de marcadores e postagens:
<b:if cond='data:blog.homepageUrl != data:blog.url'>

Mostrar apenas na página de marcadores:
<b:if cond='data:blog.homepageUrl != data:blog.url'> 
<b:if cond='data:blog.pageType != "item"'>

Atenção: Ao invés de utilizar uma tag de fechamento utilizará dois pois foram abertos dois <b:if [...]>:
</b:if>
</b:if>


Não esqueça de mudar os dados como:
URL_do_Blog
para seu url principal do blog.
ex.: indiceblogger.blogspot.com

MARCADOR
Um marcador existente no seu blog.
ex.: Templates

URL_do_Post
para seu url da postagem em questão do blog.
ex.: indiceblogger.blogspot.com/2009/08/restaurar-o-icone-de-lixeira-do-blogger.html


Ao escolher um destes métodos tenha a certeza de que está colocando o código corretamente como no exemplo abaixo:

<b:widget id='HTML1' locked='false' title='*****' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

- código fonte do Widget -

</b:if>

</b:includable>
</b:widget>

Estes códigos servem para qualquer local da página que queira limitar.
Deixe seu comentário!