Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.
Sígueme en:
Blogger Google+ facebook twitter you yube Ver perfil en Linkedin Agregar a Favoritos/Marcadores
pica pica curioso Mi Ping en TotalPing.com Buscar en el blog
Cerrar X Bienvenido amig@!!! Recuerda que puedes recibir las actualizaciones del blog a través de Facebook y/o Twitter, o Suscríbase al Feed vía RSS o vía Email.

Siempre, Siempre, Siempre, antes de modificar tu plantilla guarda una copia.

Descarga la plantilla o copias el código en el bloc de notas.

¿Que es RSS?:

RSS (Really Simple Syndication)

Es un sistema que nos permite enterarnos de las actualizaciones de las paginas que visitamos frecuentemente, sin tener que visitarlas directamente.

¿Cómo funciona?

Así cómo para poder leer correos electrónicos tenemos que tener una cuenta y un lector de correo electrónico, para poder leer nuestras paginas en RSS tenemos que tener un lector de RSS.
Existen muchos lectores de RSS pero uno de los mas sencillos de usar y mas utilizados por todos es el Google Reader, este lector se encarga de agrupar todos los sitios que visitamos frecuentemente mostrándonos la actualización que cada sitio tiene sin necesidad de ir a visitarlos.
Antes yo entraba a los sitios a mirar si habían publicado algo nuevo, ahora mediante los RSS cuando el sitio publica algo nuevo me llega su actualización.

Sencillo, rápido y útil.
votar
Achicar Entrada Agrandar Entrada

Hace un tiempo Ciudad Blogger publicaba una entrada de cómo se hace El Fanbox de Facebook, flotante y con efecto deslizante.

Me gusto mucho la forma que se mostraba flotando, pero lo que no me gusto es que para darle el efecto hay que utilizar una librería, la cual enlentece la carga en un blog (mientras no la utilizamos para otra cosa), y en lo personal el efecto no es algo que me llame mucho la atención.

Ahí se me ocurrió que se podía hacer de otra forma; sin utilizar la librería, solo con hover, al igual que lo hacemos para cambiar una imagen al pasar el cursor por encima. Peroooo, como el contenedor mostrado es un iframe con script no funciona bien en Internet Explorer (este navegador siempre complicando las cosas), entonces decidí sustituir el hover con eventos javascript.

Y ya que estábamos; pensé (a veces lo hago), y por que no utilizar esto no solo para mostrar el Fanbox de Facebook.

Lo primero que hice fue crear las imágenes que las pueden descargar desde acá:

Y el resultado final fue el siguiente:


Vamos a mostrar los Seguidores de Blogger, Comentarios de Twitter y el Fanbox de facebook.

Se muestra solo una pestaña fija a la derecha, y al pasar el cursor se abre mostrando el gadget.

¿Cómo se hace...?

Para los seguidores de Blogger vamos a: Google friend connect

Estando conectados con la cuenta de Gmail asociada a nuestro blog.

Ahí vemos que nuestro blog este seleccionado:


Si tenemos varios blog lo seleccionamos mas abajo:


Ya seleccionamos hacemos clic en: "Añadir el gadget de miembros"


Lo podemos personalizar o dejamos así ya que lo único que necesitamos es la ID.


La ID la tenemos que copiar ya que la vamos a utilizar mas abajo.

Es necesario ya que cada blog tiene una ID distinta.

La vemos en la barra de dirección:


O al darle al botón "Generar código":


Ahora con la ID copiada podemos cerrar la página.

Recomiendo pegar la ID en el bloc de notas.

Nos vamos al escritorio de Blogger.

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz),

Edición de HTML

Y justo arriba de ]]></b:skin>

Poner el siguiente código:

/* Seguidores Blogger */
.barrightblogger { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvTvJIwXjxu1re1te3xHPYkjiAHX5LP8xkAjTlhjCgbxaRzHiG5YbZVrpc9xzOvuH1xaCw4vhO6MyJcfJa_nvZt-SknRIwTAEUIRf-jWmKEVZ9H24O_p66rdPh2mCmT_kjXWEvZioxWfD6/s1600/bl_cb.png');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:50px; z-index:1000;}
.barrightbloggerc { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTFdB16sJ7eoQy4lfos7f5GWo_zMR5BZnMt0GuiJplUxYxgC9Fdy7gOrWHAEankcye5cB2QWZjw3iSEO9YEolE7Jf9VRBlKoQGxDwjGuwvfkOCut5QG3BF3zVf3GNzP6fnEPqDw3wEHUC/s1600/bl_cg.png');background-repeat: no-repeat; width:288px; height:345px; position:fixed; right:0px; top:50px; z-index:1100;}
.barconteblogger {margin:12px 0 0 47px}

/* Twitter */
.barrighttwitter { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_O1Q7QQ74ea_62zItEOHNkkGtf_Mzp8CkoVi9-Y-QhhnrEL4pfDO4Jx63Ob-glwTLYxnsWdbzSa7bleZqFFb5EBiyuuJ9_ZN0kJ_MOaaW3dnDKeL4W-5kli990KQSrTmHH0xSqBDFGzoU/s1600/tw_cb.png');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:210px; z-index:1000;}
.barrighttwitterc { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhImDu-QmsgwfcuJtnqdyFHhGkMEZGriEtPZSiQYLGPzh22tLTglvcmaL0vZ6558R8cTSzyFux39GrEqidVsDmE25T_ZacZLcl6VRdL4e4aCynr3YDUPvXAKw8H0zrQQlt7OOC3Xzog6atb/s1600/tw_ag.png');background-repeat: no-repeat; width:288px; height:345px; position:fixed; right:0px; top:120px; z-index:1100;}
.barcontetwitter {margin:0 0 0 47px}

/* Facebook */
.barrightfacebook { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI6qmPAwXbN1Orh0FcbWvsPbBUlzenUKUmw7Te8nv-DJspDJ5VgMh5BOrSmTXdt9H1KjRzeciU2Z3WjUQgfFl3LUfThYO5Wp2kAQmjbafnen_Wib41GGovBQf_o7Ng9LSmyEGMQmd1-8dq/s1600/fb_cb.png');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:370px; z-index:1000;}
.barrightfacebookc { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifEMpF_1eallW_iPOFDi8d6VNSOWU9PiuJ2z-tIrOfA0gidzPBTCyo6lZj9teqfmg6blengIK2uPK9PznF4Bi-U0ilI2i1KqTz81WHV_jpGfpLogXo1vrnmDQCbYiPUJA8R3eROMufj54v/s1600/fb_bg.png');background-repeat: no-repeat; width:288px; height:345px; position:fixed; right:0px; top:185px; z-index:1100;}
.barcontefacebook {margin:12px 0 0 47px}

Podemos descargar las imágenes y subirlas a su propio servidor o a Picasaweb.

Y si quieren modifican las distancias desde arriba: (top:...px)

Ahora nos vamos bien abajo y arriba de </body>

Poner el siguiente código:

<!-- SEGUIDORES BLOGGER -->

<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'"><div class="barconteblogger">
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-3082905992843096175" style="width:240px;border:0px solid #ffffff;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#ffffff';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '6';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-3082905992843096175',
site: '00286525615627339881' },
skin);
</script>
</div></div>
<!-- FIN SEGUIDORES BLOGGER -->

<!-- TWITTER -->

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'"><div class="barcontetwitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 30000,
width: 240,
height: 250,
theme: {
shell: {
background: '#33ccff',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#333333',
links: '#33ccff'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('v_ku').start();
</script>
</div></div>
<!-- FIN TWITTER -->

<!-- FACEBOOK -->

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'"><div class="barcontefacebook">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/ParquedelPlataUruguay&amp;width=240&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=320" style="border: none; height: 320px; overflow: hidden; width: 240px;background: #fff;"></iframe>
</div></div>
<!-- FIN FACEBOOK -->
<!-- FIN By: Vku. http://loseasi.blogspot.com/ -->

Cambiamos:

Para Blogger: La ID que antes copiamos y guardamos: 00286525615627339881

Para Twitter: El nombre de la cuenta: v_ku
                         La cantidad de comentarios: rpp: 3

Para facebook: La página: http://www.facebook.com/ParquedelPlataUruguay

Con Vista previa vemos que todo este bien y Guardamos.

Si no queremos mostrar alguno, solo eliminamos el código.

Esta bien separado por comentarios:

/* ............................. */
CÓDIGO CSS
<!-- .......... -->
CÓDIGO
<!-- FIN ........... -->


Leer Importante... Comentar esta entrada ▼ Ir al principio de la entrada
JhonnySan dijo...

Muy buena entra solo que ando con el tiempo justo como para probarlo me gusto mucho espero que cuando vuelva lo pueda hacer.
Saludos

Unknown dijo...

Hola Vku como estás? espero que bien, sabes me gustó este artilugio, funciona blogger y twitter, pero Facebook me sale ésto: "Could not retrieve id for the specified page. Please verify correct href was passed in.", no se si tienes alguna solución para lo anterior.

Además, una consulta tienes algun video grabado por Rosa con su voz, yo tengo uno.
Un abrazo querido amigo.

:35)

Unknown dijo...

Jajajaja me equivoque otra vez, que torpe soy, pero ahora no fallo es:

:31):31):31):31):31)

Unknown dijo...

Ola VKU soy DJ NINCO de vitua y vi el mensaje emergente en css y javscript y me gustaría tener el código para añadirlo en una de mis webs que estoy rediseñando, serias tan amable de mandarmelo? Nos vemos allí! ;)

Vku dijo...

Antonio. En que andas? tienes página en facebook?

para que funcione tiene que ser página, no es para cuentas personales.

Vku dijo...

Ninco. El mensaje que anuncio lo del servidor de VituaRadio?

Ninco te presento a Antonio, modelador de VituaRadio.

Unknown dijo...

Si lo del servidor amigo ;) A ver si me puedes decir los códigos, gracias de ante mano.

Antonio es moderador de vituaradio? Nunca e hablado con el por allí jejejeje a lo mejor me confundo...

Vku dijo...

http://loseasi.blogspot.com/2010/07/mostrar-imagen-con-boton-de-cerrar-y.html

http://loseasi.blogspot.com/2010/07/mostrar-imagen-o-mensaje-con-boton-de_23.html

http://loseasi.blogspot.com/2010/07/mostrar-imagen-o-mensaje-con-boton-de.html

Vku dijo...

Antonio es Tork

Fijate si es eso lo que buscas.

Yo utilizo la primera opción pero con cookies que se muestra el mensaje cada 7 entradas al blog o páginas.

Beben Koben dijo...

awesome master awesome...:)
combine by CSS and DHTML JavaScript...goog master :23)

Mujeres a los Pies de Jesús Blankita dijo...

Hola he intentado pegarlo, lo hice con el codigo igual que usted y me salio perfectamente con el like box de facebook suyo, pero cundo lo pongo con el nombre de mi pagina no me sale, tengo que poner el nombre manualmente o le doy copy pasta a la url, pq de verdad no se pq el suyo me sale perfecto,le agadesco su respuesta. gracias D.t.b.

Vku dijo...

El problema es que tu en facebook no tienes una página, Si tienes un perfil personal.

http://es-la.facebook.com/people/Alimento-Para-El-Alma/100001764477557

y el fanbox solo es para páginas.

Vku dijo...

Perdon no vi tu página.

Cambia por este código:

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Alimento-para-el-Alma-p%C3%A1gina/155387414537053&amp;width=240&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=320" style="border: none; height: 320px; overflow: hidden; width: 240px;background: #fff;"></iframe>

Mujeres a los Pies de Jesús Blankita dijo...

perdoname es que como decia que no dejaran enlaces para promocionar sus paginas, no te deje el nombre...pero esa pagina que me das no es, puedes hacerme el codigo para esta pagina que es la que me interesa foro,mujeres a los pies de Jesus, y el blog se llama A LOS PIES DE JESUS...SI Alimento para el alma tambien es mio, tengo los dos una página y un perfil, gracias por darme este codigo y responderme. Estaré pendiente de su respuesta. D.t.b.

Mujeres a los Pies de Jesús Blankita dijo...

ok!http://www.facebook.com/pages/Foro-Mujeres-A-Los-Pies-de-Jesùs
y esta es la de alimento para el alma;
http://www.facebook.com/pages/Alimento-para-el-Alma-página
Yo he visto esto en redes ning. Tengo una red ning y tambien me gustaria ponerla ahi. En la red fue que probé con tu codigo y me salio( pero al poner el mio era que no me salia) gracias por tu ayuda.

Vku dijo...

Ninguna de las 2 páginas existe. fijate bien. Faltan los números al final.

Pero la de Alimento para el alma página es el código que te di respuesta 17

Mujeres a los Pies de Jesús Blankita dijo...

ok, es qu no sabia si tenia que darle copy hasta el numero, pero ahora lo hago, el codigo que me distes lo usé, sale el cuadro normal,no el cuadroflotante.( lo puse en el blog de APEA) aqui te dejo nuevamente los enlaces y disculpa,

http://www.facebook.com/pages/Foro-Mujeres-A-Los-Pies-de-Jes%C3%B9s/172854102738831

http://www.facebook.com/pages/Alimento-para-el-Alma-p%C3%A1gina/155387414537053

gracias!!!

Vku dijo...

No podes tenerlo fijo en un gadget y flotante. tiene que estar en uno solo.

Unknown dijo...

Increibleeeeeeee! Me vino de maravilla! Excelente tu post! Eres un profesional saludos!

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.



Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.


Nota: solo los miembros de este blog pueden publicar comentarios.

Si no puedes comentar, intenta con el antiguo formularioO leer solución

VituaRadio
Informe Importante

Por un tiempo voy a estar sin internet, así que no voy a actualizar ni poder contestar a los comentarios.
Suscribirse a las entradas Suscribirse a las entradas vía Mail Suscribirse a los comentarios
¿Que es RSS?