AjMrDeSiGn

Templates Blogger, exquisitez para usuarios curiosos.

Personalizar las entradas populares

13 dic. 2012

Personalizar las entradas populares en blogger, añadir una imagen cuando no exista, hay entradas en las que solo escribimos texto y no añadimos una imagen, al hacerse popular tenemos el problema que no muestra ninguna, no queda bien en el gadget las entradas sin imagen.

Mejorar las entradas populares

Lo primero que haremos será crear una imagen de 72x72 para mostrar las entradas sin imagen y luego entramos en plantilla y con los artilugios expandidos buscamos este código de abajo.

<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'>
<b:includable id='main'>
<div class='widget-content popular-posts'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<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'>
<a expr:href='data:post.href'>
<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>
<span class='item-coment'><a expr:href='data:post.href + &quot;#comentarios&quot;' expr:title=' &quot;Comentarios: &quot; + data:post.title'>Comentarios</a></span>
<span class='item-more'><a expr:href='data:post.href'>Ver más</a></span>
</div>
<div style='clear: both;'/>
<div style='clear: both;'/>
<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>

y añadimos lo que esta en rojo.

<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'>
<b:includable id='main'>
<div class='widget-content popular-posts'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<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'>
<a expr:href='data:post.href'>
<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'>
<img alt='' border='0' src='url imagen'/>
</a>
</div>

</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<span class='item-coment'><a expr:href='data:post.href + &quot;#comentarios&quot;' expr:title=' &quot;Comentarios: &quot; + data:post.title'>Comentarios</a></span>
<span class='item-more'><a expr:href='data:post.href'>Ver más</a></span>
</div>
<div style='clear: both;'/>
<div style='clear: both;'/>
<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:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href'>
<img alt='' border='0' src='url imagen'/>
</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>

le damos a guardar y cuando no halla ninguna imagen mostrara una, un ejemplo de lo mas fácil, para que no cueste mucho trabajo si uno no sabe lo que hace, siempre puedes darle a vista previa, por si algo se esta haciendo mal para arreglarlo.

6 comentarios:

  1. hmmm nose mucho sobre esto de blog pero me gustaria saver como aces para que salga esa linea color naranja donde estan los codigos
    :)

    ResponderEliminar
    Respuestas
    1. Para que salga el borde naranja, solo se le añade al css de esta forma:

      border-left: 1px solid #ffa200;
      Buscas si tienes en el css este código o uno similar:

      .post blockquote {
      background:#fdf9ee;
      margin:1em 20px;
      text-align: left;
      padding: 15px;
      font-size: 13px;
      border-top: 1px solid #fff7dc;
      border-left:4px solid #ffa200;
      border-right: 1px solid #fff7dc;
      border-bottom: 1px solid #fff7dc;
      -webkit-border-radius:0px 10px 10px 0px;
      border-radius:0px 10px 10px 0px;
      }

      y el html seria así:

      <blockquote>...Aquí el texto a mostrar...</blockquote>

      Eliminar
    2. De nada, si le sirvió me alegro, lee las normas de los comentarios, no cuesta nada, si quieres que sean publicados los comentarios.

      Eliminar
    3. Gracias por su comprensión.

      Eliminar

Normas comentarios › Leer antes de comentar...

« »

Suscríbete a nuestro feed...