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.