LISTA BLOGS MOVIMIENTO BLOGGER

TUTORIAL AYUDA PARA TU BLOG
Lo más probable es que si tienes un blog en blogger conozcas muy bien que existe la
posibilidad de añadir gadgets (elementos de página) a la sidebar o barra lateral. Uno de
los gadgets más destacados y, al mismo tiempo, más utilizados es el de "Lista de blogs".

Dicho elemento sirve para mostrar lo que lees con un blogroll (lista de enlaces) de tus
blogs favoritos.

El resultado es bastante prometedor ya que los blogs enlazados se van desplazando
hacia arriba, haciendo posible el que tu blog cargue con mayor rapidez.

Puedes ver un ejemplo en este blog de pruebas.

¿Te gusta el resultado? Sigue los pasos para conseguir la lista de blogs en movimiento...

Comprueba que has añadido el gadget "Lista de blogs":

En caso de no tenerlo, agrégalo a tu barra lateral.
Diseño>Edición de HTML>expandimos artilugios

Busca esta línea:
<b:widget id='BlogList1' locked='false' title='Blog de mis amigos'
type='BlogList'>

Lo que ves en naranja es el título de mi gadget. El tuyo tendrá el título que le
hayas atribuido.

Un poco más abajo encontrarás esta otra línea:
<b:includable id='main'>

Ahora borra desde esta línea hasta su etiqueta de cierre </b:includable>
(ambas incluidas) como te muestro a continuación:

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

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId +
"_container"'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == "true"'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>

<div class='item-content'>
<b:if cond='data:showItemThumbnail == "true"'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height'
expr:src='data:item.itemThumbnail.url'
expr:width='data:item.itemThumbnail.width'/>

</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == "true"'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != ""'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == "true"'>
-
</b:if>

<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == "true"'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>

<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems > data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + "_show-n"' style='display:
none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + "_show-all"' style='margin-
left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Una vez eliminado, inserta este otro código en su lugar:


<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId +
"_container"'>
<marquee direction='up' onmouseout='this.start()' onmouseover='this.stop()'
scrollamount='1' scrolldelay='1' style='height: 240px; padding: 4px; border: 2px

solid #cccccc;'><ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon' style='visibility: hidden; display: none;'>
<b:if cond='data:showIcon == "true"'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title' style='margin-bottom: 14px; font-size: 14px; text-
decoration: none;'>
<a expr:href='data:item.blogUrl' style='text-decoration: none;' target='_blank'>
<img src='http://icons3.iconfinder.netdna-
cdn.com/data/icons/Sizicons/12x12/arrow_2_right_round.png'/>
<data:item.blogTitle/>...</a>
</div>
<div class='item-content' style='text-decoration: none;'>
<b:if cond='data:showItemThumbnail == "true"'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height'
expr:src='data:item.itemThumbnail.url'
expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>
<span class='item-title'>
<b:if cond='data:item.itemUrl != ""'>
<a expr:href='data:item.itemUrl' style='color: #006633; text-decoration: none;'
target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == "true"'>
<b:if cond='data:showItemTitle == "true"'>...
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == "true"'>
<div class='item-time' style='margin-top: 6px; color: #006633; text-align: right;'>
<img src='http://icons3.iconfinder.netdna-cdn.com/data/icons/circular%20icons/
bullet_black.png' style='padding-right:

4px;'/><data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='margin-bottom: 14px; border: 3px solid #ccc; clear: both;'/>

</li>
</b:loop>
</ul></marquee>

<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems > data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + "_show-n"' style='display:
none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>

</span>

<span expr:id='data:widget.instanceId + "_show-all"' style='margin-
left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

<b:include name='quickedit'/>
</div>
</div>
</b:includable>

En caso de querer editar el movimiento, reemplaza el valor 1 (marcado en rojo)
por 2, 3, 4...

Para cambiar la dirección y hacer que los blogs "suban" en lugar de que "bajen"
cambia down por up
Guarda el gadget para terminar.

¡Ya podrás disfrutar de una bonita lista en movimiento!

CREADO POR: RAMON SANCHEZ

LISTA BLOGS MOVIMIENTO BLOGGER

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie LISTA BLOGS MOVIMIENTO BLOGGER

Ähnlich wie LISTA BLOGS MOVIMIENTO BLOGGER (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

LISTA BLOGS MOVIMIENTO BLOGGER