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

Se trata de poner unas imágenes en la parte de abajo sobre la derecha de nuestro blog, para darle la posibilidad a nuestros visitantes que se desplacen mas facilmente por nuestro blog.

El siguiente código lo pegamos abajo de <body>:

<!-- ir arriba,centro y abajo -->
<a href='#outer-wrapper'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsiZ1pHHT-Sm4mhSqUTRvBMSupFxlTl-OPX-dnR_KT5Rwm62UZHR362zCfV10L9Ostq4a18TOzxS6ktxzM5hiQnIyBCsJL6c8lG8bZNFw3I44ejraR_vd2lqeKbk6uOgnxcvmbVEN7dr_/s1600/arriba.png' style='position:fixed; bottom:75px; right:10px;' title='Ir arriba'/></a>

<a href='#centro'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxgYpHWovHXLx0zyUGyTrzyMMjKw07OY_dBASwQNtCaa-bWyUZtkoTeio_zPnwhxG4qaeYwX7TqAyNFbous5uhEZiMuFgg6ZcXydK3BfJo2yJWv1AnkJEFqAbypnTmZF0vRb1i2iy1pPaH/s1600/centro.png' style='position:fixed; bottom:45px; right:10px;' title='Ir centro'/></a>

<a href='#footer-wrapper'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlwbks02fxrhP7dh1xse_BmkmjqEqBr0z7Wr9iNqSBCN0ggc0RpFQ3OHwiYObGNZt9TQw0JyW87OB9bqPJM9Q6G49LPcexgleoO6I1E0Z-qdXPxydRmCWA3K8w8SD4-b3mU_Am4XOAwnkx/s1600/abajo.png' style='position:fixed; bottom:10px; right:10px;' title='Ir abajo'/></a>
<!-- fin ir arriba,centro y abajo -->

Luego pegamos el siguiente código dentro de <body> y </body>, yo lo coloque en medio de la sidebar.

<a id='centro'/>

Ejemplo en mi plantilla (hacer la prueba):

<b:widget id='HTML14' locked='false' title='' 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>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<a id='centro'/>
<b:widget id='HTML9' locked='false' title='Ultimos Comentarios...' type='HTML'>
<b:includable id='main'>

Ahora modificar a gusto el código cambiando las imágenes y si es necesario la posición.

Guardar cambios.

Ya tenemos nuestras imágenes  o flechas en el blog.

Ahora si queremos darle un efecto de suavidad al deslizar, se puede hacer con Jquery o Scriptaculous.

Efecto con Jquery: (Ver ejemplo acá:)

Tenemos que pegar 2 códigos justo arriba de </head>.

Código 1: (OJO si ya lo tienen en la plantilla no es necesario repetirlo.)

<!-- jquery-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<!-- fin jquery-->

Código 2:

<!-- ir arriba,centro y abajo -->
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){
jQuery('a[href*=#]').click(function() {
var name = jQuery(this).attr('href');
var no = new Array ('#mas', '#mas');
var total = no.length;
var desplazamiento = 2500;

for (i=0;i<=total;i++) {
if(no[i] == name){
return false;
}
}

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var target = jQuery(this.hash);
target = target.length && target

|| jQuery('[href=' + this.hash.slice(1) +']');
if (target.length) {
var targetOffset = target.offset().top;
jQuery('html,body')
.animate({scrollTop: targetOffset}, desplazamiento);
return false;
}}
});
});
//]]>
</script>
<!-- fin ir arriba,centro y abajo -->

Guardar cambios.

Efecto con Scriptaculous: (Ver ejemplo en mi blog)

Tenemos que pegar el siguiente código justo arriba de </head>.

Código: (OJO si ya lo tienen en la plantilla no es necesario repetirlo.)

<!-- prototype y scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- fin prototype y scriptaculous-->

Ahora modificaremos un poco el primer código que colocaron arriba de <body>.

Hay que agregar unas lineas al código.

El código seria así:

<!-- ir arriba,centro y abajo -->
<a href='#outer-wrapper'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsiZ1pHHT-Sm4mhSqUTRvBMSupFxlTl-OPX-dnR_KT5Rwm62UZHR362zCfV10L9Ostq4a18TOzxS6ktxzM5hiQnIyBCsJL6c8lG8bZNFw3I44ejraR_vd2lqeKbk6uOgnxcvmbVEN7dr_/s1600/arriba.png' style='position:fixed; bottom:75px; right:10px;' title='Ir arriba'/></a>

<a href='#centro'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxgYpHWovHXLx0zyUGyTrzyMMjKw07OY_dBASwQNtCaa-bWyUZtkoTeio_zPnwhxG4qaeYwX7TqAyNFbous5uhEZiMuFgg6ZcXydK3BfJo2yJWv1AnkJEFqAbypnTmZF0vRb1i2iy1pPaH/s1600/centro.png' style='position:fixed; bottom:45px; right:10px;' title='Ir centro'/></a>

<a href='#footer-wrapper'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlwbks02fxrhP7dh1xse_BmkmjqEqBr0z7Wr9iNqSBCN0ggc0RpFQ3OHwiYObGNZt9TQw0JyW87OB9bqPJM9Q6G49LPcexgleoO6I1E0Z-qdXPxydRmCWA3K8w8SD4-b3mU_Am4XOAwnkx/s1600/abajo.png' style='position:fixed; bottom:10px; right:10px;' title='Ir abajo'/></a>
<!-- fin ir arriba,centro y abajo -->

Ahora le agregamos la siguiente linea para darle el efecto:

onclick='new Effect.ScrollTo("outer-wrapper",{offset:-150}); return false'

outer-wrapper se cambia en cada link por la id asignada:
  • "outer-wrapper"
  • "centro";
  • "footer-wrapper"
Quedaria así:

<!-- ir arriba,centro y abajo -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-150}); return false'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsiZ1pHHT-Sm4mhSqUTRvBMSupFxlTl-OPX-dnR_KT5Rwm62UZHR362zCfV10L9Ostq4a18TOzxS6ktxzM5hiQnIyBCsJL6c8lG8bZNFw3I44ejraR_vd2lqeKbk6uOgnxcvmbVEN7dr_/s1600/arriba.png' style='position:fixed; bottom:75px; right:10px;' title='Ir arriba'/></a>

<a href='#centro' onclick='new Effect.ScrollTo("centro",{offset:-150}); return false'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxgYpHWovHXLx0zyUGyTrzyMMjKw07OY_dBASwQNtCaa-bWyUZtkoTeio_zPnwhxG4qaeYwX7TqAyNFbous5uhEZiMuFgg6ZcXydK3BfJo2yJWv1AnkJEFqAbypnTmZF0vRb1i2iy1pPaH/s1600/centro.png' style='position:fixed; bottom:45px; right:10px;' title='Ir centro'/></a>

<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-150}); return false'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlwbks02fxrhP7dh1xse_BmkmjqEqBr0z7Wr9iNqSBCN0ggc0RpFQ3OHwiYObGNZt9TQw0JyW87OB9bqPJM9Q6G49LPcexgleoO6I1E0Z-qdXPxydRmCWA3K8w8SD4-b3mU_Am4XOAwnkx/s1600/abajo.png' style='position:fixed; bottom:10px; right:10px;' title='Ir abajo'/></a>
<!-- fin ir arriba,centro y abajo -->

Guardar cambios.


Consejo: No utilizar Jquery y Scriptaculous juntos, para evitar conflictos.

Leer Importante... Comentar esta entrada ▼ Ir al principio de la entrada
Anónimo dijo...

Good post and this enter helped me alot in my college assignement. Gratefulness you as your information.

Unknown dijo...

Otra vez yo, no diras que no visito tu blog, te voy a mandar parte de mi sueldo a casa jajja
mira yo en mi blog tengo una flechita para ir arriba pero quisiera poner otra de abajo como tu la tienes, en el margen inferior derecho, al lado o encima de la que tengo..¿como tendria que hacerlo?

siento las molestias y te doy las gracias de antemano

Vku dijo...

<a title="Subir" href="#header" style="position: fixed; bottom: 40px; right: 10px;"><img src="http://1.bp.blogspot.com/_gjBqKNTws4M/S7Hf1spvR2I/AAAAAAAACM4/c0sZ0u_KYlw/s320/blsubir.png" /></a>
<a title="Bajar" href="#abajo" style="position: fixed; bottom: 0px; right: 10px;"><img src="IMAGEN ABAJO" /></a>

Unknown dijo...

@ Vku:
Holaaaa vku, como te dije, lo puse en mi blog gracias a tu ayuda pero no tienen las flechitas el efecto deslizante¿se podria poner?

Muchas gracias por tu ayuda

besos

Vku dijo...

No es necesario, pero igual gracias.

Yo lo veo bien el desplazamiento.

Puedes ajustar la velocidad donde dice: var desplazamiento = 2500;

Y agregale a las 2 flechas z-index así:

right: 10px;z-index:1000"

Vku dijo...

en el comentario 4 despues de right: 10px; antes de "

asi: flecha subir
style="position: fixed; bottom: 40px; right: 10px;z-index:1000"

y en flecha bajar

style="position: fixed; bottom: 0px; right: 10px;z-index:1000"

F!X dijo...

Hola, que tal!!!
Vengo recomendado por Potro, de ciudadblogger.com :D

Intente colocar las flechas a mi pagina www.angelcanibal.com pero no hay caso :10) no se sera por la nueva plantilla o porque hay algo que no este bien puesto...
HELP!!! :(

Vku dijo...

FIX Empecemos.

1- Tienes repetido el código jquery, elimina el 1.2.6 y deja el 1.4.2

2- El código javascript que pusistes para ir ariba, centro y abajo

<!-- ir arriba,centro y abajo -->
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){
jQuery('a[href*=#]').click(function() {
........................

Cambialo de lugar.

Dejalo arriba de </head>

3- en los link de las flechas cambia

#head por #header-inner

#footer por #HTML10

4- Coloca el link del centro como dice arriba

<a id='centro'/>

Me avisas cuando esté.

Vku dijo...

En lo personal prefiero este otro:

http://loseasi.blogspot.com/2011/03/ir-arriba-centro-y-abajo-con-jquery.html

Exxil dijo...

Hola Vku ! mira tengo un problema con este codigo (me interesa el Scriptaculous) , en relidad soy novato en modificar codigos aunque ya he logrado poner anteriormente varios, pero creo que con este si estoy reprobando ! jajaja estos son mis dos conflictos por si tienes un poco de tiempo y quisieras ayudarme!


a).- en Edición de HTML en el caso de </head> si visualizo ambas, osea tambien esta otra <head> (con y sin diagonal). El problema es con esta donde dice </body> con esa diagonal no la tengo, solamente tengo esto <body>. entonces no se donde colocar este codigo <a id='centro'/> dentro de <body> y </body> .


b).-En la parte superior del post nos dices que peguemos este PRIMER codigo asi:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
El siguiente código lo pegamos -ABAJO- de &lt;body&gt;:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
&lt;!-- ir arriba,centro y abajo --&gt;
&lt;a href='#outer-wrapper'&gt;&lt;img border='0' src='http://4.bp.blogspot.com/_lMNoba63Ric/S5jjwKKwRWI/AAAAAAAAAC8/x2HAn0h-r5Q/s1600/arriba.png' style='position:fixed; bottom:75px; right:10px;' title='Ir arriba'/&gt;&lt;/a&gt;

&lt;a href='#centro'&gt;&lt;img border='0' src='http://1.bp.blogspot.com/_lMNoba63Ric/S5jjwHlUs7I/AAAAAAAAADA/qXb9rmM6J_A/s1600/centro.png' style='position:fixed; bottom:45px; right:10px;' title='Ir centro'/&gt;&lt;/a&gt;

&lt;a href='#footer-wrapper'&gt;&lt;img border='0' src='http://1.bp.blogspot.com/_lMNoba63Ric/S5jjv3svZlI/AAAAAAAAAC4/fKqXmhDmQlk/s1600/abajo.png' style='position:fixed; bottom:10px; right:10px;' title='Ir abajo'/&gt;&lt;/a&gt;
&lt;!-- fin ir arriba,centro y abajo --&gt;

-PERO DESPUES NOS DICES ESTO:

Ahora modificaremos un poco el PRIMER código que colocaron ARRIBA de &lt;body&gt;.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Entonces esa es mi duda, si es arriba o abajo de &lt;body&gt; este primer codigo.


Pero mi principal problema es con el inciso a), aqui si estoy reprobado.

Gracias por tu tiempo..!!!

Exxil dijo...

Perdon !! parece que no supe publicar bien el codigo de ejemplo. deveras que se echa de ver que soy novato con los codigos !!! jajaja

Vku dijo...

Hola Leonardh.
Primero lee esto:

http://loseasi.blogspot.com/2011/04/modificar-el-diseno-del-blog-algo-para.html

</body> esta bien abajo.

Pero lo que quise decir es que este dentro de la plantilla, fíjate el ejemplo que tiene una id HTML14, vos podes ponerlo pero busca en tu plantilla id='Image5'

B- ponerlo abajo de <body> y lo que hay que modificar es el código css.

O sea: cambiar las imágenes (en rojo) y la distancia (en azul)

bottom es abajo
right es derecha

Si tienes mas dudas me lo dices. Suerte.

Vku.

Exxil dijo...

Hola Vku, mira ya funcionan las flechas bien, van arriba y abajo bien.
- Ahora quiero agregar el efecto Scriptaculous entonces agrego el Primer Codigo de dicho efecto (que va arriba de < /head >) hasta aqui va bien.
Y en seguida esto fue lo que hice para no modificar manualmente el codigo que mencionas (osea el que esta hasta arriba del post y que esta colocado ABAJO de < body > en la plantilla en HTML), simplemente borre ese codigo y pegue alli el que tu ya tienes modificado.
Es correcto lo que hice? porque no se desliza? jajaja (lo curioso es que se guardo la plantilla correctamente osea no marco error, pero pues no se desliza) tengo que darle click para que se balla hacia arriba o abajo.
Seguire leyendo los manuales tambien, pero si tu pudieras detectar que hice mal???

Vku dijo...

El efecto es ese. Al hacer clic sobre las flechas se desliza.
Por lo que vi en tu blog funciona bien, menos la del centro.

¿O tu lo que quieres es hacer el efecto que utilizo yo?

En ese caso es agregando otro código javascript.

Yo utilizo dos efectos juntos.

Exxil dijo...

aa! pues con razon jajaja utilizas dos! y yo me rompia la cabeza tratando de lograr que se deslizara como el tuyo, osea sin dar el click, bueno estaria de lujo si me muestras como se hace el efecto del tuyo.!! gracias ! y estare bien pendiente cuando me muestres como lograrlo.!

Exxil dijo...

Porcierto es estupenda la manera en la que te enlazan a otros blogs, muy rapido el proceso!, si te alcanza el tiempo me podrias mostrar tambien esos codigos? yo lo unico que tengo de momento es el Banner de mi Blog hecho.

Vku dijo...

Yo utilizo junto con este código:

http://loseasi.blogspot.com/2009/10/subir-y-bajar-desplazandose-despacio.html

Y los link serían así:

Le agrego lo siguiente:

Para arriba: onmouseout='stopScroll()' onmouseover='subir()'

Para abajo: onmouseout='stopScroll()' onmouseover='abajo()'

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-150}); return false' onmouseout='stopScroll()' onmouseover='subir()'><img border='0' src='http://4.bp.blogspot.com/_lMNoba63Ric/S5jjwKKwRWI/AAAAAAAAAC8/x2HAn0h-r5Q/s1600/arriba.png' style='position:fixed; bottom:75px; right:10px;' title='Ir arriba'/></a>

<a href='#centro' onclick='new Effect.ScrollTo("centro",{offset:-150}); return false'><img border='0' src='http://1.bp.blogspot.com/_lMNoba63Ric/S5jjwHlUs7I/AAAAAAAAADA/qXb9rmM6J_A/s1600/centro.png' style='position:fixed; bottom:45px; right:10px;' title='Ir centro'/></a>

<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-150}); return false' onmouseout='stopScroll()' onmouseover='abajo()'><img border='0' src='http://1.bp.blogspot.com/_lMNoba63Ric/S5jjv3svZlI/AAAAAAAAAC4/fKqXmhDmQlk/s1600/abajo.png' style='position:fixed; bottom:10px; right:10px;' title='Ir abajo'/></a>

Exxil dijo...

GRACIAS.!!! Vku- ahora si me resulto muy facil.!quedan estupendos los dos juntos, -no agregue el Boton de Enmedio pues realmente no es tan necesario.

Las cositas de Meri dijo...

Hola de nuevo Vku. ya se que esto es antiguo y lo tengo puesto hace muchísimo en los blogs pero me he dado cuenta que en este http://elclubdemisamores-meri.blogspot.com/ al darle para ir al centro se abre una pagina en blanco. Por más vueltas que le doy no se como solucionarlo ¿me ayudas?
Saludos

Vku dijo...

Es que tienes este código:

<base target='_blank'/>

Que hace que los link habran en una nueva pestaña.

Lo que es raro que no afecte el ir arriba y abajo.

Las cositas de Meri dijo...

Gracias Vku. Siempre han funcionado los tres con ese código pero ahora..... ¡cosas raras!

No pasa nada
Graciassss
Saludos

Vku dijo...

Prueba agregar target="_self" a href='#centro'

<a href='#centro' target="_self"

Las cositas de Meri dijo...

Pues solucionado, simplemente era que no estaba en el sitio correcto esto a i d ='centro'/ lo he bajado para abajo y listo jeje

Perdona que te haya molestado
Saludos

PD: te lo he puesto asi porque no lo admite

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?