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.

  • 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
 

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://lh6.googleusercontent.com/_U0QaeycS3vw/TW_VdGDGwzI/AAAAAAAAAR4/w7AubBYaU_0/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

- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar