Pesquisa personalizada

domingo, 29 de agosto de 2010

Como colocar imagens no gadget Postagens Populares em posts sem elas





Com a implementação do gadget "Postagens Populares", fica a esperança de que o pessoal do Blogger também nos proporcione outros gadgets semelhantes, como "Postagens Recentes" e "Comentários Recentes". A vantagem é que podemos dos livrar de inúmeros hacks, como este aqui, que fazem a página dos nossos blogs demorarem para carregar por conta dos scripts hospedados em outros lugares.

Só que nem tudo são flores, o novo gadget não dá a opção de colocar o número de letras no snippet do post, e por default, se você escolher só o título do post com o thumbnail (imagem), ela aparecerá centralizada. Além disso, se não houver uma imagem no post, fica estranho o widget, alguns posts com imagens, outros sem.

Eu já tinha feito umas customizações, que pode ser vistas neste post. Vamos agora analisar certas linhas para implementar as imagens. Eis abaixo o código inteiro do gadget:

<b:widget id='PopularPosts1' locked='false' title='Postagens populares' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail-center'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section>
      </div>

Observe que há 4 condições, conforme as opções que você escolhe no adicioar gadget:


  • <!-- (1) No snippet/thumbnail -->
  • Essa é a primeira opção, apenas com os títulos dos posts.
  • <!-- (2) Show only snippets -->
  • Aqui é a segunda opção, títulos dos posts e resumo dos posts.
  • <!-- (3) Show only thumbnails -->
  • Aqui é a terceira opção, título dos posts com thumbnails.
  • <!-- (4) Show snippets and thumbnails -->
  • E nessa quarta opção, títulos dos posts com os resumos e com as imagens dos posts.

Na terceira opção, vê-se que realmente há uma classe <div class='item-thumbnail-center'>, que coloca as imagens no centro e na quarta opção há uma outra classe, mas que coloca as imagens ao lado do título <div class='item-thumbnail'>. Se você escolher a terceira opção, basta copiar e colar a classe da quarta no lugar (Fiz e deu certo!).

Para colocar uma imagem que apareça em posts sem elas, basta incluir uma condição no código(veja linhas 9 a 14 na imagem abaixo). O que eu fiz no meu blog foi incluir na quarta opção (Caso eu usasse a terceira, eu colocaria nela), antes da tag </b:if>:

<!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>

<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img src='COLOQUE-AQUI-A-URL-DA-SUA-IMAGEM-DE-DIMENSÕES-72-X-72'/>
</a>
</div>

</b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>

O resultado pode ser visto abaixo, onde aparece uma imagem com o nome do meu blog:



E agora ficaremos à espera das novidades que acontecerão no dia 31, próxima terça, na festa de comemoração global de aniversário do Blogger de 11 anos!!!

Post inspirado no Pizcos Blog!


Permalink:





Sobre o Autor:
Crazyseawolf Para saber mais sobre o autor deste blog, visite o seu perfil no Google+ ou este link . Para enviar uma mensagem, clique aqui . Para outras informações, leia o FAQ .



2 comentários :

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Related Posts with Thumbnails
Google
 
 
Template Denim, criado por Darren Delaye, customizado por Crazyseawolf.