BloggAyuda .:: Tecnologia diaria para la vida ::.

Mostrando entradas con la etiqueta Gadget. Mostrar todas las entradas

1/6/12

Widget "Nube de Etiquetas" en Flash

6:00 Unknown No comments

La Nube de etiquetas flash animado ha sido un widget muy popular para WordPress y Blogger desde hace algún tiempo.

La nubes de tags están bien, al menos como concepto,los límites del html&css hacen que estéticamente sean muy vistosas.

Virtudes:
No hay necesidad de editar nuestra plantilla.
El widget lo podemos colocar en cualquier parte de nuestro blog.
Facil de instalarlo.
Muy vistoso y sin afectar la plantilla.

Inconvenientes:
Por el momento sólo hace la nube con texto plano o con los tags de tu cuenta deblogger. Las palabras son enlaces directos al tag y funciona con Java.

CÓMO INSTALAR LA NUBE DE ETIQUETAS ANIMADA EN FLASH?

Para poner el widget de etiquetas entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código del script.

<div id="w2bFlashContent">
<div style="display: none;">
Flash Labels by <a href="http://www.bloggayuda.blogspot.mx/">BloggAyuda</a></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
blogurl : "http://bloggayuda.blogspot.mx",
color : "000000",
hoverColor : "333333",
backgroundColor: "FFFFFF",
size : 12,
speed : 100,
width : 250,
height : 300,
transparency : true
};
/*]]>*/
</script>
<script src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_new_flash_label_cloud.js" type="text/javascript">
</script>

Lo que esta en color rojo debe ser modificado por su Url de su pagina, así como también su nombre.

Están marcados con diferentes colores las propiedades a modificar, dentro de la nube de etiquetas, en casi de que no entiendan el código no lo toquen, y solo modifiquen lo de color rojo y con eso sera suficiente.

Vista previa:

Continuar Leyendo

30/5/12

Pop-Up de Correo Feed estilo Wordprees

9:30 Unknown No comments

Vamos a instalar un widget, esto que es en realidad un plugin para Wordpress y que tiene tiempo implementado ahora está disponible para blogs de Blogger.
Este widget esta basado en jQuery y cuenta con efecto pop-Up agradable y suave. Donde podemos recibir más suscriptores de correo electrónico con este simple widget y que ademas es muy fácil de instalar en tu blog sin complicaciones.
Cabe mencionar que este diseño es creado por nuestros amigos de Way2Blogging.

Como instalar el widget de suscriptores?

Para poder instalar este widget debemos contar con el plugin de jQuery en la plantilla de su blog. Este paso es necesario, si tu blog ya tiene este plugin instalado no es necesario volver a instalarlo.
Si tu blog no tiene este plugin, debes instalar el Plugin de jQuery.

Debes añadir la siguiente línea de código antes de </ head> etiqueta.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Instalación del Widget:

Mediante la adición de código del widget de la plantilla.

Adición a la plantilla:

Para poner este Widget de "Follow" en el blog, entra en la Edición HTML y antes de </head> pega el siguiente código:

Ya que agregamos el codigo anterior solo damos guardar plantilla y listo quedara agregado dentro de nuestro blog.

Solo deben modificar lo que se encuentra de color lo demás debe dejarse como esta.

Continuar Leyendo

22/4/12

Gadget de Comentarios Recientes

9:00 Unknown No comments

Recientemente blogger actualizo la API para comentarios roscados de blogger . en este widget que que nos proporciona Way2Blogging podemos mostrar el Avatar de comentarios con la versión actualizada de la API de comentarios que nos proporciona blogger.
Se ve realmente espectacular y es un bonito diseño ya que cuenta con varias características que hace muy completo el widget.
Así como has visto mi widget de comentarios recientes que esta colocado en la parte final del blog tambien ustedes la pueden colocar y esto se vera exactamente como el mismo widget de comentarios recientes que tiene Blogg Ayuda.

Ejemplo de widget en Blogg Ayuda:

Características principales del widget:

Widget Título:
Esta parte es donde colocaremos el nombre de nuestro widget sea comentarios o comentarios recientes depende del que ustedes deseen colocar o sea de su agrado.

URL del Blog:
La URL de nuestra pagina donde deseamos insertar el widget, recuerden que sin el no se puede colocar ya que es fundamental colocar el Url.

Número de comentarios recientes:
Es parte fundamental saber cuantos comentarios queremos que se muestren dentro del blog y es aquí donde debemos especificar el numero de comentarios.

Mostrar Imagen de Avatar:
Si, en esta parte podemos elegir si se muestran los avatares de los que comentan incluso el de nosotros.

Tamaño de la imagen del avatar:
Aquí podemos elegir el tamaño de nuestro avatar recuerden que si lo escogemos muy grande puede ocupar gran parte del widget, elijan mas el tamaño que se acerque a lo que ustedes realmente desean mostrar.

Avatar Redondeado:
Nuestro avatar puede ser redondo o cuadrado ustedes eligen si lo desean como esta o no.

Palabras de los comentarios:
Eligan cuantas palabras de los comentarios desean mostrar, es elección si son comentarios largos y completos o cortos y específicos.

Mostrar "más Enlace" en el cuerpo del comentario:
Si quieren que las personas vean no solo el comentario si no por que se izo o cual fue el tema, digan que si en esta parte y tendrán un "mas con Url" a su post donde se realizo el comentario.

Enlace de texto:
Aquí pueden cambiar el típico "mas o more" donde al dar clic nos dirige a la Url del comentario.

Url del avatar por defecto:
En esta parte solo deben elegir el avatar que se mostrara por defecto en los comentarios que las personas hagan y que no cuenten con uno propio este avatar lo pueden modificar las veces que ustedes quieran, solo coloquen la Url de donde provenga la imagen.

Ocultar Enlace Way2Blogging:
Way2Blogging nos pide o nos da a elegir si queremos mostrar su enlace a su pagina o no queremos que se muestre, gran parte de su trabajo es que aceptemos, pero la elección ellos no la proporcionan y hace que sea una decisión de nosotros compartir su esfuerzo, diría yo que si.

Como les mostre las caracteristicas principales del gadget y que son importantes que nosotros las eligamos al crear nustro widget aunque mas alla de buscarlo en la pagina pueden editar el codigo si le entienden un poquito les mostrare como:

Les explico un poco sobre el código, si son expertos programadores o aficionados y le saben mover creo con el color entienden, pero para los que estamos un poco atrasados y queremos aprender veamos como modificar.

De color "Verde" se encuentra la parte donde colocaremos nuestra Url de la pagina que el gadget tomara para los comentarios, la pueden sustituir por su Url del blog o pagina web.

De color"rosa" se encuentran el numero de comentarios a mostrar, los pueden cambiar a su gusto y elección.

De color"azul" se encuentra la elección de mostrar avatar, si lo modifican recuerden que es en ingles.

De color "rojo" se encuentra el tamaño de la imagen de nuestro avatar.

De color "mostaza" podemos elegir redondo o cuadrado la imagen del avatar.

De color "morado" es el numero de caracteres del comentario, recuerden si desean que aparezca todo el comentario , es aquí donde pueden hacer que sea mas extenso.

De color "verde olivo" elegimos si mostrar un enlace de "mas" que nos lleve al comentario completo.

De color "cafe" cambian el nombre del enlace puede ser "Mas" o "Continua" o "More", ustedes eligan.

De color "Carne" aquí va la url de la imagen del avatar que iría por default.

De color "negro" si queremos compartir los créditos de Way2Blogging.

Como ven es una excelente idea tener este widget espero sea de su agrado y que las instrucciones aquí mostradas, sean explicables a ustedes.

Continuar Leyendo

17/4/12

Gadget de Londres 2012 "Juegos Olímpicos"

9:00 Unknown No comments

Los XXX Juegos Olímpicos están cada vez más cerca y muchos tenemos el deseo de demostrar el gran entusiasmo que genera este gran e importante evento sobre todo a los que gustan del deporte y están esperando con ansias este acontecimiento que se celebra cada cuatro años.

Así que para todos aquellos que quieran estar al pendiente de los juegos, mi amigo el potro a creado 3 gadget de cuenta regresiva para las Olimpiadas de Londres 2012 en tres colores distintos y que ha mas de uno los puede impresionar.

Para poner uno de estos tres contadores solo debes Añadir un gadget | HTML/Javascript y ahí pega el código del contador que más te guste o el que mas te impresiona.

<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNVaoFDMsObaq-tm1pQuuxN0QrKS6CMlyFb_een6C5867GNRDeaqxyvVvoFJfMzu8Qz_XQ0KD3ncnp3jm7droNnWJyz17Ay6aQ_pVVjGQx4Fjsd5XqYds8qSRHzNzD7kqD0ec9nEZgiyU/s0/countdown_bg.png"border="0"width="250"height="162"cellpadding="0"><tbody><tr><td><div style="width:145px; height;64px; text-align:center; margin-top:-20px; float:right; font-size:56px;font-family:impact; color:#da0080"><script type="text/javascript">// Cuenta regresiva Londres 2012
// Diseñado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/\$|\,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("July 27, 2012","00","%days%");</script></div></td></tr></tbody></table>

<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDbLOuiHft_LkE6zizhEGwWS8ibBvsCnf6DgNoz0enmoFhr1xcp7fBmMSo3qowjlMj6A6ip_OVzSpKFmuIQ3fdbWyxf84MbMIRJHhx1pu5KVOtzI88V8kCP4rPqYv-1YoN-xqKiz_K62M/s0/countdown_bg.png"border="0"width="250"height="162"cellpadding="0"><tbody><tr><td><div style="width:145px; height;64px; text-align:center; margin-top:-20px; float:right; font-size:56px;font-family:impact; color:#009cde"><script type="text/javascript">// Cuenta regresiva Londres 2012
// Diseñado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/\$|\,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("July 27, 2012","00","%days%");</script></div></td></tr></tbody></table>

<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhteB_ucf9Y_3lK2bwSVE9J6m4JwQWvur3RrRVJfyjQVmQUAQTBmisjrK0LTAU9NFA94jFkm_VLTxJtIniEI25WDex4ej5LqiX5JvXzcLvqyYIHaE0z5yIbKolTksnblBqoFmeIkWWuw8E/s0/countdown_bg.png"border="0"width="250"height="162"cellpadding="0"><tbody><tr><td><div style="width:145px; height;64px; text-align:center; margin-top:-20px; float:right; font-size:56px;font-family:impact; color:#ee8600"><script type="text/javascript">// Cuenta regresiva Londres 2012
// Diseñado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/\$|\,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("July 27, 2012","00","%days%");</script></div></td></tr></tbody></table>

Continuar Leyendo

1/4/12

Ubuntu 12.04 "Precise Pangolin" Widgets

7:30 Unknown No comments

Como muestra importante de Blogg Ayuda a la comunidad linux les dejo unos widgets que se distribuyen desde Ubuntu y que servirán para todos los usuarios de blogs que deseen anunciar la salida de este nuevos sistema operativo desarrollado por Canonical y basada en Unix, espero les agraden los widgets, son varios diseños y muy vistosos y les recuerdo al dar clic a la imagen del widget los lleva a la pagina oficial de Ubuntu donde lo pueden descargar o si desean hacerlo desde nuestro blog les dejo el enlaze de S.O. Linux.

Aquí el código, solo colócalo en tu pagina donde desees:

Descarga el archivo zip

Continuar Leyendo

7/2/12

Rotador de banners

8:47 Unknown No comments

Veremos la manera de poder incluir banners con imágenes ya que es bueno aveces tener en orden las fotos o la publicidad a mostrar para ello realizaremos este post con la idea de mi amigo el potro, bien para lograr un banner cambiante como el siguiente:

Bien para que lo coloquemos haremos lo siguiente: Diseño > Edición de HTML y antes de </head>

<script type='text/javascript'> //<![CDATA[window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;function so_init() {if(!d.getElementById || !d.createElement)return;css = d.createElement('link');css.setAttribute('href','slideshow2.css');css.setAttribute('rel','stylesheet');css.setAttribute('type','text/css');d.getElementsByTagName('head')[0].appendChild(css);imgs = d.getElementById('rotator').getElementsByTagName('img');for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;imgs[0].style.display = 'block';imgs[0].xOpacity = .99;setTimeout(so_xfade,3000); }function so_xfade() {cOpacity = imgs[current].xOpacity;nIndex = imgs[current+1]?current+1:0;nOpacity = imgs[nIndex].xOpacity;cOpacity-=.05;nOpacity+=.05;imgs[nIndex].style.display = 'block';imgs[current].xOpacity = cOpacity;imgs[nIndex].xOpacity = nOpacity;setOpacity(imgs[current]);setOpacity(imgs[nIndex]);if(cOpacity<=0) {imgs[current].style.display = 'none';current = nIndex;setTimeout(so_xfade,3000);}else {setTimeout(so_xfade,50);}function setOpacity(obj) {if(obj.xOpacity>.99) {obj.xOpacity = .99;return; }obj.style.opacity = obj.xOpacity;obj.style.MozOpacity = obj.xOpacity;obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';}}//]]></script>

Ahora antes de ]]></b:skin> lo siguiente:

/* BANNER CAMBIANTE
----------------------------------------------- */
{margin: 0; padding: 0;}
#rotator {
border: 1px solid #000000;
overflow: hidden;
margin: 0px ;
padding:2px;
position: relative;
width: 430px;
height: 60px;
}
#rotator img {
border: 0;
width: 430px;
height: 60px;
}

Las medidas las puedes cambiar de acuerdo al espacio de tu blog o del diseño que deseas, para ajustar el ancho cambia donde dice width y para cambiar el alto en height.

Por último entra a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pega lo siguiente:

<div id="rotator">
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
</div>