Lista de blogs en movimiento

 Antes de hacer nada, guardar la plantilla, por si las moscas. Aunque no tiene ninguna complicación. Os dejo con la explicación:

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='Mi lista de blogs' 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: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-icon'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<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 == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<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 == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<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 == &quot;true&quot;'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
<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 &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;'>

Unstyle='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>

( se borra solo lo que está en rojo)

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

<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;'>
<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 + &quot;_blogs&quot;'>
<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 == &quot;true&quot;'>
<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 == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<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 == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' style='color: #003399; text-decoration: none;' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == &quot;true&quot;'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>...
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
<div class='item-time' style='margin-top: 6px; color: #003399; 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 &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>

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

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

Para cambiar la dirección y hacer que los blogs "bajen" en lugar de que "suban" cambiar up por down.

Para cambiar el color, cambiar el número marcado en rosa.
Aquí tenéis la tabla de colores.

Guarda el gadget para terminar.

 Visto en : El balcón de Jaime

Poner vídeos en Blog

Primero entramos en la página de vídeos, de donde queremos sacarlo, por ejemplo Youtube.

En la página una vez seleccionado el vídeo que queremos, pinchamos en el, como cuando vamos a verlo. En esa misma página tienes por debajo dos códigos. Uno es el enlace para acceder a la página, y normalmente la nomean como URL, y luego tienes el segundo que pone insertar y en algunos casos Embed.

Copiais el código, y lo pegáis en la entrada en edición HTML, en la foto veréis donde tenéis que darle. Luego podéis seguir escribiendo en Redactar.

Widgets en uno solo

No es tan complicado como parece, ni hace falta hacerse un curso de HTML.
Con estas nociones básicas lo puedes hacer :

Para dejar un espacio entre cada uno  se usa  &nbsp; , entre cada código.
 quedaría así:

Para separarlos como un párrafo o salto de línea se usa  <P>  entre los códigos.
Y quedaría así :

Diseñador de plantillas

En Blogger in draft ( blogger en borrador), ahora se puede diseñar nuestra plantilla, sin perder nada de lo que tenemos.

Hay varios formatos a elegir, fondos, columnas, pie de página con columnas...cantidad de herramientas. Solo hecho en falta, que no hayan puesto una opción para subirnos, nuestra propia imagen ( o no la vi...).

De cualquier modo, antes de hacer cualquier cambio ( por si acaso) guardar siempre vuestra plantilla  primero.

Buscador de Iconos

Os presento una herramienta muy útil :

El buscador de Iconos  - Iconfinder

Solo tiene un por, que tenéis que buscar en ingles!

Aquí probé a buscar Home :

Flecha Arriba

Para poder tener la flecha en su blog solo tendrán que ir a Plantilla----->Editar HTML----->Expandir artilugios----->y buscamos este codigo </body> , justo antes colocaremos este otro código:

<a href='#'><img alt='ir arriba' border='0' src='url de la imagen' style='position:fixed; bottom:0; right:0;'/></a> 

En ese codigo se puede cambiar la parte que dice ir arriba, por cualquier otra frase o palabra que quieran que sea mostrada cuando el cursor pare sobre la imagen. Tendran que cambiar donde dice URL de la imagen por la direccion de la imagen que quieran poner.

Una vez escogida la imagen, subirla a Tynpic (por ejemplo), y obtenéis la dirección que os sirve - Enlace directo.

Os dejo la dirección de una :

http://i50.tinypic.com/ibw8hu.png








Podéis buscar la imagen que queráis en google imagenes, ponéis icono flecha y a escoger!