El Escaparate: septiembre 2010

Estás en: Inicio » Archivos de septiembre 2010

Set de iconos para Tuenti

Mostrar la Lista de Blogs en movimiento

Es algo que me han preguntado en varias ocasiones y que siempre respondía de forma personal a cada uno. Estos últimos días he vuelto a recibir más consultas sobre esto mismo, hacer que el gadget Lista de Blogs se muestre en movimiento.

Es un efecto no muy complicado de conseguir, utilizando la etiqueta "marquee".
Antes de continuar con la explicación, podéis ver un ejemplo en este blog de pruebas, es el gadget que lleva por título "Mi lista de blogs".

[1] Antes de nada tendremos que añadir el gadget "Lista de blogs" y configurarlo tal como vemos en la imagen para añadir el código necesario, una vez conseguido el efecto del movimiento podremos editar el gadget de nuevo si así lo queremos.

[2] Una vez añadido y configurado el gadget de esta manera, vamos a Diseño - Edición HTML y marcamos la opción de "Expandir las plantillas de artilugios".
Tendremos que localizar el código del gadget y añadir el código necesarios tal como veis destacado en color:

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

<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"'>

<center><marquee direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='5' bgcolor = '#faf0e6' style='border: #cdaf95 2px solid;padding-left: 10px;' width='260'>
<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'>
<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 == "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 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'>
<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>

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

Modificaciones:

height='300' Es el alto del gadget, a mayor valor, más altura y viceversa.
width='260' Es el ancho del gadget, a mayor valor, más anchura y viceversa.
bgcolor = '#faf0e6' Color de fondo del gadget. Si no queremos usarlo eliminamos ese código (bgcolor = '#faf0e6'). Para cambiar el color, sustituimos el código del color (#faf0e6) por el escogido.
border: #cdaf95 2px solid; El borde del gadget. Si no queremos borde, ponemos su valor (2px) en 0, si lo queremos más o menos ancho, aumentamos o disminuimos ese valor. Para cambiar su color, colocamos en #cdaf95, el código del color escogido.
scrollamount='5' Velocidad de desplazamiento, aumentamos o disminuimos el valor (5) para variar la velocidad.
direction='up' Dirección del desplazamiento, en este caso hacia arriba, si ponemos down en lugar de up, el desplazamiento será hacia abajo.

[+/-]

Menú en las nuevas plantillas de diseño

[+/-]

Añadir la función de responder a los comentarios

[+/-]

Gadget de iconos fijo con opacidad

Justo en la entrada anterior veíamos como colocar un gadget de iconos fijo en nuestro blog.

En un comentario de esa misma entrada, nuestra amiga *Eva* me solicitaba si era posible el añadir a los iconos del gadget opacidad, tal como habíamos visto en el gadget de marcadores sociales en la sidebar.

El procedimiento es el mismo, añadimos una clase a cada icono y, mediante ese dato, aplicamos el CSS necesario para conseguir la opacidad.
El resultado podéis verlo en el mismo blog de pruebas donde había colocado los otros, pero en este caso el gadget con opacidad se muestra a la izquierda de la pantalla.

Copiamos y pegamos el código en un gadget HTML/Javascript y hacemos los cambios necesarios tal como veíamos en la entrada anterior, para incluir nuestros datos.

<div style='position: fixed; bottom: 30%; right: 1%;'/>
<a class="twitter" href="http://www.twitter.com/TWITER USUARIO/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjny0Yl60ssoBJEkK5LHwGe-UXBXMHp9SpMEeW7brA-Fw8WFdDCGVkHjaVaz0daF9-9-GIPSMf4u_1GEvHG5O1SbvMzRObLEpkRfjE3WBVhwBWBbQEL0cBm8LihM_icEzASREh3pj40LB9o/s1600/Twitter+2-32.png" /></a><br />
<a class="facebook" href="http://www.facebook.com/FACEBOOK USUARIO/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFh2GrgiqHkUfzC35bvvddbtEuNM2bgKqTjY0t_Bg4iP7ZQTN_YNffktR80F7hCDcmRtD0W1TsGboQCcfyN1DDDHpnKFjOHq0AaUHU7lEQtsLtn1ary7oOxwU_KsAx7QY8fK6yCgiLM6OE/s1600/Facebook-32.png" /></a><br />
<a class="rss" href="http://feeds.feedburner.com/FEEDBURNER ID" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHgzAtnGicgyovrSkJIC55hl8KDqiS1hPVlGjJv53HPzmqo_muYhzLScdTXEOTVcgPwHH1B_iMJIRm8b0y_bSz_ObEKQuB8O707dAaddw2FE1xrGM-3xWj2hbjWGa9NteeweLrY9EXF4Lw/s1600/RSS-32.png" /></a><br />
<a class="rss-mail" href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER ID&loc=es_ES" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg32_GqQWYEY-bysoZzgyXWdzbKwgo-dyMQDZQnsMnSiRQ3PTvAVMt2wy0D7lyBHJDcJkyNVDNeiDgInLUv-ehXU2Ln_wzb0x_trbrgYfkRYNe5Mem07Y3u_YZ93xlb0Q6g04op_MUlxVs7/s1600/Mairssl_32.png" /></a></div>
<style type='text/css'>
a.rss img {opacity:0.8;}
a.rss:hover img {opacity:1;}
a.twitter img { opacity:0.8;}
a.twitter:hover img { opacity:1;}
a.facebook img { opacity:0.8;}
a.facebook:hover img { opacity:1;}
a.rss img { opacity:0.8;}
a.rss:hover img { opacity:1;}
a.rss-mail img { opacity:0.8;}
a.rss-mail:hover img { opacity:1;}
</style>

Nota:

El gadget se mostrará a la derecha de la pantalla tal como el anterior, para cambiarlo a la izquierda tendremos que cambiar right por left (en la primera línea del código).