Mostrando entradas con la etiqueta gadgets. Mostrar todas las entradas
Mostrando entradas con la etiqueta gadgets. Mostrar todas las entradas

sábado, 11 de agosto de 2012

gadget de entradas recientes para blogger


gadget-entradas-recientes-imagenes-moviles
La visualización de una lista de los últimos posts de nuestro blog en la barra lateral es una gran manera de mantener ocupados a sus visitantes. Hay un montón de gadgets que permiten mostrar los artículos mas recientes y que usted puede utilizar, pero el gadget que se cubre en este post sin duda atraerá la atención de la gente en su blog.
Este widget de mensajes recientes es similar a los mensajes estándar recientes con imágenes en miniatura, pero con una vuelta de tuerca. Combina plugin de jQuery vticker para producir un efecto móvil simple y elegante que se desplaza sin problemas a través de los mensajes.

Ahora lo que tenemos que hacer es agregar el mismo a nuestro blog, si no recuerda como hacerlo puede consultar "como agregar un gadget a un blog"





Cambio importante:

En la linea

<script src='http://www.YourBlogURL.blogspot.com/feeds/posts/default?

Debe reemplazar www.YourBlogURL.blogspot.com por la URL de su blog!


Cambios opcionales:

Hay muchos cambios que se pueden hacer con el código, la edición principal que usted puede desear  hacer es modificar el número de posts que se van a desplazar y mostrar. Para cambiar el número de posts debe modificar la siguiente línea:

numposts = 7;

Ahora, para cambiar el número de mensaje que se muestran en cualquier momento dado, cambiar el presente atributo :

showItems: 3

Para cambiar el intervalo de tiempo y la velocidad de cambio de desplazamiento (los valores en microsegundos)

speed: 500

pause: 3000 

Otros cambios, con los que usted puede ir probando son los de las variables que tienen asignado un valor en false y pasarlo a true, por ejemplo:

var showpostdate = false; // Para ver la fecha pasar a true!






domingo, 10 de junio de 2012

Como crear un widget?

El desarrollo de widget,gadgets o plugins se ha convertido en un pasatiempo productivo para todos.
Los widgets son pequeñas aplicaciones, que facilitan la distribución de su contenido en otros blogs y sitios web, de forma gratuita.Asi como un video de YouTube que puede poner en su sitio y dejar que sus lectores accedan al mismo y lo distribuyan.
La tecnología está cambiando la cara rápidamente con las mejoras y mejores actualizaciones.
Blogger Template edición es una opción de código abierto para la gente talentosa como usted. Sólo se tarda un mes o dos para aprender cosas que ni siquiera ha soñado. En el tutorial de hoy me centraré en los widgets por sí solos.

¿Cómo son los Widgets de Blogger codificado?

Los Widgets son creados en dos pasos

    Programar El Widget
    Diseñar El Widget
DiseñandoWidgets

 Programación del Widget:

Los widgets de Blogger están programados con XHTML, jQuery y JavaScript.La mayor parte de la codificación se lleva a cabo usando XHTML, que es una forma avanzada de la combinación de XML con HTML. Las normas w3 para XHTML son muy estrictas y no obedecer a ellas genera mensajes de error que se ven durante la edición de sus plantillas.

Diseño del widget:

Después de programar un widget viene la etapa donde definiremos el estilo, colores de fuente del widget , bordes, colores de fondo, etc usando CSS que significa Cascading Style Sheet. HTML se utiliza para construir la estructura del widget y CSS se utiliza para vestir a esa estructura. Tomemos un ejemplo del texto a continuación,

                    Bienvenido a Planeta WebCash!

Código HTML:




 Ahora lo veo, después de labrar con CSS:


CSS CÓDIGO:






No debe confundirse con la gran porción de código anterior, el CSS es el lenguaje web más interesante y más fácil de todos.
Así que ¿Cómo va a diseñar un widget?

Si usted desea convertirse en un diseñador o tener los conocimientos suficientes como para personalizar una plantilla, es un momento oportuno el aprendizaje tanto de CSS y HTML.
Hay tres importantes consejos prácticos que podría dar:

-Aprender Photoshop. Encontrar un instituto cercano, donde se enseña Photoshop. Tomar un curso de no más de 1 mes.
-Comience a leer en forma particular los tutoriales de HTML en w3schools.
-Después de aprender los conceptos básicos de HTML a continuación, iniciar los tutoriales de CSS en w3schools.
Este trabajo duro le llevará no más de un mes. A medida que usted incorpore conocimientos los irá poniendo en práctica y cada vez se irá acercando mas al objetivo de transformarse en un diseñador!
Después de haber desarrollado sus habilidades de diseño, entonces también puede ir y empezar a aprender JavaScript, PHP, jQuery, etc
He compartido lo que es práctico y accesible para todos ustedes. Si usted piensa que puede contratar a un profesor para HTML y CSS, entonces es aún más bueno, pero realmente en la actualidad internet nos ofrece una fuente inagotable de información, si uno tiene dedicación y encuentra los sitios adecuados usted puede ir desarrollando todas las habilidades para convertirse en una fabrica de habilidades, sitios como W3Schools lo van a poder ayudar para lograr ese objetivo, es cierto que es un sitio en ingles , pero hoy en día con la ayuda de la inteligencia artificial y los traductores las barreras del idioma se estan desmoronando.
Lo mejor de W3Schools es que usted puede utilizar su editor de HTML para crear y obtener una vista previa del código al mismo tiempo.

domingo, 27 de mayo de 2012

Gadget - El pajarito de twitter saliendo del cascaron de un huevo

PajaritoTwitter
Muchos lectores habrán encontrado en diferentes blogs el pajarito de Twitter que vuela por nuestro blog y cumple principalmente dos finalidades, adornar el sitio y brindar la posibilidad a los visitantes de acceder a nuestro Twitter si hacen click sobre el mismo, hoy les dejo otro gadget que tiene el mismo protagonista pero esta vez saliendo de un cascarón de un huevo.






Para implementarlo copia el siguiente código y agregalo en tu blog, si no recuerdas como hacerlo leer "Como agregar un gadget al blog"
Puedes modificar el tamaño cambiando los valores height y width.
Para finalizar deberás colocar tu usuario en Twitter en donde aparece TU_NOMBRE_EN_TWITTER 

sábado, 26 de mayo de 2012

Gadget de la camara de vigilancia para blog

Un gadget para blog curioso que nos permite adornar nuestro sitio es  la camara de vigilancia, podes verla en la parte superior derecha de planeta webcash, está simpática cámara en movimiento vigila siempre tu Blog .
Para poder agregar el gadget de la camara en el blog , tienes que copiar el codigo que se indica en la caja de texto y pegarlo en un gadget en HTML-Javascript en tu blog, puedes consultar "como agregar un gadget a mi blog" si tienes dudas sobre como hacerlo.



martes, 13 de marzo de 2012

Cajas de texto en movimiento

Aqui te presento una caja de texto en movimiento para tu blog.




Esta caja de texto contienen palabras que se mueven en dirección hacia arriba.

lunes, 27 de febrero de 2012

Gadget para blogger reloj

Aqui les dejo algunos gadgets de relojes para tu blog:









!









                                                           























martes, 21 de febrero de 2012

Gadget traductor de idiomas

Si te gusta el traductor que tengo en mi blog aqui te dejo el codigo correspondiente ,si eres principiante y aun no has incorporado ningun gadget , te recomiendo leer primero  "como agregar un gadget en blogger".

sábado, 18 de febrero de 2012

Como aumentar el tamaño de las letras


Para aquellas personas que puedan visitar tu blog y quizas por problemas visuales quieran cambiar el tamaño del texto dejo este sencillo gadget que permite que los visitantes puedan cambiarlo a su gusto.

Para lograr esto sólo pegamos este código en un elemento HTML/Javascript si no recuerdas como hacerlo lee como agregar gadgets a mi blog antes!

Como agregar gadgets a mi blog

Si ya estás familiarizado con Blogger este mini tutorial puede resultar algo obvio, pero si estas dando tus primeros pasos puede ser de gran ayuda.
Aquí te mostraré paso a paso como agregar los accesorios para el blog gratis, que encuentras en planetaWebCash.
Si ya tienes una página web o un sitio creado por ti, no creo que agregar algunos de los accesorios o trucos que aquí encuentras te provoque alguna dificultad, y si tu bitácora no es de blogger seguro que el procedimiento es similar. 

Primero haces clic en diseño







Clic en Añadir gadget





Clic en HTML / JavaScript




Pegar el el código



Luego le das a "guardar" y seleccionas la ubicacion preferida de tu gadget en la plantilla de diseño , espero que el tutorial te haya resultado útil y puedas darle mas vida a tu blog!

miércoles, 15 de febrero de 2012

Cajas de texto

Ver codigo:


<div align="center"><div style="BORDER-RIGHT: border-style: ridge; border-color: red; BORDER-TOP: border-width: 4px; border-style: ridge; border-color: red; BORDER-LEFT: border-width: 4px; border-style: ridge; border-color: red; WIDTH: 100%;BORDER-BOTTOM: border-width: 4px; border-style: ridge; border-color: red; SCROLLBAR-FACE-COLOR: black; SCROLLBAR-HIGHLIGHT-COLOR: black; OVERFLOW: scroll;SCROLLBAR-SHADOW-COLOR: white; COLOR: #ff88e7; SCROLLBAR-3DLIGHT-COLOR: #ddaaff; SCROLLBAR-ARROW-COLOR: #99cc33; SCROLLBAR-DARKSHADOW-COLOR: white; HEIGHT: 130px; BACKGROUND-COLOR: white"> <span style="span-family:tahoma;span-size:85%;color:#99cc33;"> <strong> <p align="center"> </p> </strong> </span> </div></div>



Planeta webcash
Cajas de texto

[Modificaciones]

<div align="center">

Esta linea hará que el texto se centre.

Pueden colocarse tambien:
Left, Rigth.



BORDER-RIGHT: border-style: ridge; border-color: red;

Borde de la derecha.

Pueden colocarse tambien:
colores en ingles




BORDER-TOP: border-width: 4px; border-style: ridge; border-color: red;

Borde de arriva.

Pueden colocarse tambien:
colores en ingles y puede modificarse el grosor


BORDER-LEFT: border-width: 4px; border-style: ridge; border-color: red;

Borde de la izquierda.

Pueden colocarse tambien:
colores en ingles y puede modificarse el grosor



WIDTH: 85%;

Ancho de la caja

Pueden colocarse tambien:
pueden colocarse de 0 a 100% o de 0px hasta el grosor deseado



BORDER-BOTTOM: border-width: 4px; border-style: ridge; border-color: red;

Borde de abajo.

Pueden colocarse tambien:
colores en ingles y pueden colocarse el grosor



SCROLLBAR-FACE-COLOR: black;

color de barras de desplazamiento.

Pueden colocarse tambien:
colores en ingles



SCROLLBAR-HIGHLIGHT-COLOR: black;

color de barras de desplazamiento(haciento clic en ellas).

Pueden colocarse tambien:
colores en ingles



SCROLLBAR-SHADOW-COLOR: white;

color de brillo de barras de desplazamiento.

Pueden colocarse tambien:
colores en ingles



COLOR: #ff88e7;

color de texto.

Pueden colocarse tambien:
colores en ingles



SCROLLBAR-3DLIGHT-COLOR: #ddaaff;

color de fondo de barras de desplazamiento.

Pueden colocarse tambien:
colores en ingles




SCROLLBAR-ARROW-COLOR: #99cc33;
color de flecha de barras de desplazamiento.

Pueden colocarse tambien:
colores en ingles



SCROLLBAR-DARKSHADOW-COLOR: white;

color de sombra de barras de desplazamiento.

Pueden colocarse tambien:
colores en ingles



HEIGHT: 100px;


Largo de la caja
Pueden colocarse tambien:
pueden colocarse de 0 a 100% o de 0px hasta el largo deseado



BACKGROUND-COLOR: white

Color de fondo de caja

Pueden colocarse tambien:
colores en ingles



<span style="span-family:tahoma;span-size:85%;color:#99cc33;">

Tamaño de texto y color

Pueden colocarse tambien:
pueden colocarse de 0 a 100% o de 0px hasta el grosor deseado y colores en ingles



<strong>

hace que el texto este en negrita