domingo, 25 de septiembre de 2011

Entrada destacada en Blogger

Jugando un poco con los códigos del gadget "Entradas Populares", he conseguido crear un sencillo contenedor que muestra la entrada destacada en el blog de manera automática sin necesidad de establecer ningún parámetro posterior a su instalación.

El resultado es el siguiente:




El tutorial: 

Paso 1: Añadiendo el gadget:

En "Diseño | Edición HTML" deberás marcar "Expandir plantillas de artilugios". Busca entonces el siguiente código:
<div id='content-wrapper'>
Arriba o debajo de este (Según donde quieras situar el gadget) deberás pegar el siguiente código:

<b:section class='destacados' id='destacados' showaddelement='no'>
<b:widget id='PopularPosts7' locked='true' title='Lo más popular' 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'>
                  <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>
            <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>
<a id="leermas" expr:href='data:post.href'>Leer más</a>

            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section>

Paso 2: Añadiendo los estilos:

Ahora busca el siguiente código:
]]></b:skin>

Arriba de este pega el siguiente:
#destacados { /*CONTENEDOR*/
width:870px;
margin:0px auto;
padding:20px;
margin-bottom:20px;
color:#fff;
border:1px solid #c0c0c0;
background: #316b94;
}

#destacados ul { /*NO TOCAR*/
list-style:none;
}

/*ENLACES*/
#destacados a:link {color:#fff;}
#destacados a:visited {color:#fff;}
#destacados a:hover {color:#fff;}

/*IMAGEN*/
#destacados .item-thumbnail img {width:64px;height:64px;background:#316b94;border:1px solid #c0c0c0; padding:6px;}

/*TÍTULO*/
#destacados .item-title {font-size:28px;}

/*RESÚMEN*/
#destacados .item-snippet {font-size:14px;}

/*BOTÓN LEER MÁS*/
#leermas  {color:#2d2d2d; border:1px solid #c0c0c0; padding:5px;border-radius:5px;float:right;}

Guarda los cambios y listo.

Paso 3: Configurando el gadget:

Ahora en "Diseño | Elementos de la página" deberás configurar el gadget, se sitúa sobre las entradas, deberás establecerlo tal como aparece en la imagen:


Guarda los cambios una vez hayas finalizado y listo.


Actualización:

Dejo un demo a su disposición para comprobar cómo se vé el gadget:

No hay comentarios:

Publicar un comentario