Como criar Gadgets de Marcadores com Thumbnails

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO


Finalmente consegui configurar a gadget de marcadores com as miniaturas das imagens dos posts.

Estou prometendo este post há algum tempo e agora vou poder ensinar o que aprendi.
Muito feliz por ter encontrado a solução.

Ensinei posteriormente Como criar um Gadget com Posts de um determinado Marcador. Muito fácil né.

Pois é, este tutorial é um pouco mais complexo, mas é fácil também. Por ter que acessar o HTML do blog etc, classifiquei como intermediário.
Vamos lá.

1º Passo – Instalando o arquivo Javascript no HTML do blog

No artigo Como Hospedar JavaScript no seu GoogleCode mostrei o javascript a ser utilizado neste artigo. » Este artigo será muito útil para que você possa fazer bom uso do javascript deste hack e de todos os outros que você instala em seu blog. Você pode também usar o recurso de Hospedar o código JavaScript no GoogleDrive

Para colocar o javascript da gadget marcadores com miniaturas.

Vá em Modelo » Editar HTML » Encontre a tag </head> e cole o código javascript abaixo desta tag.
Código:
<script type='text/javascript'>
/*Recent posts with thumbnails of label*/
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7i2rRvrQLM_vdJp-S-FTbBF7dTWacjILuMaM9khyJMmnsLa1ou2TvWSl-SpwjSoepQ9JXAE_KYS-jzhEAjfX4t4llUZu8aFex1xQPu4p7SRU_uGCU7FOxEs-hcjNcXX7nenx6mcdZtphZ/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More ?</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]> 
</script>
♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Ou você pode Hospedá-lo no seu GoogleCode  ou Hospedar o código JavaScript no GoogleDrive e colar apenas esta linha abaixo da tag </head>.

<script src='URL do arquivo javascript' type='text/javascript'/>

2º Passo – Crie a Gadget de um Determinado Marcador com as Miniaturas

Crie um gadget HTML onde desejar em seu blog:
 

Copie e cole nele este código abaixo e faça as alterações necessárias:

<style>img.label_thumb{
width:50px; /*tamanho da imagem thumbnail*/
height:50px;
float:left;
padding:1px;
margin: 0px 5px 0px 0px;
border:1px solid #ccc;}
ul.label_with_thumbs{list-style:none; margin:0px 0px 5px 0px;}
.label_with_thumbs li{border-bottom:1px dotted #ccc; margin:0px 0px 5px 0px;
padding:0px 0px 15px 0px;}
</style>
<script type="text/javascript">
var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;
</script>

<script src="/feeds/posts/default/-/MARCADOR?orderby=updated&alt=json-in-script&callback=labelthumbs" type="text/javascript">
</script>

<a href="URL DO SEU BLOG/search/label/MARCADOR" style="float:right;font:normal 10px Arial;padding:5px 0;">MAIS DESTA CATEGORIA</a>

Entendendo e Configurando o Código.

Substitua no código do gadget onde aparecerem estas palavras:

»URL DO SEU BLOG→ Coloque o endereço do seu blog.
Ex: Usei no meu gadget a URL do Demoplate2006: http://demoplatetpv.blogspot.com.br

Veja como ficou: Demoplate2006

»MARCADOR→ Coloque o nome do marcador que você quer destacar os posts.
→ Importante: tem que ser o nome do mesmo jeito que está no seu marcador, ou seja, se seu marcador estiver todo em letras maiúsculas deve estar aqui da mesma forma.
Ex: O marcador do Demoplate2006 é Lorem. A primeira letra é maiúscula e as outras minúsculas então coloquei da mesma forma.

»var numposts = 4;→ Este número determina a quantidade de posts que você deseja exibir.

»MAIS DESTA CATEGORIA→ Este é o link para o seu marcador. Escreva da forma que desejar. Ex: Veja mais - Mais deste Marcador - Mais deste Tema - etc...

»showpostsummary = true;→ Marque true para mostrar um resumo do artigo ou marque false para mostrar apenas o título do post.

»var numchars = 60; → Este número determina o número de caracteres que o resumo dos artigos vai exibir. Altere da maneira que desejar → de acordo com a largura da coluna onde vai ficar sua gadget você pode alterar para melhorar a estética.
♦ Clique em Salvar.

Pronto! Seu gadget de posts recentes de um determinado marcador com as miniaturas da imagem do post está ativado.

Este recurso é Muito legal porque você pode destacar os posts de um marcador que deseja e ainda com um visual bonito com os thumbnails.

A fonte que utilizei para criar este artigo foi a mesma do artigo:  Como criar um Gadget com Posts de um determinado Marcador.
Consegui adaptar e encontrar como usar nos meus blogs.
NÃO é Permitido redistribuir os tutoriais/hacks ou os templates do TPV sem a prévia autorização de sua Autora.     A Citação da Fonte é Obrigatória.
Como criar Gadgets de Marcadores com Thumbnails Como criar Gadgets de Marcadores com Thumbnails Reviewed by Aurea on 2/17/2013 Rating: 5

31 comentários:

  1. Valew pelo post. Me serviu muito. Obrigado!

    ResponderExcluir
  2. @Marcelo RibeiroOlá Marcelo,

    Fico feliz que tenha ajudado!
    Quando achei este hack não sosseguei até aprender como fazer e ensinar aqui!
    Seja sempre bem vindo!

    ResponderExcluir
  3. Olá. Muuitoooooo Obrigado. Demais.
    A tempo procuro algo assim! Você me ajudou muito. Agora posso separar meus produtos sem problemas. Amei. Obrigado mesmo.
    O meu template tem algumas ferramentas bem diferentes do que vemos normalmente. Quando baixei já veio junto. dê uma olhada lá, quem sabe você consiga modificar ou ensinar como faz. Parabéns e sucesso.
    Att, Anderson.
    Blog: http://imoveislancamentossp.blogspot.com.

    ResponderExcluir
  4. @Uni Imóveis SPOlá Anderson,

    Fico feliz que tenha gostado do tutorial e de saber que vai ser útil para você.
    Foi com o autor do seu blog que aprendi a fazer este hack daqui.
    Muito legal né!
    Seja sempre bem vindo!
    Um abraço,

    Áurea

    ResponderExcluir
  5. Áurea, uma boa dica é vc usar essa última parte editável do script dentro do widget de labels do blogger. Assim é possível exibir uma lista com cada um dos marcadores e seus respectivos posts sem a necessidade de criar um widget de HTML para cada um deles.

    ResponderExcluir
    Respostas
    1. Vou tentar em um blog de testes Unknown.
      Obrigada por sua dica!

      Excluir
  6. Olá, e quando meu marcador tiver duas palavras? Tenho um marcador chamado "Missão Evangelistica" ele tem duas palavras e o ~ em cima do ã. Como faço?

    ResponderExcluir
    Respostas
    1. Olá 24 Horas com Jesus,
      Já tentou colocá-lo da forma que é?
      Tente. Se não der certo altere o marcador.
      Seja bem vindo no TPV.

      Excluir
    2. Eu consegui assim:
      no ligar do espaço coloque %20 um exemplo:
      Fora do Contexto >>>> Fora%20do%20Contexto

      comigo deu OK

      ruy guerra

      Excluir
    3. Obrigada por sua ajuda Ruy. Obrigada mesmo!

      Excluir
  7. Coloquei tudo e em vez de aplicar no lay-out abri paginas com os marcadores e TUDO OK!!!
    Agradeço muito, procurei bastante e só encontrei a solução no seu blog

    ruy guerra

    ResponderExcluir
  8. Eu queria por todas as postagens e não só as recentes e também quando eu coloco o numero por exemplo de 100 só aparece 25 postagens.

    ruy guerra

    ResponderExcluir
    Respostas
    1. Olá Ruy,
      Procurei no javascript se tem algum limite de posts a serem exibidos, mas não consegui achar nada. As vezes, em alguns hacks temos que mudar o numero de itens a serem exibidos em 2 lugares, mas parece que este não é o caso. Mesmo assim deve ser um limite do hack.
      Entrei no seu perfil e lá não tem o link para o seu blog em Sobre.
      Gostaria de ver como estão ficando suas experiências!

      Excluir
  9. Até agora seu blog foi o que mais perto chegou de atender minhas esperanças, eu estou querendo exibir as postagens na horizontal, este hack exibi na vertical, por favor me diga onde devo mudar para os post serem exibidos na horizontal.

    Parabéns pelo blog estou aprendendo bastante com ele.

    ResponderExcluir
  10. tem como eu deixar a imagem maior? tentei altera o codigo css mais perde muito da qualidade, muito muito mesmo

    ResponderExcluir
    Respostas
    1. Olá Momo,
      Fiz algumas alterações no artigo facilitando a alteração do código CSS do gadget.
      Você pode alterar o tamanho do thumbnail sim, mas também terá que alterar o padding nesta linha de código do CSS:[ .label_with_thumbs li{border-bottom:1px dotted #ccc; margin:0px 0px 5px 0px;padding:0px 0px 15px 0px;}
      Até ficarem alinhados de acordo com o tamanho da imagem que quiser. Aqui está configurado para o padding inferior de 15px para a imagem de 50px por 50px.

      Excluir
    2. olá Aurea? olha quero agradecer pelo hacker... e tenho uma pegunta!! como o MOMO ADM citou, aumentei a imagem como queria, mais perde muita qualidade!!!! tem como aumentar a imagem? para alcançar uma qualidade significativa? desde já obrigado

      Excluir
  11. Boa noite Aurea!
    Este marcador é tudo que estou querendo, mas fazendo teste no meu blog de teste, ele fica com uma escadaria. Não fica um abaixo do outro, certinho. Em que estou errando?

    ResponderExcluir
    Respostas
    1. Olá Wiraktan,

      Também estou tendo este problema. Vou ver o que pode estar acontecendo e respondo seu comentário novamente. Mas já posso ir te adiantando que deve ser alguma configuração CSS do template ou do widget que pode estar dando problema.
      Vou revisar este css no fim de semana!

      Excluir
    2. Ok Áurea, te agradeço muito. Eu estou pretendo separar as notícias em meu blog, por categoria. Igual a um template que vi.
      http://ver648.blogspot.com.br
      Esse rack irá me ajudar muito.

      Excluir
    3. Este comentário foi removido pelo autor.

      Excluir
    4. Boa tarde Aurea! Quanto tempo né? Bom, eu ainda estou querendo achar uma forma da gente redimensionar a imagem, sem que ela perca a qualidade. Você já conseguiu resolver isso? Quanto o problema da escadaria, eu consegui resolver com CSS. Eu percebi que mesmo sem os comandos de redimensionamento, o código cria um thumb de 72x72, aí está o problema, quando a gente redimensiona, ele redimensiona desse px, e não do tamanho da imagem original. No aguardo!

      Excluir
  12. olá, como eu colocao os marcadores em ordem alfabética?

    ResponderExcluir
    Respostas
    1. Olá Rafael,
      Você quer colocar os posts de um determinado marcador em ordem alfabética? É isso?
      Se for, não sei como fazer, uma vez que aparecem os posts na ordem em que foram publicados.

      Excluir
  13. no meu blog só aparece o ultimo post mesmo eu deixando para aparecer o 4 ultimos posts
    me ajuda!

    ResponderExcluir
  14. Olá, no meu blog estão aparecendo as primeiras postagens, pode me ajudar?

    ResponderExcluir
  15. tem como botar so com a imagem sem descrição ou titulo uma imagem do lado da outra?

    ResponderExcluir
    Respostas
    1. Olá Ronald,
      Tentei colocar somente as imagens, mas não consegui. Para isso precisa alterar o javascript do hack. E isso ainda não consigo fazer.
      Vou procurar algum javascript que tenha esta opção. Assim que achar posto aqui no TPV.

      Excluir
  16. muito bom era o que eu estava procurando mais eu queri exibir na horizontal igual desta site http://www.gospelprime.com.br/

    ResponderExcluir
  17. Ano passado eu tinha achado em outro blog uma forma simples, apenas com HTML de deixar um gadget com post específico com minituara mostrado os últimos posts. Eu usava até no meu blog, mas meu antigo template começou a dar erro e esqueci de salvá-lo antes de trocar. Enfim, gostaria de saber por que o seu não mostra os últimos posta e sim de forma aleatória?

    ResponderExcluir
    Respostas
    1. Olá Felipe,
      Isso aconteceu porque este gadget é de posts de um determinado marcador.
      Para você colocar gadgets de posts recentes você pode procurar pela palavra "recentes" na caixa de pesquisa daqui do blog que vão aparecer outros tutoriais que você precisa. ;-)

      Excluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.