» 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 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.