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
                        

Ver Ejemplo:

Este menú funciona con scriptaculous.

Si no lo tienen poner este código antes de </head>
<script type='text/javascript' src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
Si ya lo tienen no es necesario.

Luego poner estos códigos también antes de </head>

<!--***********menuBarVku*******-->
<script type="text/javascript">
var isExtended = 0;
function slidemenuBarVku(){
new Effect.toggle('menuBarVkuContents', 'blind', {scaleX: 'true', scaleY: 'true;', scaleContent: false});
if(isExtended==0){
$('menuBarVkuTab').childNodes[0].src = $('menuBarVkuTab').childNodes[0].src.replace(/(\.[^.]+)$/, '-active$1');
new Effect.Fade('menuBarVkuContents',
{ duration:1.0, from:0.0, to:1.0 });
isExtended++;
}
else{
$('menuBarVkuTab').childNodes[0].src = $('menuBarVkuTab').childNodes[0].src.replace(/-active(\.[^.]+)$/, '$1');
new Effect.Fade('menuBarVkuContents',
{ duration:1.0, from:1.0, to:0.0 });
isExtended=0;
}
}
function init(){
Event.observe('menuBarVkuTab', 'click', slidemenuBarVku, true);
}
Event.observe(window, 'load', init, true);
</script>

<style>
#menuBarVku a{
outline: none;
}
#menuBarVku a:active{
outline: none;
}
#menuBarVku{
text-align:left;
}
#menuBarVku h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px;
font-weight:bold !important;
}
#menuBarVku h2 span{
font-size:125%;
font-weight:normal !important;
}
#menuBarVku ul{
margin:0;
padding:0;
}
#menuBarVku li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:147px;
color:#FFFFFF;
}
#menuBarVku li a{
width:100%;
}
#menuBarVku li a:link,
#menuBarVku li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0;
padding:0;
width:100%;
}
#menuBarVku li a:hover{
color:#FFFFFF;
text-decoration:none;
background-color:#000000;
}
#menuBarVku{
position: fixed;
width: auto;
height: auto;
top: 170px;
right:-5px;
background-image:url(http://galeon.com/vku/menuside/images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}
#menuBarVkuTab{
float:left;
height:137px;
width:28px;
}
#menuBarVkuTab img{
border:0px solid #FFFFFF;
}
#menuBarVkuContents{
float:left;
overflow:hidden !important;
width:175px;
height:170px;
}
#menuBarVkuContentsInner{
width:200px;
}
</style>
<!--***********fin menuBarVku*******-->

Si quieren pueden modificar a su gusto el estilo, su color, texto, medidas, posición, etc...

Luego colocar el siguiente código antes de </body>
<div id="menuBarVku">
<a href="#" id="menuBarVkuTab"><img src="http://galeon.com/vku/menuside/images/slide-but.gif" alt="menuBar" title="menuBar" /></a>
<div id="menuBarVkuContents" style="display:none;">
<div id="menuBarVkuContentsInner">
<h2>Menu<span>bar</span></h2> <!--titulo-->
<ul>
<li><a href='http://loseasi.blogspot.com/' title='Inicio'>Inicio</a></li>

<li><a href='http://loseasi.blogspot.com/feeds/posts/default' title='Suscribirse a Entradas RSS'>Entradas RSS</a></li>

<li><a href='http://loseasi.blogspot.com/feeds/comments/default' title='Suscribirse a Comentarios RSS'>Comentarios RSS</a></li>

<li><a href='http://img40.xooimage.com/files/8/7/b/contacto-100146a.html' title='Contáctame'>Contáctame</a></li>
</ul>
</div>
</div>
</div>
Acá si cambiar los link por lo que ustedes prefieran.
Pueden agregarle mas link pero ojo con el tamaño, ahí también tienen que modificar el CSS.

Si quieren pueden modificar y subir sus propias imágenes a su servidor, tienen que estar en una misma carpeta y no cambiarle el nombre.

Descargar imágenes.

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

Gracias Meri :4) :5)

Meri descargate nuevamente las imagenes, ya que vi en tu blog al tener fondo negro que quedaban unas puntas en blanco que quedan feas.
Ya le quite esas puntas y una linea blanca que salia al abrir.

Disculpa que las tengas que subir de nuevo :10)

Las cositas de Meri dijo...

Gracias Vku, ya me las bajé y las puse :19)

Ahora tengo una duda, son tres imagenes, yo solo veo donde poner 2 de ellas ¿la otra?.
Pero es que veo que va bien, es decir que la que subi fue la que tiene la flecha hacia la izquierda, pero cuando el menú se despliega sale la flechita hacia la derecha para cuando haya que cerrarlo. Eso es lo que no comprendo, si esa imagen no la he puesto por que no veo donde ponerla ¿como es que sale?

Saludos
Meri

Vku dijo...

Meri: las 3 imágenes tienen que estar en 1 misma carpeta.

Las imagenes se llaman con el código javascript.

El cuerpo es la llamada background.gif.

Despues a las otras 2 imágenes es importante que no se le cambie el nombre.

slide-but.gif y slide-but-active.gif

Lo que hace el código es decirle que cuando se abra cambie o remplace por la otra imagen del mismo nombre (slide-but) pero con el agregado - active.

fijate en el código esta parte:

$('menuBarVkuTab').childNodes[0].src.replace(/-active(\.


Yo de javascript no se casi nada.

Es parecido a las imagenes que las podes llamar para mostrar arriba, abajo o en determinada posicion de la misma.

PERO MERI QUE ESTEN LAS 2 ULTIMAS EN UNA MISMA CARPETA Y NO LE CAMBIES EL NOMBRE.

Pone las ultimas 3 que son sin las marcas blancas.

Y perdon que no soy un buen profesor. :5)

Las cositas de Meri dijo...

No te acabo de entender, pero si tu no sabes mucho de javascript .. espera te yo :26)
¿Donde tiene que estar esa carpeta con las imagenes?
Yo subi dos de ellas al servidor
una la de la ralla la puse en background-image:
Y la otra en menuBarVkuTab

Queda una tercera
Que se llamen vale ¿pero desde mi PC se llaman?
No lo entiendo.
Pero no te compliques por que el menú ha quedado bien y me...¡gusta!
Perdona que no te contestara antes pero no me llego el aviso

Saludos

Vku dijo...

slide-but.gif y slide-but-active.gif tienen que estar juntas en el servidor

por lo que vi en tu blog quedo bien

Las cositas de Meri dijo...

¡Ah! pues incógnita resuelta. Las tres imágenes están subidas al mismo servidor. Ya entiendo todo

Gracias Vku :23)

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?