Centrar en la sidebar el titulo y contenido de los gadget

Hoy vamos a ver y aprender como centrar el titulo y contenido de los gadget en el blog paulina en el foro de google preguntaba como hacerlo en algunos sitios dicen de una manera u otra como hacerlo.bueno yo les voy a explicar como hacerlo es bien sencillo.

lo primero que vamos a hacer es ir a .




Diseño>edición HTML>expandimos artilugios

Si quieres para una búsqueda mas rápida usa Ctrl+F y buscamos .sidebar h2
si lo tienes debe de ser algo como este:

.sidebar h2{color:#D9DCB0;background:#2C2C28;font-size:14px;line-height:14px;font-family:Arial,Helvetica,sans-serif;font-weight:bold;margin:0 -10px 5px 0;padding:8px 0 8px 10px;text-transform:uppercase;-moz-border-radius:5px 0 0 5px;-khtml-border-radius:5px 0 0 5px;-webkit-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;}

Al tener ese codigo nada mas nos hace falta añadirle text-align: center; no tiene que ser exactamente igual puede cambiar en muchas cosas es nada mas para que tengan una nocion de lo que puede tener .sidebar h2 y al añadir  text-align: center; nos quedaría así:

.sidebar h2{color:#D9DCB0;background:#2C2C28;text-align: center;font-size:14px;line-height:14px;font-family:Arial,Helvetica,sans-serif;font-weight:bold;margin:0 -10px 5px 0;padding:8px 0 8px 10px;text-transform:uppercase;-moz-border-radius:5px 0 0 5px;-khtml-border-radius:5px 0 0 5px;-webkit-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;}

Bueno en caso de no encontrar .sidebar h2 entonces nos dirigimos a
Buscar la etiqueta ]]></b:skin> y encima añadimos este codigo:

.sidebar h2{color:#D9DCB0;background:#2C2C28;text-align: center;font-size:14px;line-height:14px;font-family:Arial,Helvetica,sans-serif;font-weight:bold;margin:0 -10px 5px 0;padding:8px 0 8px 10px;text-transform:uppercase;-moz-border-radius:5px 0 0 5px;-khtml-border-radius:5px 0 0 5px;-webkit-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;}

Recuerda que los colores los debes de cambiar a sus gustos eso los puse para ejemplo al igual que el tipo de letra y tamaño
Hacemos vista previa para ver el resultado y si te gusto como quedo entonces click en guardar plantilla.

Bueno es todo recuerden que compartir y comentar no cuesta nada si pueden y creen que esta información es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código lo podrán ver muchas gracias.

Read More

Mostrar los enlaces con sus favicons

Esta es un sencilla forma de mostrar los enlaces en nuestro sitio con sus favicones correspondientes,hay varias herramientas online de mostrarlos pero yo les voy a mostrar la mas cencilla.para las personas que no saben de lo que estamos hablando,Un favicon es la imagen pequeña que se ve en la barra de direcciones del navegador o cuando agregamos un sitio a los marcadores o favoritos.
Ejemplo si ves en la barra de direcciones ahora vas a ver esta imagen a continuacion les muestro un ejemplo y el cencillo codigo a usar.

Blogger

Tube trucos

facebook

Twitter

El codigo que usamos para  obtener el favicon de otro sitio es este :

<img height="16" src="http://www.google.com/s2/favicons?domain=tubetrucos.com" width="16" />

Tambien podemos usar estos:


<img height="16" src="http://getfavicon.appspot.com/http://tubetrucos.com" width="16" />     
<img height="16" src="http://www.getfavicon.org/?url=www.tubetrucos.com" width="16" />


Lo que esta en color amarillo lo cambian por su url

El codigo para mostrar los enlaces con su favicon es el siguiente:

<div style="float:left;padding:8px;">
<img src="http://www.google.com/s2/favicons?domain=www.blogger.com" style="margin-right: 8px; float:left;" /><a href="http://blogger.com">
<span style="float: left; padding:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#ffffff;"> blogger</span></a></div><div style='clear:both;'/>

<div style="float:left;padding:8px;">
<img src="http://www.google.com/s2/favicons?domain=www.tubetrucos.com" style="margin-right: 8px; float:left;" /><a href="http://tubetrucos.com">
<span style="float: left;padding:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#ffffff;"> tube trucos</span></a></div><div style='clear:both;'/>

<div style="float:left;padding:8px;">
<img src="http://www.google.com/s2/favicons?domain=www.facebook.com" style="margin-right: 8px; float:left;" /><a href="http://facebook.com">
<span style="float: left;padding:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#ffffff;"> facebook</span></a></div><div style='clear:both;'/>

<div style="float:left;padding:8px;">
<img src="http://www.google.com/s2/favicons?domain=www.twitter.com" style="margin-right: 8px; float:left;" /><a href="http://twitter.com">
<span style="float: left;padding:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#ffffff;"> twitter</span></a></div><div style='clear:both;'/></div></div></div></div>

Lo que esta en rojo es la url del favicon
Lo que esta en naranja es la url de enlace

Bueno es todo recuerden que compartir y comentar no cuesta nada si pueden y creen que esta información es utíl denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código lo podrán ver muchas gracias.

Read More

Facebook videochat con FriendCameo

Te gustaría tener otra forma de comunicarte con tus amigos de facebook que no sean solo palabras en el chat.Pues te cuento que puedes iniciar un videochat en Facebook con FriendCameo.  pueden estar conectados  hasta tres amigos al mismo tiempo. Tienen  efectos de vídeos graciosos y fotos graciosas. ¡y lo mejor de todo es gratis!

Se trata de poder hablar con nuestros amigos,as por medio de la webcam conversar en tiempo real,todo en vivo,Es la mejor forma para hablar en persona con los amigos,as que estén en otro sitio.
Para poder crear una videochat en Facebook, la aplicación de FriendCameo es lo que deberás instalar igual que otra aplicacion cualquiera,en Solicitud de permiso click en permitir y es todo tendrás la aplicacion en tu perfil de facebook.para usarla tienes que seleccionar a la persona con la que quisieras comunicarte, quien deberá, a su vez, tener instalada la misma aplicacion FriendCameo también.

Bueno es todo ya pueden disfrutar de una videochat en Facebook recuerden que compartir , comentar no cuesta nada si pueden y creen que esta información es utíl denle click a los botoncitos para compartir de facebook,twitter,google+ y bitacoras y así otros que  también necesitan el código lo podrán ver muchas gracias.

Read More

Poner un video de youtube en una tv en nuestro sitio web o blog

Para las personas las cuales tienen videos para compartir en sus sitios hoy les voy a mostrar una manera muy sencilla de como Poner un video de youtube en una tv en nuestro sitio web o blog les explico el video va a quedar en lo que es la pantalla de la tv y va a ser algo mas llamativo y personalizado a continuacion les muestro un ejemplo:

Como colocarlo bueno es muy facil el mismo codigo iframe que nos brinda youtube para poner el video en nuestro sitio lo vamos a colocar en el siguiente codigo que les voy a poner a continuacion.

 <div style="  padding: 16px 0 0 17px; width: 518px; height: 364px; background: url(http://dl.dropbox.com/u/25944020/tv-plasma3.gif) no-repeat top left; text-align: left"><iframe width="505" height="300" src="http://www.youtube.com/embed/YkyhvCdJ_vM" frameborder="0" allowfullscreen></iframe></div>

Lo que esta marcado en rojo es donde van a poner el codigo iframe de su video recuerden uno tiene que jugar con las medidas dependiendo de sus plantilla o donde lo vayan a colocar asi que el codigo que van a obtener en youtube las medidas son diferentes  como este codigo :
<iframe width="560" height="315" src="url del video" frameborder="0" allowfullscreen></iframe>

Van a sustituir donde dice 560 por 505 y donde dice 315 por 300
Recuerden que esto es para esta imagen la cual se encuentra en color naranja si deciden cambiarlo por una imagen que busquen ustedes pues tienen que cambiar las medidas acontinuacion les voy a dejar dos imagenes mas las medidas que tiene que tener el video para estas imagenes es de 500 X 300

Bueno es todo ya pueden disfrutar de sus videos en una tv recuerden que compartir y comentar no cuesta nada denle click a los botoncitos de facebook,twitter,google+ y bitacoras y asi otros que a lo mejor tambien necesitan el código lo podran ver muchas gracias.

Read More