» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Gadget Posts Recentes junto com Posts de um Marcador


Neste tutorial você irá aprender a criar um Gadget de Posts Recentes no estilo Galeria (somente com as imagens) e junto um Gadget de Posts de um Determinado Marcador que você considera importante ao assunto do seu blog!
Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Modelo » Fazer backup/Restaurar » Fazer download do modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.
Vamos lá:

1º Passo: Colocar o Código Javascript no Blog

Entre no seu blog: Vá em ModeloEditar HTML → Encontre a tag </head>

Se não souber como fazer:»Leia:Como Acessar o Editor de HTML do Blog e Ativar o Search

Copie o código Javascript e cole abaixo da tag </head> do seu blog.

<script type='text/javascript'>
//<![CDATA[
// Posts Recentes em Galeria
function recentgrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://1.bp.blogspot.com/-B6v6I956eLM/VlzQmpoW51I/AAAAAAAAAOg/tIXluUw3Kng/s1600/sem_imagem4.jpg",s=n.replace("s72-c","s"+recent_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recent_thumbs+'" height="'+recent_thumbs+'"/>',p=recent_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>

Clique em Salvar modelo

2º Passo: Incluir o código CSS do Gadget no blog

Ainda Editar HTML encontre a tag  ]]></b:skin> e cole o código abaixo acima desta tag.

/* CSS Posts Recentes em Galeria */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .gallerytem{display:block;float:left;position:relative;margin:8px;overflow:hidden;padding:0}
.recent-gallery .gallerytem a{position:relative;float:left;margin:0;overflow:hidden;text-decoration:none}
.recent-gallery .gallerytem .ptitle{background:rgba(255,255,255,.95);display:block;clear:left;font-size:11px;line-height:1.3em;position:absolute;text-align:left;bottom:0;left:0;right:0;top:0;color:#444;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;transform:translate(-79px,0);backface-visibility:hidden;transition:all .2s}
.recent-gallery .gallerytem:hover .ptitle{visibility:visible;transform:translate(0,0)}
.recent-gallery a img{background:#fdfdfd;float:left;transition:all .3s}

Clique em Salvar modelo

3º Passo: Criar o Gadget de Posts Recentes E de um Marcador a sua escolha


Vá em Layout » Clique em Adicionar um Gadget no Local onde deseja » Escolha o Gadget HTML/Javascript e Cole o código abaixo:

Gadget dos Posts Recentes

<script>
var recent_thumbs = 72;
var recent_title = true;
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=recentgrid"></script>

Gadget dos Posts de um Determinado Marcador ou Tag

<script>
var recent_thumbs = 72;
var recent_title = true;
</script>
<script src="/feeds/posts/summary/-/TAG?max-results=9&amp;alt=json-in-script&amp;callback=recentgrid"></script>

Entendendo os códigos

  • var recent_thumbs = 72;► Indica o tamanho das miniaturas das imagens dos posts
  • var recent_title = true; ► Apresenta o título do post quando passarmos o mouse sobre a miniatura
  • max-results=9 ► Indica o número de miniaturas que deve ser exibido no gadget. Você define a quantidade de acordo com a largura do seu gadget para ficar simétrico.
  • TAG►Você substitui a palavra TAG pelo marcador ou tag que deseja exibir no gadget. Escreva exatamente da forma que está o marcador em seu blog. Se estiver com todas as letras maiúsculas escreva igual.

Um Vídeo-Tutorial Para você entender melhor como criar o seu Gadget


Espero que goste e entenda o que ensinei! :-)
NÃO Retire os Créditos!
NÃO é Permitido redistribuir os templates ou os tutoriais/hacks do TPV sem a prévia autorização de sua Autora.
Fonte: Tradução e adaptação do post Cara Memasang Widget Recent Post Gallery
Gadget Posts Recentes junto com Posts de um Marcador Gadget Posts Recentes junto com Posts de um Marcador Reviewed by Aurea R C on 11/30/2015 Rating: 5

5 comentários:

  1. Olá! Desenvolvemos um site de templates totalmente exclusivos e em português, templates profissionais e modernos.

    http://www.ideiasblogger.com/

    Dê uma olhadinha, Ainda temos poucos modelos, Mais iremos atualizar semanalmente, então em breve teremos muito mais modelos exclusivos. e se quiser indicar ficaríamos muito felizes...

    Obrigado!

    ResponderExcluir
  2. Oi!! Eu queria saber como aumentar o tamanho do título...?

    ResponderExcluir
    Respostas
    1. Olá Zona Walker,

      Você deve incluir esta linha: .recent-gallery .gallerytem .ptitle {font-size:16px;}
      no final do código do 2º passo e definir o tamanho da fonte que quer exibir.

      Excluir
  3. Oi! Adorei o gadget! Gostaria de saber como faço para que o link da post. abra na página que estou. Não quero que ele abra em uma nova aba! O que faço?

    ResponderExcluir
    Respostas
    1. Olá Felipe,
      Para isso você deve, no 1ª passo retirar a tag [ target="_blank"] da linha do código javacript.

      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.