Tutoriales Sobre Blogger: Agregar Ultimas Entradas con Efecto ToolTip agregado

En este tutorial veremos como Agregar Ultimas Entradas con Efecto ToolTip, en este caso lo agregaremos de una forma  particular, mediante el gadget Lista de Blog, sin utilizar Javascript y CSS.





Antes de Agregar este Articulo vamos a ver una demostración.

Demostración

• Paso 1: Vamos a Blogger>>Diseño>>Añadir un Gadget>>Lista de Blog
• Paso 2: Agregamos los siguientes cambios al Gadget

Marcamos las Casillas

 Título del elemento más reciente

 Fragmento del elemento más reciente

 Miniatura del elemento más reciente

Titulo: lo dejamos por Defecto, no lo cambiamos ya que de esta manera lo buscaremos en la Plantilla HTML mas adelante

Ver Imagen

• Paso 3: Todavía en el Gadget damos click: "Agregar un blog a tu lista"

• Paso 4: En "Añadir por URL" agregaremos las siguientes URL

Nota:- Añades tantas Entradas quieras mostrar. En este caso agregaremos 5

Index 1

http://URL.blogspot.com/feeds/posts/default/?start-index=1

http://URL.com/feeds/posts/default/?start-index=1

Nota:- Si tienes dominio personalizado agregaras la URL de tu domio (.com), encambio si no lo tienes agrega blogspot.com

Index 2

http://URL.blogspot.com/feeds/posts/default/?start-index=2

http://URL.com/feeds/posts/default/?start-index=2

Index 3

http://URL.blogspot.com/feeds/posts/default/?start-index=3

http://URL.com/feeds/posts/default/?start-index=3

 Index 4

http://URL.blogspot.com/feeds/posts/default/?start-index=4

http://URL.com/feeds/posts/default/?start-index=4

Por Ultimo Index 5

http://URL.blogspot.com/feeds/posts/default/?start-index=5

http://URL.com/feeds/posts/default/?start-index=5

• Paso 5: Guardamos el Gadget

Ahora iremos a la plantila HTML

• Paso 6: Blogger>>Plantilla>>Edicion HTML>>Expandir Plantilla de Artilugios
• Paso 7: Buscamos la siguiente linea 

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'/>

Paso 8: Remplazamos <b:widget id='BlogList2' locked='false' title='Mi lista de blogs' type='BlogList'/> por lo siguiente

<b:widget id='BlogList1' locked='false' title='Bài mới nhất' type='BlogList'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
   <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
   <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
    <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
     <b:loop values='data:items' var='item'>
      <li expr:style='data:item.displayStyle'>
       <div class='blog-content'>
        <div class='item-content'>
         <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
          <b:if cond='data:item.itemThumbnail'>        
           <img class='item-thumbnail' expr:alt='data:item.itemTitle' expr:src='data:item.itemThumbnail.url' height='40px' width='40px'/>
<b:else/>
           <img alt='no image' class='item-thumbnail' height='40px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW5Gxq7gP_Vhp_lddG1bOTI6L6pbPTTOnD7DfDFEVu3jwyp7c2FBgvenMJ4g4YVim0EBcB3U5Jlne9giA-rQr4sMLvr9vfabzr5yNclR8zCt2MZpxo4_arWAiUl3NQEL53XSEau7yX32Y/s288/noimage.png' width='40px'/>
          </b:if>
         </b:if>
         <b:if cond='data:showItemTitle == &quot;true&quot;'>
          <span class='item-title'>
           <b:if cond='data:item.itemUrl != &quot;&quot;'>
           <a class='tooltips' expr:href='data:item.itemUrl'><data:item.itemTitle/><span><data:item.itemSnippet/></span></a>
           <b:else/>
           <span><data:item.itemSnippet/></span>           </b:if>
          </span>
         </b:if>
        </div>
       </div>
       <div style='clear: both;'/>
      </li>
     </b:loop>
    </ul>
    <b:if cond='data:numItemsToShow != 0'>
     <b:if cond='data:totalItems &gt; data:numItemsToShow'>
      <div class='show-option'>
       <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
        <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
       </span>
       <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
        <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
       </span>
      </div>
     </b:if>
    </b:if>
   </div>
  </div>
 </b:includable>
</b:widget>

Ahora agregaremos el efecto ToolTip

• Paso 9: Todavia en la Plantilla buscamos la siguiente linea

]]></b:skin> 

• Paso 10: Justo por encima de ]]></b:skin> agreamos el estilo CSS del Tooltip

.tooltips {position:relative}
.tooltips span {display: none}
.tooltips:hover span {display: block;background: #212121;padding: 10px;border: 1px dashed #ccc;position:absolute;color: #ccc;width: 240px;z-index: 100;top: 0;left: -340px} 

• Paso 11: Guardamos la Plantilla y listo ya estaremos disfrutando de nuestro Gadget Ultimas Entradas con ToolTip