Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
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