Mi perro no tiene cuenta en Twitter ¿y el tuyo?

Algunos recordarán Mattel la reconocida firma de juguetes,  en la Feria del Juguete de Nueva York del próximo mes va a lanzar el Puppy Tweets.

¿Suena lo de "Twetts" ¿verdad? no vamos muy desencaminados, el Puppy Twetts es es una etiqueta de plástico con sonido y sensor de movimiento y está creado para que nuestro perro pueda twittear como una persona, esto se consigue colgando el Puppy Twetts del collar y colocando un receptor de USB en nuestro PC. Como es lógico es imprescindible que tenga una cuenta en Twitter

El Puppy Twetts ya viene con con algunos tweets preseteados que que serán emitidos por las actividades del perro.

Susan Russo, director de marketing de Mattel afirma que intentan crear un espacio en el mercado combinando el gran amor por los perros y la fiebre por las redes sociales.

Jim Silver analista de la empresa juguetera es más realista y llama a las cosas por su nombre, afirma que es algo "curioso" y que el sentido que tiene es la plata, ya saben...  dinero.

Tweets Puppy estará disponible en tiendas minoristas para el otoño, y tendrá un precio de venta sugerido de $ 29.99.

¿Tendrá tan buena acogida como piensa Mattel?

¿En un futuro veremos actualizarse el muro de nuestro perro en Facebook?

Date prisa si quieres encontrar disponible el nombre de tu perro en Twitter no es tan sencillo como piensas. Con lo presumido que es Yako veremos como se toma esto

Nueva función de blogger para conservar widgets al cambiar la plantilla de tu blog

¿Cuántos de ustedes la piensan, lo posponen o simplemente descartan la posibilidad de cambiar su plantilla, por que se resisten a la idea de tener que guardar el contenido de cada widget,  para después tener que ponerlos en la nueva plantilla?



 Pues eso es cosa del pasado, ahora cuando cambias tu plantilla aparece una opción que te permite conservar todos los gadgets o widgets que tengas en la plantilla que estas usando.



Para  conservar todos widgets, solo tienes que escoger la opción de dice: Mantener widgets que aparece al subir la plantilla nueva a tu blog, y automaticamente el contenido de estos se conservará en tu plantilla.



Ahora sí, a cambiar de plantilla se ha dicho.

Wallpapers geeks

Wallpapers a full

Arbol Charyou

Theme Bin

Deviantart

CyberNETicos servicios de alojamiento

CyberNETicos es la empresa líder en el sector de hosting ofreciendo servicios de alojamiento web, servidores dedicados, VPS, registro de dominios y streaming de audio por Internet.

En la actualidad aloja más de 20,000 páginas web entre sus más de 4.000 clientes, 600 distribuidores, 400 emisoras de radio online, 200 servidores privados virtuales (VPS) y más de 200 servidores dedicados de pymes y particualres.

Cuenta con una plantilla compuesta de técnicos especializados en servidores web, virtualización, hosting, streaming, administración de sistemas linux y windows, soporte de cara al cliente, equipo de diseñadores gráficos, programadores y contables altamente cualificados para poder solucionar cualquier tipo de incidencia o duda relacionada con los servicios ofrecidos por internet.

Algunas características de todos sus planes son: FTP, Estadísticas, Webmail, Perl, PHP, MySQL, Protección Anti-SPAM, Extensiones FrontPage, regalan el registro de un domino al contratar cualquier plan de alojamiento web anualmente que se renovará gratis cada año se continúa utilizando Cyberneticos.

La plantilla está compuesta de técnicos especializados en hosting, administración de sistemas linux, soporte de cara al cliente, equipo de diseñadores gráficos, programadores altamente cualificados y certificados y un departamento de contabilidad para poder solucionar cualquier tipo de problema.

En Cyberneticos.org el panel de administración está disponible para que podamos probarlo antes de decidirnos a adquirir algún plan de hosting.

Galería de imágenes con jQuery

Hoy vamos a ver cómo hacer una galería de imágenes muy vistosa y sencilla de implementar con jQuery, idea de nuestros amigos de Sohtanaka.

Si desean ver cómo queda, pueden ver la DEMO en uno de mis blogs de pruebas.



1.§ Lo primero que haremos será alojar la siguiente imagen, ya sea en Blogger o en Imageshack, Photobucket,etc.



2.§ Ingresamos a Diseño/ Edición de HTML y con ayuda de CTRL+F buscamos ]]></b:skin> y encima de éste pegaremos el siguiente código CSS:

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(Aquí-URL-imagen) no-repeat center center;
border: none;
}

Reemplazamos Aquí-URL-imagen por la imagen que subimos en el paso anterior.
3.§ Ahora buscaremos </head> y debajo pegaremos el siguiente script:

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);
} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});
//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {
var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});
});
</script>

Damos click a guardar.
4.§ Ahora, cada vez que vayamos a usar esta galería deberemos de colocar los enlaces de esta forma (podemos colocarlos en una entrada):

<ul class="thumb">
<li><a href="#"><img src="URL-IMAGEN" alt="Texto" /></a></li>
<li><a href="#"><img src="URL-IMAGEN" alt="Texto" /></a></li>
<li><a href="#"><img src="URL-IMAGEN" alt="Texto" /></a></li>
<li><a href="#"><img src="URL-IMAGEN" alt="Texto" /></a></li>
</ul>

Reemplazamos lo que está en negrita y listo, ya tenemos nuestra galería de imágenes.

Sombras con CSS

La propiedad box-shadow nos permite añadir sombra a una imagen, párrafo o bloque (DIV).

El problema es que esta propiedad no está disponible en todos los navegadores y debemos añadir la propiedad que cada navegador va incorporando.

Estos datos son proporcionados por Vagabundia y es cuestión de recordarlos.

Firefox 3.5 en adelante:
-moz-box-shadow: 5px 5px 5px #C0C0C0;

WebKit, Chrome y Safari:
-webkit-box-shadow: 5px 5px 5px #C0C0C0;

Internet Explorer 8
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";

Internet Explorer en general:
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);

Para versiones de Internet Explorer anteriores a la 8 es necesario añadir width o height.
Podemos añadir los estilos de la sombra directamente donde vamos a añadirla.

Esto sería el contenido del bloque

<div style="-moz-box-shadow: 0px 0px 8px #C0C0C0; border: 1px solid rgb(204, 204, 204); margin-bottom: 1.5em; padding: 1px;"><div style="padding: 0.5em; text-align: center;">Esto sería el contenido del bloque</div></div>

También podemos añadirlos a la hoja de estilos antes de ]]></b:skin>

.sombra-div {
height:30px;
padding: 10px;
width: 450px;
font-size: 18px;
margin: 10px auto;
text-align: center;
border: 1px solid #C0C0C0;
background-color:#F0C2D1;

-moz-box-shadow:4px 4px 3px #ccc;
-webkit-box-shadow: 4px 4px 3px #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);

}

Donde queremos mostrar el DIV añadimos:

<div class="sombra-div">

Esto sería el contenido del bloque

</div>

Si lo que añadimos es una imagen:

.sombra-image {
padding: 0.1em;
width: 200px;
height: 210px;
background-color:#FFF;
border: 1px solid #C0C0C0;

-moz-box-shadow:4px 4px 3px #ccc;
-webkit-box-shadow: 4px 4px 3px #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);

}

<div class="sombra-image"><img src="url-imagen" border="0" /></div>

O un texto cualquiera

Aquí cualquier texto

.sombra-tex {
text-shadow: 2px 3px 4px #000;
color: #F0C2D1;
font-size: 48px;

filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);

}

<p class="sombra-tex">Aquí cualquier texto </p>

Suerte Bilosony2™

PunyPng » reducir tamaño de archivo de imágenes

Cada vez que agregamos algún elemento a nuestro blog, influye decisivamente en el tiempo de carga de la misma.

Hoy, buscando en internet, encontré esta herramienta muy útil, pues sirve para reducir el tamaño de archivo de una imagen. Por ejemplo, si tenemos una imagen, que pesa 105kb, podemos comprimirla de tal modo que sólo pese 62 kb... ¡y conservando la calidad de la imagen!



Además es bastante sencilla de usar, pues lo único que tendremos que hacer será subir nuestra imagen.

Esta útil herramienta soporta los siguientes formatos : PNG, JPG, GIF, y Gifs animados.

PunyPng

Google Pages cierra definitivamente

Hace bastante tiempo que Googles Pages anunciaba que cerraba sus puertas, los usuarios que teníamos archivos allí los recuperamos y buscamos un nuevo alojamiento.

Google Sites era el sustituto, sin embargo los archivos js. no estaban permitidos cosa que más tarde han solucionado.

Los usuarios de Blogger formaron una piña, todos buscaban alojamiento gratuito que permitiera subir los archivos en cualquier formato, todos compartían impresiones y como no, información.

En aquellos días era un descontrol pero me quito el sombrero ante la respuesta del personal no el de Blogger precisamente sino los usuarios.

El final de la historia ha llegado, Google Pagess dice adiós y para recordarlo nos avisan en nuestro panel.

Para los que no saben que hacer encontrarán en Ayuda Google información.

Las indicaciones dicen que vayamos a la herramienta Template Updater accedí a la página que nos proporcionan.

Blogger Hosting utiliza las cuentas de Google para acceder.

"Google no se hace responsable de los contenidos de Blogger Hosting ni está asociado con sus propietarios. Si accedes, Google compartirá tu dirección de correo electrónico con Blogger Hosting, , pero no compartirá tu contraseña ni ningún otro dato personal.

Blogger Hosting puedes utilizar tu dirección de correo electrónico para personalizar el uso que hagas de su sitio web."

Lo que hice fue probar con otra cuenta distinta a la que suelo usar para no arriesgarme y me mostraba un aviso donde decía que no tenía archivos alojados con esa cuenta, lógico.

No sabía lo que podía repercutir ese paso,  así que ingresé en mi cuenta de Google Pages y descargué todos los archivos a una carpeta, son archivos que en algún momento les di uso para mostrar algún ejemplo o para descarga y que no se encuentran en la plantilla actual.

Hasta ahí es lo que sé y no creo que aclare mucho las dudas que estoy recibiendo, simplemente me dejo llevar por lo práctico y lo seguro.

Recomiendo prudencia antes de tomar una decisión, y sobre todo que tengan sus archivos alojados en otro sitio, al menos los que estén usando.

Añadir botones a redes sociales

Han sido varias las preguntas sobre la forma de añadir los iconos de redes sociales en la sidebar y no es ningún misterio todo lo contrario, de forma muy simple los añadiremos paso a paso.

Lo primero que haremos será crear una clase para los botones y añadir los estilos a esa clase, para ello nos situamos antes de ]]></b:skin> y añadimos:

#redes-sociales {

text-align: center;

padding:15px;

border: 1.9px dashed #C0C0C0;

}

Con eso estamos diciendo que el contenido dentro del bloque llamado redes-sociales se posicionará centrado y tendrá a su alrededor un espacio de separación con el borde 25px. Para saber si está centrado añadimos un borde que luego podemos quitarle.

Ahora vamos a plantilla de diseño y editamos un nuevo gadget de HTML en su interior añadimos:

<div id="redes-sociales">

<a target="_blank" href="http://feeds2.feedburner.com/tu-nombre-feedburner" rel="alternate" title="Suscribirse" type="application/rss+xml"><img alt="rss" style="border:0" src="url-imagen-Feed" /></a>

<a target="_blank" href="http://twitter.com/tu-nombre-twitter" title="Twitter">

<img alt="en Twitter" src="url-imagen-Twitter" />

</a>

<a target="_blank" href="http://www.facebook.com/profile.tu-perfil-facebook" title="Facebook">

<img alt="en Facebook" src="url-imagen-Facebook" />

</a>

<a target="_blank" href="http://www.youtube.com/user/tu-nombre" title="YouTube">

<img alt="YouTube" src="url-imagen-YouTube" />

</a>

</div>

Donde href es la dirección que sustituimos por cada url que corresponda o copiamos la url de la barra del navegador de la página que vamos a enlazar y reemplazamos la que tenemos por la que copiamos.

En url-imagen añadimos cada imagen en relación con el sitio que vamos a enlazar.

Si queremos que muestre opacidad y al pasar el cursor desaparezca en la hoja de estilos añadimos entonces:

#redes-sociales {

text-align: center;

padding:15px;

border: 1.9px dashed #C0C0C0;

}

a.redes-sociales img {

filter:alpha(opacity=40);

opacity: 0.4;

}

a.redes-sociales:hover img {

filter:alpha(opacity=100);

opacity: 1.0;

}

Y en el gadget los enlaces.

<div id="redes-sociales">

<a class="redes-sociales" href="http://feeds2.feedburner.com/tu-nombre-feedburner" rel="alternate" target="_blank" title="Suscribirse" type="application/rss+xml"><img alt="rss" border:0="" border="0" src="url-imagen-Feed" /></a>

<a class="redes-sociales" href="http://twitter.com/tu-nombre-twitter" target="_blank" title="Twitter"> <img alt="en Twitter" border:0="" border="0" src="url-imagen-Twitter" /></a>

<a class="redes-sociales" href="http://www.facebook.com/profile.tu-perfil-facebook" target="_blank" title="Facebook"> <img alt="en Facebook" border:0="" border="0" src="url-imagen-Facebook" /></a>

<a class="redes-sociales" href="http://www.youtube.com/user/tu-nombre" target="_blank" title="YouTube"> <img alt="YouTube" border:0="" border="0" src="url-imagen-YouTube" /></a>

</div>

Aumentando o disminuyendo el valor de opacity conseguiremos más o menos opacidad.

De esa forma le estamos diciendo que la imagen tiene de opacidad 40 pero al pasar el cursor esa opacidad desaparece porque aumentamos a 100.

Para que los botones salgan en horizontal y no vertical debemos añadirlos en ese orden, es decir un código de enlace seguido de otro y separado por un espacio.

Cómo configurar la función de Leer más en las plantillas (la del Script)

Algunas usuarios me han preguntado si es posible cambiar el largo de las entradas, así como el tamaño de las imágenes, cuando las plantillas tienen la función de resumen automático en las entradas, en mis plantillas.



Esta función depende de un script que he puesto en algunas de ellas, como en el caso de las plantillas: Cuentos de Noche o Blog Rockero.



Configurar esa función es muy sencillo, sólo tienes que ir a:  a Diseño > Edición de HTML y buscar el código siguiente:



( se encuentra casi después de ]]></b:skin> )



<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;

summary_noimg = 700;

summary_img = 700;

img_thumb_height = 180;

img_thumb_width = 200;

</script>





Una vez localizado tendrás que cambiar los valores tomando en cuenta lo siguiente:

summary_noimg = 700;  Aquí se determina el número de caracteres que se mostrarán en la entrada, cuando el post no tenga ninguna imagen a mostrar, en este caso el valor es de 700, cambialo según tu necesidad. summary_img = 700;  Aquí se determina el número de caracteres que se mostrarán en la entrada cuando esta tenga una imagen a mostrar, puedes aumentarlo o disminuirlo. img_thumb_height = 180;  Este valor representa la altura de la imagen en el resumen de la entrada,puedes aumentar o disminuir. img_thumb_width = 200;  Este valor determina el ancho de la imagen a mostrar , de igual forma puedes aumentarlo o disminuirlo.

Como puedes ver es posible modificar el largo de la entrada cuando esta tiene una imagen y cuando no, así como el alto y el ancho de la imagen que aparecerá en el post,  que es mostrado en la página principal.

Nota: Las dimenciones de a imagen determinadas en el script, se mostrarán unicamente en la página principal y no al visualizar el post completo, así mismo, algunas imágenes lucen "estiradas" si estas no son proporcionales a la medida puesta en el Script.

Si te intereza eliminar este Script ve al siguinete post: Como eliminar la función de leer más.



Hasta luego y que tengas un estupendo día!

Mostrar/ocultar la navbar con efecto Hover Over

Hoy vamos a ver otra forma de personalizar un poco la navbar; esta vez haremos que la navbar sea casi invisible o que una parte sea visible, de modo que al pasar el mouse sobre esta parte se muestre toda la navbar.

Pueden ver la DEMO en este blog de pruebas, sólo pasen el mouse sobre la raya azul en la parte superior donde debería de estar la navbar para que vean a qué me refiero.

Y para conseguirlo, es bastante sencillo:

1.§ Ingresamos a Diseño/ Edición de HTML y buscamos ]]></b:skin> y encima de este pegaremos el siguiente código:

#navbar-iframe {
height:5px;
}

/* IE7, IE8, IE6 */
#navbar-iframe { height/*\**/: 30px\9; }

#navbar-iframe:hover {
height:40px; !important;
}

Damos click a guardar y listo. Como ven es bastante sencillo.

Si desean otras formas de ver la navbar, pueden ver estos post:

» Navbar transparente (ver entrada).
» Botón para mostrar y ocultar la navbar (ver entrada).
» La barra de navegación (navbar) (ver entrada).

Be Brave

REFERENCIA:Quintolandia

Diseños Bokeh

En Cosas Sencillas hay una entrada que habla sobre los efectos bokeh y nos proporciona el enlace a inspiredology donde podemos ver más de 30 sitios con ese efecto.

Curiosa yo he querido saber más sobre ese efecto así que fui al sitio indicado y detalladamente me entero que "Bokeh pronunciado 'boqué', es un concepto japonés (boke) que significa desenfoque. En fotografía se utiliza este concepto para referirse a la calidad subjetiva de un objetivo por la estética de las zonas desenfocadas que produce en una fotografía"

Los diseñadores han sabido muy bien sacar partido a ese efecto y podemos verlo como imagen de fondo en algunas páginas.

El resultado es un aspecto actual y atrevido muy distinto a lo que estamos acostumbrados a ver, pero ahí es donde está la gracia y yo, que soy una entusiasmada de las transparencias y todo lo que se le parezca ya me estoy imaginado una plantilla con efecto bokeh. Para aportar ideas os dejo unos pack como entretenimiento del fin de semana. ¿Quién se atreve?

Solución del test en Blogger

Hace un tiempo vimos cómo agregar un test en Blogger; el problema que surgía era que se podían marcar todos los radio-button y todos quedaban seleccionados, lo que no quedaba muy bien.

Así que, analizando nuevamente el código, intenté alguna forma de solucionarlo y afortunadamente la encontré. Es bastante sencilla: sólo debemos de agregar algunos valores y cambiar un poco el código.

1.§ Entonces vamos a Diseño - Elementos de la página - Añadir un gadget- HTML/Javascript y el código a pegar sería el siguiente:

<center><div style="background-"&gt;<span >AQUÍ-LA-PREGUNTA</span></div></center><div style="background-">

<input name="b1" value="V1" onclick="alert('Correcto');V1.checked;" type="radio">ALTERNATIVA1<br>

<input name="b1" value="V2" onclick="alert('Incorrecto');V2.checked;" type="radio">ALTERNATIVA2<br>

<input name="b1" value="V3" onclick="alert('Cerca');V3.checked;" type="radio">ALTERNATIVA3<br>

<input name="b1" value="V4" onclick="alert('Inténtalo de nuevo');V4.checked;" type="radio">ALTERNATIVA4<br></div>

De modo que el resultado será el siguiente:

¿Cuál es la capital de Bielorrusia
Ulster
San Petersburgo
Minsk
Sarajevo

Texto con efecto arco iris

Hace un tiempo vimos cómo agregar el efecto arco iris a los enlaces, efecto que sólo era visible al pasar el mouse sobre el enlace.
Por cierto la DEMO la pueden ver en mi blog de pruebas, en la sidebar con un texto que dice Bienvenidos.

Así que G me pregunó un día si podíamos hacer eso pero en un texto, de forma que el efecto fuese siempre visible.

Hoy vamos a ver que es muy sencillo de conseguir:

1.§ Vamos a Diseño- Elementos de la página- Añadir un gadget y escogemos HTML/Javascript.

2.§ En el nuevo elemento, pegaremos el siguiente script:

<script>
/*
RAINBOW TEXT Script by Matt Hedgecoe (c) 2002
Featured on JavaScript Kit
*/

// **********
var text="Aquí-tu-texto" //
var speed=80 //

if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}

if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script>

Cambiamos Aquí-tu-texto por el texto que tendrá el efecto y damos click a guardar.

Visto en : JavaScript Kit

Páginas en Blogger

Leyendo a Francisco de Blog and web me entero de la última novedad de Blogger, la implementación de páginas, lo que normalmente utilizamos para aportar información extra en un menú con un diseño distinto al resto de entradas y que llamamos páginas estáticas. Eso, que tantas horas nos ha llevado crear y por fin ya tenemos "casi" a nuestro alcance.

Digo casi porque al encontrarse en fase de pruebas sólo podemos acceder a esta funcionalidad desde Blogger in Draft.

Si accedemos a Panel en Editar entradas nos encontramos con Editar páginas / Página nueva y nos permite crear un máximo de 10 páginas independientes.

Si marcamos esta última pestaña nos conduce a un editor de entradas idéntico al que tenemos, cuando editamos esa nueva página y una vez completado el contenido nos pregunta ¿Cómo nos gustaría que apareciese el gadget de páginas.

Si optamos por Barra lateral del blog el gadget se situará en la sidebar.
Si escogemos pestañas del blog el gadget se mostrará justo debajo del header.
Aún escogiendo una de esas opciones siempre podemos arrastrar luego la etiqueta del gadget.

Sin gadget nos permitirá como bien dice Francisco enlazar más adelante la url de esa página y añadirlo manualmente como hacemos con un menú.

Cuando escogemos la opción de gadget tenemos posibilidad de arrastrar las etiquetas de las páginas y decidir que páginas se van a mostrar.

Este sería un ejemplo de los pasos que hemos seguido.

He encontrado algunos fallos lógicos como ha ocurrido otra veces como por ejemplo no mostrarse las imágenes pero es comprensible cuando algo aún se está probando.

Una vez creadas nuestras páginas podemos volver a editarlas o eliminarlas.

Como decía al principio esta función de añadir páginas está casi disponible, mientras tanto manuelvh ha tenido una buena idea, se trata de acceder a las páginas creadas sin problema e incluso podemos crear otras nuevas si nos situamos en "Editar entradas" y una vez ahí en la barra del navegador vemos algó así:

http://draft.blogger.com/posts.g?blogID=XXXXXXXXXX

Cambiamos "posts" por "pages" de esa forma podemos crear y editar nuestras páginas.
Si queremos más información en Blogger Help podemos encontrar algún dato más.
La personalización será poco a poco y cuando esté funcionado correctamente.

Añadiendo clases

Esta entrada es un brevísimo resumen sobre una útil entrada de Vagabundia que recomiendo y a la que tuve que recurrir para despejar algunas dudas.

Es algo muy básico, una de esas cosas hacemos automáticamente copiando y pegando pero no siempre resulta bien por eso es mejor entender lo que estamos haciendo.

En la hoja de estilos de nuestra plantilla podemos ver las propiedades de distinta forma. Reconocemos que se trata de una clase por ese punto antes del nombre de la clase.

.post {
.....
}

Si en lugar del punto llevara una almohadilla # estaríamos hablando de un ID eso quiere decir que se trata de un identificador único, no puede haber dos iguales en la plantilla.

#header-wrapper {
...............
}

A veces nos vemos en la necesidad de crear unos estilos distintos a los predeterminados en la plantilla para utilizarlos en una etiqueta concreta.
En el body de nuestra plantilla encontraremos los estilos definidos para el texto del blog y los enlaces.
Si queremos por ejemplo utilizar un color distinto para el texto seguramente lo que hacemos es modificarlo en el mismo editor de entradas en la pestaña "Redactar" pero ¿ y si queremos un color que no se encuentra en la paleta de colores? ¿y si ese color de texto lo queremos añadir en un gadget?

Hacemos unas pruebas y jugamos un poco con los estilos y las clases.

.rosa {
color:#ff00BB;
}

En nuestro editor de entradas o donde queremos tener el texto de color añadimos:
<p class="rosa">Texto rosa</p>

Texto rosa

Podemos añadir más propiedades a una misma clase y tantas clases como necesitemos usar para una misma etiqueta.

.rosa {
color:#ff00BB;
font-size: 20px;
font-weight:bold;
}

<p class="rosa">Texto rosa</p>

Texto rosa

Cuando añadimos una clase todas las etiquetas que contienen esa clase adquieren los mismos estilos. Para añadir estilos a un enlace añadimos:

a.rosa {
color:#FF00BB;
}

<a href="#" class="rosa"> Esto es un enlace de color rosa </a>

Esto es un enlace de color rosa

Igualmente podemos añadir efectos a la misma clase.

.rosa {
color:#ff00BB;
font-size: 34px;
font-weight:bold;
text-shadow: #000000 1px 2px 3px;
font-family:Times New Roman,sans-serif;
}

.rosa:hover {
color:#000000;
font-weight:bold;
font-style:italic;
font-size: 34px;
font-weight:bold;
text-shadow: #000000 1px 2px 3px;
font-family:Times New Roman,sans-serif;
}

<p class="rosa">¿ Texto rosa ?</p>

¿ Texto rosa ?

The Effect Generator » creando contenido Flash

The Effect Generator es una herramienta online que nos permite crear animaciones Flash , que podremos crear y usar de forma sencilla, la misma que luego podemos insertar en nuestro blog o web.

Con esta herremienta podemos crear banners, texto en movimiento, slideshows, botones, etc., todo de forma fácil y sin necesidad de tener mucho conocimiento sobre Flash.

Aquí les dejo un video-tutorial donde se enseña cómo usar esta fantástica herramienta:

Click en la imagen para ver el video

Y aquí algunos ejemplos:

» Slideshow

» Efectos texto

» Banner

¿Por qué no lo inventaron antes?

Proximamente la Plantilla "Al otro lado del sol"

Hola ¿qué tal?!, en estos momentos empiezo lo que será mi siguiente plantilla : "Al otro lado del sol" el tema esta compuesto con un toque de fantasía mismo que me encanta incluir en las plantillas, les pido paciencia, actualmente he estado muy ocupada con mis actividades diarias, pero espero que pronto todo vuelva a la normalidad y pueda dedicar más tiempo a la creación de nuevas plantillas, tengo algunas ideas en mente para muchas más plantillas, así que estén al pendiente, también pronto tendré lista la Plantillas Metamorfosis con Fondo Negro para sorterla entre mis suscriptores.

Le deseo como siempre un excelente día.

Imagine (John Lennon) lengua de signos

REFERENCIA:BLOGTENIAFacilitado por: Vagabundia

Títulos de la sidebar personalizados V: títulos de dos colores

Hoy vamos a ver otra forma más (la quinta forma) de personalizar los títulos de nuestra sidebar, esta vez vamos a hacer que los títulos tengan dos colores, como se ve en esta imagen que es una captura de uno de mis blogs de pruebas:



Bien, entonces para conseguirlo, seguimos los siguientes pasos:

1.§ Ingresamos a Diseño/ Edición de HTML y Expandir plantilla de artilugios. Con ayuda de CTRL+F buscamos ]]></b:skin>. Encima de éste pegaremos el siguiente código:

.otrocolor {
padding-left:5px;
color:#FF3300;
}

2.§ Ahora, localizamos el nombre que le dimos al gadget al que vamos a personalizar el título con dos colores.

Por ejemplo, digamos que el gadget al que quiero agregar el efecto se llama Lista de amigos,el nombre deberemos de buscarlo en la plantilla y deberá de tener casi la siguiente estructura:

<b:widget id='HTML1' locked='false' title='Lista de amigos' type='HTML'>
<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>

Ahora insertaremos el código que está en negrita en las partes indicadas y "partiremos" el títulos del gadget para que una parte sea de un color y la otra de otro color:

<b:widget id='HTML1' locked='false' title='Lista' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/><span class=’otrocolor’>de amigos< /span ></h2>
</b:if>

Damos click a guardar y listo, muy sencillo.

Si queremos agregar más colores, deberemos de crear un nuevo estilo , en lugar de .otrocolor { pondremos otro nombre y cambiaremos color:#FF3300; por otro y cuando queramos agregarlo a un título de la sidebar no nos olvidaremos de colocar la parte del título entre <span class=’Aquí-nombre-de-otro-estilo’>Aquí-parte-del-título< /span >

Visto en : Template-Godown | Vía: Chica Blogger

Wix crea tu página en flash

Conocí Wix en un tutorial creado por Iván de Zona Cerebral sitio que desde hace unos meses no se encuentra online, me llamó mucho la atención y hoy al verlo de nuevo he pensado que vale la pena darla a conocer.

Wix es una potente herramienta que ofrece servicio gratuito para la creación de plantillas en flash, no es necesario tener conocimientos sobre programación y aunque parezca increíble pueden adaptarse a Blogger.

Nos ofrece la opción de comenzar de cero con una plantilla básica o escoger un diseño de la galería.

Una vez realizado nuestro proyecto podemos alojar la página en su servidor o embeber el código en nuestra plantilla.

- Para poder diseñar nuestra plantilla en flash es necesario no tener las ventanas emergentes bloqueadas.

Si yo te contara

Tengo varias cosas pendientes que hacer, otra cosa es que me de tiempo a hacerlas pero ahí están en mente desde hace unas semanas. Eres muy agradecido, mira que te hago cambios innecesarios y lo más elemental lo dejo de un día para otro y tú sin rechistar. De todos los blogs que tengo eres el mejor siempre te lo digo.

Quiero ordenarte las etiquetas, están cada día más desordenadas hasta tal punto que en alguna ocasión busco fuera información de algo que escribí hace tiempo, soy yo que no te etiqueto correctamente no hace falta que pongas esa cara, por eso voy a prescindir de algunas y sustituir otras, el dilema es distribuirlas como es debido porque si yo no encuentro algo imagina los que vienen de fuera.

Menos mal que el mapa del sitio hace buen papel, por mucha manía que le tengas al señor feed siempre lo muestra todo ordenadamente.
Pero yo te quiero con tus defectos y virtudes.

Hace unas semanas te añadí unos nuevos estilos en el borde de las imágenes, anteriormente no te puse estilos porque mi obsesión en añadir sombra me hacía usar una aplicación online pero me diste un ultimátum y no tuve más remedio que añadirte sombra. Hasta has rejuvenecido.

Te habrás dado cuenta que con este cambio algunas imágenes de entradas antiguas presentan borde cuando no deberían tenerlo. Le diré a la visitas que me avisen si ven algún borde feo (me refiero a borde de imágenes aunque de los otros también abundan pero no vienen por aquí)

La bandeja de correo está un poquito desordenada también, iré revisando las invitaciones a Twitter y Facebook, nunca entenderé como lo hacen algunas personas para tener al día las redes sociales, por tener entiéndase responder puntualmente.

Yo creo que en Facebook, como en Twitter y cualquier red social hay quien se marca un par de metas, sumar amigos y sumar amigos. Al final el muro no es un muro, es los más parecido a la Gran Muralla China.

¿Y cómo sé quien es fulanito si en los blogs casi nadie tiene su nombre?
¡Ah si! si accedemos a su muro vemos su perfil, pues todo solucionado.

Ni amigo del jardín de infancia, ni compañero de trabajo, si fuera de mi familia le conocería digo yo. Tampoco tiene blog ni amigos en común ¿qué hago, le admito? ¿voy a negar "amistad" a alguien? lo mismo se ha confundido o la confundida soy yo.

A veces pienso que soy una antisocial porque las redes sociales nunca fueron mi debilidad debe ser mi fobia a las multitudes y la sensación de tener a alguien esperando ¿?
Lo bueno que tiene es que recibes regalos sin ser un día especial y tampoco es necesario cumplir años eso si que es una ventaja, si el regalito te gusta bien y si no nadie se da cuenta porque no te ven la cara.

Hay regalitos y regalitos, uno muy original es la predicción de la Pitonisa lo malo es que las Pitonisas no coinciden, lo mismo dice que me va bien en el amor como que lo abandono todo y me iré muy lejos para escapar de un amor. A lo mejor es por la diferencia horaria.

El regalito más amargo que he recibido es el mate, los amigos argentinos deben tener en cuenta que el mate se toma muy caliente o como decimos aquí calentico ¿saben lo que tarda en llegar un mate de Argentina a España? que lo piensen por favor, que piensen como sabe un mate frío.

Mira lo que pasa, que por darte compañía las etiquetas se quedan para mañana.
Si yo te contara la de cosas que tengo que hacer, pero ya es tarde.
Recoge todo y cierra.


¡¡ Y apaga la luz !!

¡ Colabora con Haití !

Cuentas de emergencia para hacer llegar ayuda a los damnificados por el terremoto.

Sitios para seguir en la red las últimas noticias.

Calendario y reloj en texto simple con script

Hoy vamos a ver cómo incluir en nuestro blog un calendario y reloj en nuestro blog, de forma muy sencilla.

Por cierto la DEMO pueden verla en mi blog de pruebas, en la sección demos.

Entonces , en un nuevo elemento HTML/Javascript pegaremos cualquiera de estos scripts o los dos:

1.§ Para el calendario:

Para obtenerlo, pegaremos el siguiente código:

<script language="Javascript">

<!--

var dayName = new Array ("Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado")
var monName = new Array ("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septimbre", "Octubre", "Noviembre", "Diciembre")
var now = new Date
document.write("Hoy es " + dayName[now.getDay()] + ", " + now.getDate() + " de "+ monName[now.getMonth()] +".")

//-->
</script>

2.§ Para el reloj:

Para obtenerlo, pegaremos el siguiente código:

<form name="size">

<input name="Clock" size="11" type="text"/>

</form>


<script>

<!--
function show(){
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="AM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
document.size.Clock.value=hours+":"+minutes+":"

+seconds+" "+dn

setTimeout("show()",1000)

}

show()

//-->
</script>

Visto en : JavaScript Kit

Nueva plantilla Blogger Power

En chethStudios dan a conocer la nueva plantilla de diseño minimalista Blogger Power. Tiene la particularidad que permite cambiar el color del diseño desde la función de fuentes y colores.
Una plantilla ideal para aquellos que comienzan  en Blooger y los que prefieren las cosas sencillas.

Pictaculous » generador de paletas de colores

Pictaculous es una herramienta online muy útil que nos servirá para obtener paletas de colores mediante imágenes, colores que podemos usar para cambiar nuestro blog.

El uso de la herramienta es bastante sencillo, bastará con subir una imagen (podría ser la cabecera de nuestro blog) dar click en "Get my palette" y obtendremos los colores de esa imagen.



Pictaculous

Galería de imágenes con CSS

La hoja de estilos es el corazón del blog, y desde ahí podemos cambiar completamente su aspecto, además de eso también podemos crear efectos y galerías como la que proporciona Stu Nicholls en CSSplay.

Instalamos la galería.

En plantilla edición de HTML justo antes de </head> añadimos el contenido de este archivo que son los estilos.

Guardamos los cambios y en una entrada o gadget de html sobre las entradas añadimos el contenido de este otro archivo que es donde añadiremos las imágenes. Como muestra el archivo ya contiene la primera imagen de cada bloque, pero veamos como añadirlas.

La galería tiene cinco pestañas superiores, en el archivo cada una lleva un nombre.

Portraits - Landscapes - Flowers - Trees - Birds

El primer bloque comienza con:
<a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a>

Portraits lo sustituimos por el nombre de nuestra primera pestaña, donde #Portraits podemos añadir el mismo nombre de la pestaña.

Lo siguiente sería la primera imagen que añadimos en el bloque de Portraits y como decía ya viene incluida.
<li><a href="lbox/portrait1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/portrait1a.jpg" alt="" title="" /></a></li>

Sustituimos la url que nos proporciona el archivo por la nuestra
http://www.cssplay.co.uk/menu/lbox/portrait1a.jpg = a nuestra imagen

Las imágenes las podemos añadir de cualquier tamaño, pero hay que tener en cuenta que si no es necesario una imagen grande lo que hacemos es cargar el blog y que la imagen pierda calidad.

Donde lbox/portrait1.jpg podemos añadir la imagen de gran tamaño, cuando en la galería pulsemos sobre la imagen ampliada nos llevará a esa imagen en caso de añadirla.

Si no añadimos esa imagen grande lo podemos dejar sin modificar porque la miniatura se ampliará de igual forma al tamaño establecido en los estilos width:200px (ancho) height:150px (alto)

Las siguientes imágenes se añaden de igual forma:
<li><a href="lbox/portrait2.jpg"><img src="lbox/portrait2a.jpg" alt="" title="" /></a></li>

Sustituir la url lbox/portrait2.jpg por la url de una imagen mayor si deseamos que al pulsar sobre la miniatura ampliada enlace con la imagen de gran tamaño.

Donde lbox/portrait2a.jpg añadimos la url de la miniatura.
Con title="" podemos añadir el título de la imagen title="aquí el título" para que aparezca al pasar el cursor.

Una vez añadimos todas las imágenes al primer bloque de la galería nos encontramos con el bloque de la segunda pestaña que permanece fija. Esas imágenes siempre estarán a la vista.

<li class="active"><a class="set" href="#Landscapes">Landscapes<!--[if gte IE 7]><!--></a><!--<![endif]-->

Sustituimos Landscapes por el nombre de nuestra pestaña y añadimos las imágenes de igual forma que en la pestaña Portraits.

Luego hacemos lo propio con el tercer bloque de imágenes.
<a class="set" href="#Flowers">Flowers<!--[if gte IE 7]><!--></a>
<li><a href="#flower1"><img src="http://www.cssplay.co.uk/menu/lbox/flower1.jpg" alt="" title="" /></a>
Más enlaces....

Con el cuarto.
<a class="set" href="#Trees">Trees<!--[if gte IE 7]><!--></a>
<li><a href="#tree1"><img src="http://www.cssplay.co.uk/menu/lbox/tree1.jpg" alt="" title="" /></a>
Más enlaces....

Y el quinto.
<a class="set" href="#Birds">Birds<!--[if gte IE 7]><!--></a>
<li><a href="#bird1"><img src="http://www.cssplay.co.uk/menu/lbox/bird1.jpg" alt="" title="" /></a>
Más enlaces....

Ver galería funcionando con los estilos modificados.

Para añadir esta galería al blog su autor pide un enlace a su página reconociendo así su autoría. El enlace no necesariamente debe ponerse en la misma entrada que añadimos la galería puede ser también en la sidebar y conservar también los créditos que llevan los estilos.

Si por el contrario vamos a darle uso comercial o como un trabajo remunerado para un cliente es mejor mandar un correo pidiendo permiso.