Hace ya bastante tiempo vimos cómo poner las flechas de "Ir Arriba" e "Ir Abajo", ahí vimos tanto el método simple, como con un efecto deslizante usando Scriptaculous.
En esta ocasión veremos cómo poner el botón de "Ir Arriba" en el blog pero con la particularidad de que se encuentra oculto, sólo aparece cuando se baja la página y desaparece otra vez cuando se regresa a la parte superior del blog. Además, al funcionar con jQuery el desplazamiento de la página se vuelve con un efecto deslizante. Puedes verlo funcionar en este blog de pruebas, al bajar el scrollbar aparecerá el ícono para subir, una vez que subas al hacer click desaparecerá de nuevo.
Para ponerlo en tu blog entra en la Edición HTML y antes de </head> agrega jQuery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
Si ya lo tuvieras omite ese paso.
Ahora antes de ]]></b:skin> agrega los estilos:
/* Botón Ir ArribaPor último, antes de </body> agrega el script:
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNwMu_si7nhg_24jygdfimPpJnjLoRgFpy1xyT2ZuTlxU3JysrqRvU2owsBEQAIOZ2wEnQKvZwGhPbOnvB6YgmHPskI6eIMG9IODj-jCZagzCBjXZbXO-iNqeITrHAbNiS6jcf7zNdgQA/s60/flecha-arriba.png) no-repeat center center;
}
<div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
//]]>
</script>
Guarda los cambios y listo.
En color verde puedes ver dónde se modifica la distancia y el tamaño del botón. En caso de que quieras poner otra imagen distinta, cambia la URL en color azul por la de tu imagen; si haces eso deberás cambiar el ancho y alto del botón donde se indica de acuerdo a las medidas de tu imagen.
El ícono de la flecha estará del lado inferior derecho, si lo quisieras a la izquierda cambia
right: 30px; por left: 30px;
right: 30px; por left: 30px;
Y si lo quisieras arriba cambia bottom: 30px; por top: 30px;
Recuerda, que si ya tienes jQuery no debes poner el primer código, de lo contrario tendrás problemas de incompatibilidad.
Si te interesa otro método para tener el botón de Ir arriba, Ir abajo, e Ir al centro también con jQuery, puedes usar el método de Vku.
Ciudad Blogger
Excelente era justo lo que buscaba y combina con mi blog gracias por compartir!!
ResponderEliminarSalu2 :)
Por nada osceanx, buen fin de semana.
EliminarGracias! Le cambié el color de fondo a la flecha para que "pegara" mejor con el estilo de mi blog y ha quedado perfecto! :D
ResponderEliminarMuchas gracias!
Ciertamente te ha quedado muy bien :)
EliminarGacias una vez más, me hacia falta lo de la flecha porque el blog es muy largo.
ResponderEliminarUn saludo
Manuel
Gracias a ti por tu visita Manuel, qué bien que hayas encontrado algo que tu blog estaba necesitando. Un saludo.
EliminarMuchas Gracias potro justo lo que necesitaba.
ResponderEliminarPor nada Jason Santoro, un abrazo!
EliminarGracias. Oye Potro ay alguna forma de hacer una galleria de fotos en blogger como en wordpress. Se que se pueden cambiar fotos pero aun cada foto es grande y solo para arriba y abajo. En wordpress pueden poner muchas fotos en blockes como una galleria. Se puede hacer esto en blogger?? Muchas gracias.
EliminarNo me queda muy claro como qué tienes en mente. Galerías hay muchas, y casi todas se pueden poner, pero no sé realmente a qué te refieras.
EliminarMira esta foto alomejor me explico mejor en como una galleria de wordpress es muy diferente a la gallerias de blogger. Y como se puede hacer igual como al wordpress. http://i42.photobucket.com/albums/e307/AndThenWeKiss2006/GALLERIAS.png
EliminarPues ahí no es cuestión de plataforma, sino del método que se use para acomodar las fotos. Si usas una tabla podrás tenerlas alineadas de esa manera:
Eliminarhttp://ciudadblogger.com/2009/05/insertar-tablas-en-blogger.html
Y ya estando todas así puedes aplicar Shadowbox para que se abran de mejor manera:
http://ciudadblogger.com/2010/04/shadowbox-ventanas-modales-multimedia.html
Ah okay muchas gracias potro. Eres un life saver.
EliminarDemasiado Bueno Potro,
ResponderEliminarMuchas gracias y a comenzar a ver que diseño se ve mejor !!
Saludos !!
Gracias a ti por tu visita Emilio, buen fin de semana!
Eliminarpotro lo poce pero no me fucnciono sale el boton pero no acciona no hace nada
ResponderEliminarMuchas gracias!! ya mismo lo voy a poner.Bss apretaos!!!
ResponderEliminarLuego nos presumes a ver qué tal te ha quedado ;)
Eliminarya esta resuelto el inconveniente gracias
ResponderEliminarSupongo que habrá sido un problema con jQuery, pero me alegra que ya lo has resuelto, saludos!
Eliminarestá genial, lo probaré en mi blog. Gracias, Saludos!
ResponderEliminarQue todo salga bien Marcos, buen fin de semana :)
EliminarLO puse, pero resulta que tiene mi blog fondo negro y no se ve, aunque al colocar el puntero sale para dar clic y si funciona, solo que no se ve, en donde cambio el color a fondo blanco para que se vea.
ResponderEliminarGracias potro, como siempre, nos traes trucos muy buenos, felicidades y muchas bendiciones a tu vida.
Iglesia Cristiana Evangelica
El ícono de la flecha es una imagen, tendrías que cambiar la imagen por otra de otro color. Saludos.
EliminarMirando bien, me encuentro con la sorpresa que el boton esta al lado izquierdo, no entiendo porque el codigo esta en right:30px y el otro problema es que el boton se muestra solo hasta que he bajado toda la pagina, no como el tuyo que se muestra mas rapido.
EliminarBendiciones Potro.
Es porque arriba de estos estilos has puesto un comentario que no debe ir en esa área, no de esa forma como está puesto:
Eliminarhttp://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Muchisisisisisisisisisisisisimas Gracias Maestro, ya se soluciono el problema, que tremendo, gracias a ti, y a tus consejos, sigo aprendiendo muchisimo.
EliminarBendiciones maestro, y que el Señor bendiga tu generosidad al compartir tus conocimientos, se que muchos te lo agradecen.
Muchas gracias Gilberto, bendiciones para ti también, y los tuyos. Buen fin de semana.
EliminarGracias, Potro, me interesa mucho para el blog de fotos además, así aumento el número de entradas por páginas y paso de usar las nuevas plantillas esas..ahora, sólo me falta el tiempo para tantas cosas estupendas que pones y que las quiero todas y ¡no me da lugar!...:)))j.
ResponderEliminarMil gracias, como siempre tú, facilitándonos las cosas.
Un beso enorme
ojú, Potro..no me he atrevido, porque me he encontrado al revisar la plantilla una cosa que empieza a "así"
Eliminarscript src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='
(es que no me deja esto ponerlo todo, claro)
( y sigue con mucho lío)
y no sé lo qué es...:D..es que esa plantilla la copié del otro, aunque no uso todo lo que el otro tiene..
Lo que pasa es que me da miedo de que entren en conflicto, ...??...ya sabes que soy una cateta en esto ( y en taaaantas cosas)..:)) si me puedes decir algo, te lo agradecería.
aparece detrás del final de skin
Hola Sofía. No te preocupes por ese script, el de este botón ya está arreglado para evitar problemas con esos otros scripts como el que mencionas.
EliminarPrueba ponerlo, si te diera problema vemos para qué usas ese de Mootools.js, a la mejor está ahí pero ya no lo estás ocupando.
Un beso :)
:), ¡gracias!, entonces tranquila ya sí lo pruebo, si no ahora es porque es tarde para acá y mejor ya mañana por la mañana (despejada) no vaya ser que se me escape algo y ya te comento. ¡¡BESO!!
Eliminar¡pues ya está puesta!!, jaja, ya funciona!! cansada y todo ha quedado preciosa, haces que todo resulte fácil, eres un genio.
Eliminar(bueno, a lo mejor rediseño los colores que le he cambiado, no sé yo ahora mismo si quedan muy bien, jeje, pero ya eso es lo de menos, :DD)
¡muchísimas gracias, potro!
Un beso enorme
¡Ea! Ya lo vi funcionar :) Me alegra que no haya habido complicaciones.
EliminarTe mando un beso grande, grande.
potro podes hacer un tutorial del botón subir de taringa que los vi en muchos blogs
ResponderEliminarPuedes conseguirlo desde la página de Taringa:
Eliminarhttp://www.taringa.net/widgets/compartir
O puedes usar uno de estos que ya lo tiene integrado:
http://ciudadblogger.com/2011/09/botones-para-compartir-deslizantes.html
http://ciudadblogger.com/2012/01/botones-para-compartir-estilo-taringa.html
no ese no,el botón subir que tiene taringa, que bajas un poco y te aparece, un botón subir, que si los apretas llegas hasta arriba. Imagen del boton:http://3.bp.blogspot.com/-TlXsXdv3z6I/T1JaqslZBEI/AAAAAAAACIc/r13chANCgA4/s1600/BOTONTARINGHA.png
EliminarPues sólo cambia la ubicación de este mismo botón, y cambia la imagen por otra que se le parezca.
EliminarGracias quedo muy bien,gracias :D
ResponderEliminarPor nada ;)
EliminarMe alegro que te haya gustado Gray Wolf, saludos.
ResponderEliminarHola El Potro, lo instale en mi blog y no aparece, aparte de que ha hecho que dejara de funcionar el menú deslizante de la parte superior que funciona con jQuery. Sólo tengo un código jQuery en la edicion HTML. He buscado en los gadgets y ninguno utiliza jQuery. Que conflicto hay?
ResponderEliminarSaludos
El blog: http://grupoblogin2.blogspot.com/
EliminarHola Josep-Pepe, primero arregla un error en el código CSS, al ponerlo has eliminado una llave de cierre:
Eliminarhttp://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Ya aparece el botón, pero no desaparece al subir y al hacer click no hace nada.
EliminarAplícale el jQuery.noConflict(); al script del menú, con eso funcionará;
Eliminarhttp://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html
Ya funciona, gracias como siempre. ;)
EliminarExcelente (Y) :)
ResponderEliminarLa diferencia es la versión, la 1.7.1 es más actual que la otra, pero si así te funciona bien no hay problema ;)
ResponderEliminarPotro, como siempre genial !!
ResponderEliminarUn abrazo.
Gracias Potro!
ResponderEliminarEres genial viejo.
Wevoluciona
Para Wordpress hay un pluging que hace las cosas más sencillas.
ResponderEliminarhttp://wordpress.org/extend/plugins/scroll-to-top/
Un saludo,
Para WordPress hay muchos plugins, pero nosotros usamos Blogger, así que tenemos que esforzarnos más :)
Eliminarde donde sacas tantas ideas cada dia para postear?
ResponderEliminarPues los lectores preguntan por cosas, piden otras, y de ahí sale ;)
EliminarOk,una pregunta no tendras algun post tutorial para poner los codigos HTML? esque nose ni como se llaman ni como se ponen.
EliminarMe refiero a por ejemplo en esta entrada has puesto el codigo "<script src='http://ajax.goo....." como se llama el recuadro donde lo pones?
Gracias
http://ciudadblogger.com/2009/01/insertar-cdigo-html-en-un-post.html
EliminarMira el enlace que te ha puesto Josep-Pepe, además de eso yo lo pongo dentro de un blockquote, pero eso ya es opcional.
EliminarPotro, lo primero felicidades por el primer premio de tu categoría en los 20blogs de 20minutos, yo quedé 3º en la mía. Lo segundo es que el correo lo debes tener a tope y no doy con el problema de que al compartir un post de blogger en fb, no sale la imagen en miniatura desde hace unos cuantos días. Sabes algo?, te importa contestarme en cualquier entrada de cualquiera de mis blogs. Muchas gracias, majo.
ResponderEliminarMuchas gracias Blanca, y felicidades para ti también :)
EliminarTe contesto por acá para que la misma pregunta pueda servir a alguien más.
El sistema de Facebook lo que hace es leer la información del enlace y en él buscar los datos de la imagen, el título y el resumen de la entrada, pero para que pueda leer esa información necesita tener las guías necesarias. El problema con los que usamos Blogger es que no podemos meter mano donde se debe para poder darle esas guías a Facebook, así que nos limita bastante.
Sin embargo, puede ser que te interese usar este sistema que propone JMiur, con él habrá más probabilidades de que aparezca la información como debe ser:
http://vagabundia.blogspot.com/2012/01/mejoras-para-compartir-entradas-en.html
Saludos.
felicidades Potro, ayudas mucho a la gente a diseñar sus blogs y eso tiene su premio... gracias por todo.
ResponderEliminaraprovecho para pedirte un favor.. como podria escuchar esta radio en mi blog ?.. http://www.canelaradio.com/imcanela.php?c=854
gracias por anticipado...
Gracias por tu comentario. Necesitas saber cuál es la URL con la que envían la señal, usualmente termina en ASX, ya que la conozcas entonces puedes aplicar el método de esta entrada, pero, por lo que he visto la página está hecha en flash, así que tendrás que ponerte en contacto con la radio para que te faciliten los datos.
Eliminaroki se ve muy bien buen aporte saluditos ^^
ResponderEliminarExcelente POST.
ResponderEliminarTengo una consulta... Existe alguna condicional no se para que un gadget, texto ò imagen solo se vea cuando utilizas internet explorer o cualquier otro navegador? si la hay compártela por favor! :D
Puedes usar las condicionales de Internet Explorer:
Eliminarhttp://vagabundia.blogspot.com/2011/06/condicionando-las-cosas-para-internet.html
Potro disculpa que use esta entrada para consultar, pero estoy vuelto loco buscando solucion a mi problema en la red y no encuentro nada.
ResponderEliminarVeras, mi blog: http://18minutos.blogspot.com/
El problema es que cuando pesco la url de alguna entrada y la pego en facebook no aparece nada, no carga contenido ni imagen, ni texto, nada de nada.
Podrias ayudarme? gracias.
Ya lo ha dicho EL Potro en un comentario anterior: http://vagabundia.blogspot.com/2012/01/mejoras-para-compartir-entradas-en.html
EliminarExactamente (comentario #22.1)
Eliminar:)
Hola, tengo una pagina similar a desmotivaciones.es y como mi pagina esta inspirada en esa, quiero agregar una barra como la que tiene facebook (la barra que tiene facebook que pone "Facebook, Buscar, etc" y que te sigue y siempre esta en la parte de arriba) y que la barra digua algo como: Pagina inspirada en desmotivaciones con el enlace.
ResponderEliminarMe sabrias decir, hacer un tutorial o algo de como crear esa pequeña barra?
Gracias
Hola LeoProduccions, no veo en ese sitio ninguna barra "que me siga" :S
EliminarPerdon, me equivoque de web, la pagina donde se puede ver mas o menos lo que quiero es cuantocabron.com
EliminarPues tampoco. Dice que el sitio se encuentra "offline".
Eliminarhaber, le he hecho una foto, donde esta el puntero, es la barra que te pregunto con las direcciones de la webs
Eliminarhttp://img59.imageshack.us/img59/292/cuantocabron.png
ignora lo de loguearte con nombre y usuario, solo creo la barra
Sólo pon debajo de <body> esto:
Eliminar<div style="height:35px; width:100%; background:#000;">
...aquí los códigos de los botones...
</div>
Ahí coloca los códigos de los botones que no es otra cosa mas que simples imágenes con enlaces. Para que no te vaya a quedar en vertical pon los códigos de las imágenes uno seguido del otro, sin dar saltos de línea.
Hola potro, y si sólo quiero poner un enlace que diga "top" en el footer y que se deslize hacia arriba?
ResponderEliminarpongo la librería de jquery y qué mas?
Pones en el footer un link así:
Eliminar<a href="#" onclick="$(body).animate({scrolltop : 0}, 800)">textodelenlace</a>
Si quieres una imagen cambia "textodelenlace" por "<img src="URLIMAGEN" title="volver arriba"/>"
Espero haberte ayudado ;)
Gracias, hmm pero no funcionó :s
EliminarEste comentario ha sido eliminado por el autor.
EliminarPerdón, "body" debería ir entre comillas, y "scrolltop" debe de ser "scrollTop" :S.
EliminarEn mi defensa diré que lo escribí a la 1 y media de la madrugada...
Si aún así no funciona, prueba a cambiar "body" por "body,html".
Si aún así no va, cambia el dolar "$" por "jQuery" y pon antes de la última comilla del "onclick" un punto y coma.
P.D.: Asegúrate de que las comillas son distintas a las del onclick. Al final quedaría algo así:
<a onclick="jQuery('body,html').animate({scrollTop:0},800)">textoenlace</a>
Eso, o usar alguno de los otros métodos:
Eliminarhttp://ciudadblogger.com/2010/01/boton-de-ir-arriba-e-ir-abajo.html
perfecto, muchas gracias!
Eliminarhola , disculpa que te consulte por aca
ResponderEliminarpero necesito de tu ayuda ...
quiero saber si tenes idea de como hacer esto
http://i.imgur.com/3k1QL.png
lo puedes encontrar en este blog
http://todosobrecamisetas.blogspot.com/
por lo que veo son entradas aleatoreas
nose si esta bien lo que digo soy novato en esto de blogger =/
espero que me puedas ayudar
No sé cuál sea exactamente ese carrusel, pero aquí hay unas opciones:
Eliminarhttp://ciudadblogger.com/2010/02/carrusel-de-imagenes-con-jquery-y.html
http://ciudadblogger.com/2011/10/carrusel-de-imagenes-con-scriptaculous.html
http://ciudadblogger.com/2009/05/links-y-banners-en-movimiento.html
voy a ver que sale :)
Eliminarte agradesco por los links .
y tambien por la intencion de ayudarme ..
gracias
Tengo un problemilla con el blog que te quería comentar:
ResponderEliminarwww.elrincondedomive.blogspot.com
Como verás, debajo de la cabecera, mi blog tiene páginas, pero cuando pasas de un linia, se hace como un barra de color dorado oscuro horrenda. Hay alguna forma de que no se vea?
Por cierto, el otro día tuve el impulso de subir lo del slider arriba, justo debajo de la cabecera de manera que fuese tan largo como el blog y se adaptase a esa medida (en vez de tener la anchura de la barra de las entradas), pero al subirla me pasa lo mismo que con las páginas; en vez de ponerse como un gadget normal y corriente, el fondo se vuelven tiras linias doradas oscuras y más claras.
Tienes idea de porqué será?
Muchas gracias! Nos vemos! :D
No puedes hacer que no se vea, es parte de los estilos de la plantilla que has elegido, pero sí puedes hacer más pequeña la fuente para que quepa la otra pestaña y no se tenga que bajar a la otra línea. Eso lo puedes hacer desde el Diseñador de plantillas dentro de Avanzado > Texto de la pestaña.
EliminarSaludos.
Oye, que plantilla usas para tu web?
ResponderEliminarYo la diseñé Moises.
EliminarGracias Potro excelente... muchos saludos, visita desde http://librosderechoperu.blogspot.com/
ResponderEliminarmuy bueno el articulo
ResponderEliminarOlle el potro me podrías ayudar ya que se que lo que voy a escribir aquí no va con este tema ya que no se donde escribirlo te lo escribo aquí espero que lo leas y me puedas ayudar.
ResponderEliminarEs que mira he puesto un menu y me gustaría poner dos pero no consigo hacerlo.
Mi intención era tener dos menús uno arriba luego la imagen de la cabezera y luego otro he conseguido hacer el primero y to y poner la imagen y to pero cuando intento hacer la segunda parte ponga la imagen pero no se que hacer ya que he intentao poner opciones allí el de abajo pero na
aquí te dejos mis códigos del menú de blogspot.com y mi pagina web para que le heches un vistazo y si puede podificar estos codigos que te he dado Ok.
#menu-title {
padding:5px;
background:#333; /* Color de fondo de la marquesina */
border-bottom:1px solid #fff;
}
#menu-title h3 {
padding:0; margin:0;
color:#ccc; /* Color de texto de la marquesina */
font-family:Verdana, serif;
font-weight:bold;
font-size:130%; /* Tamaño de la letra de la marquesina */
}
#nav {
float:left;
width:100%;
margin:0; padding:0;
list-style:none;
background:url(http://i48.servimg.com/u/f48/17/28/49/84/yyyyyy11.png); /* Color de fondo del menú */
border-bottom:0px solid #999;
}
#nav li{float:left; margin:0; padding:0;}
#nav a {
float:left;
display:block;
padding:6px 30px 6px 5px;
text-decoration:none;
font-family:Verdana, serif;
font-weight:bold;
font-size:90%; /* Tamaño del texto del menú */
color:#fff; /* Color del texto del menú */
/* Color de fondo del menú */
background:#auto url(http://4.bp.blogspot.com/_qgZA1ny_dAs/S_Qq7NYdkxI/AAAAAAAAELs/hSMXOms6o6I/s400/nav_slant.gif)no-repeat top right;
}
#nav #nav-1 a {padding-left:20px;}
#nav a:hover {color:#000;}
#botmenu{
height:40px;
margin:0px 0px 0px 0px;
font-family:Tahoma,Arial, verdana,Century gothic, sans-serif;
background:url(http://i48.servimg.com/u/f48/17/28/49/84/odioss10.jpg);
font-size: 13px;
}
aqui esta mi web por si me puedes ayudar
http://deljuefo.blogspot.com
Hola Expert Gamer, efectivamente esa pregunta no va en este tema. Deja la consulta en la entrada que corresponde para no desviarnos del objetivo de esta entrada, y para darle su seguimiento a los temas donde corresponden. Saludos.
EliminarALGUIEL ME AYUDA?
ResponderEliminarHola potro una pregunta que no tiene nada que ver con este post, en mi blog uso el tabview en las entradas, quiero saber como podria hacer para levantar un poco el video y que su parte de arriba se oculte debajo del tabviw
ResponderEliminarEjemplo: mira esta entrada...
http://mardelmovie.blogspot.com/2012/03/j-edgar-online-putlocker.html
En el tabview aparece un video de putlocker, el cual en su parte superior dice
"1329103467_JEdgar.DVDRip.subesp.avi"
ESA PARTE ES LA QUE QUIERO OCULTAR DEBAJO DEL TABVIEW, COLOCANDO EL VIDEO UN POCO MAS ARRIBA!
En el mismo post te eje el HTML
Hola Gonzademarpla, por favor deja la pregunta en la entrada del tabview, ahí es donde debe hacerse, no aquí ;)
Eliminarexcelente potro una vez mas muchas gracias por tus aportes!
ResponderEliminarsolo y como ya es costumbre es mi tengo una duda, se que podrás ayudarme y es que no se donde condicionarlo para que no aparezca en la plantilla para mobiles. espero me ayudes gracias por tu atención y un cordial saludo.
Hola CHISTES Y CHISTES, el último código tendría que estar en un elemento HTML/Javascript para que a ese gadget le pongas el mobile='no' y así hacer que no se vea en la versión móvil.
Eliminarlo puse en un elemento HTML/javascript y no funciona :S
EliminarPrueba entonces agregando estos estilos:
Eliminar.mobile #IrArriba {
display:none;
}
Hola, Potro
ResponderEliminarMe gustaría saber como podemos quitar gadgets que no se dejan eliminar; si es posible? Al menos desde Código HTML?
Saludos Potro!
Hola ricardogot2010, desde la edición HTML y sin expandir los artilugios busca la línea del gadget, la puedes buscar por el nombre que le hayas puesto, por ejemplo:
Eliminar<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'/>
Ese es el código correspondiente a un gadget, sólo lo borras y listo.
Saludos.
Gracias Por tu ayuda!
EliminarSaludos!
Ay Potrito que linda idea apenas la vi, muchas gracias!! yo sigo con los corazones de san Valentín jajajaja!!! Bendiciones!!!
ResponderEliminarJajaja, me parece bien que sigas con tanto amor todo el año ;)
Eliminarcomo siempre muchas gracias !!! potro
ResponderEliminarperfecto!!!!queda estupendo.
ResponderEliminarComo siempre ofreciendo cosas fantasticas mil gracias potro
Hola Potro, oye Creo que este comentario no iria en este post, pero como es el más reciente te queria preguntar si aun blogger no tiene la tecnología como para que el Leer Más en el Thumb se pueda colocar en forma de detector de rostro o solo abarque una parte de la imagen, ya que eh visto muchos blogs de Wordpress que tienen ese estilo en el thumb. Mira este es el thumb en Wordpress: http://prntscr.com/6t7je y la imagenen original es esta: http://prntscr.com/6t7kp Gracias de antemano. Si llegaras a encontrar algo asi, creo que muchos de tus seguidores estariamos muy felices, Gracias Por todos los tips =P
ResponderEliminarHola •๖ۣۜWιяєχ•, detector de rostros no, pero puedes usar un sumario que recorte la imagen de forma cuadrada:
Eliminarhttp://www.oloblogger.com/2011/03/sumarios-automaticos-sin-javascript.html
Potro eres como un dios del Blogger, que haria sin ti XD Gracias!
Eliminarhola puedes hacer un tutorial pero con este estilo boton arriba estilo css que yo hise, pero que aparece y desaparece y desplazado aqui te dejo el codigo css para que melo puedas agregar que lo quiero de esa forma xD
ResponderEliminara.admin_eliminar {-moz-border-radius: 4px;-webkit-border-radius:4px;border-radius: 4px;background:#000;color:#222222;padding:3px 10px;margin-top:20px;}
a#to_top {border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;background:url("https://lh4.googleusercontent.com/-QefVMNacC8I/TwTlQ5cwMnI/AAAAAAAAAWg/GW6Q7T2SY-o/s36/boton2.png") repeat-x scroll 0 0;border:1px solid #CCC;color:#000;font:bold 13px Arial,Sans-serif;padding:6px 10px;text-align:center;text-decoration:none;text-shadow:0 1px 0 #FFF;bottom:8px;position:fixed;right:8px;}
a#to_top:hover {background:url("https://lh6.googleusercontent.com/-jCkhk28P8wE/TwTipc8QjPI/AAAAAAAAAWM/Z64B863y4dQ/s36/boton.png") repeat-x scroll 0 0 #FFAA22;border:1px solid #63B52F;color:#000;display:block;text-align:center;text-decoration:none;text-shadow:0 1px 0 #B4DC48;-moz-text-shadow:0 1px 0 #B4DC48;-webkit-text-shadow:0 1px 0 #B4DC48;}
No he entendido ni tantito. Un código CSS sin HTML no dice nada, pero si ya lo has hecho no habrá falta que yo haga nada ;)
EliminarGracias!!
ResponderEliminarHola Potro!
ResponderEliminarOtravez estoy por aquí..pero mi pregunta de hoy la verdad es que no tiene nada que ver con este post, pero al no encontrar un sitio adecuado pense ponerlo aqui. ¿Sería muy difícil introducir un mapa en una entrada y por cada seccion de mapa redireccionarlo a un link al hacer click?
Nose si me entiendes, a lo que me refiero es que si cojo un mapaa de Europa y paso por España, y le de click, que salga el link al que esté destinado(historia, compras, o lo que sea).
Gracias por tu tiempo!
PD: ¿Por qué no abres un foro o una sección de "sugerencias"? porque la verdad esque aveces no tengo ni idea de donde poner mis absurdas preguntas. Hahaha
Un saludo
Hola Isaak, quizá lo que necesitas es mapear una imagen, es decir, que a una misma imagen le puedas poner distintos enlaces según el área. Aquí hay una herramienta online que te permite hacerlo más fácil:
Eliminarhttp://www.maschek.hu/imagemap/imgmap
Gracias!!!!! No sé cómo puedes tener tantos recursos... hahahaha. Lo que necesitaba si es un mappeador, pero al copiar el código HTML y pegarlo en la nueva entrada, no me aparece la imagen, se queda en blanco..asique me pondre a la busca de otro programa:)
EliminarGRACIAS!:)
Vale, hay otros en línea, quizá alguno de ellos te funcione mejor. Saludos!
EliminarMuchas gracias, yo también lo he usado ya!!! Saludos...
ResponderEliminarSaludos Ezequiel :)
EliminarHola Potro.
ResponderEliminarLlevaba tiempo sin comentar pero ahora me surgió un problema poniendo el botón.
El botón ha funcionado muy bien en todas las pestañas del menú de mi blog pero Cuando entro en la pestaña "Contáctenos", no desaparece y tampoco pasa nada al darle click. En ésta pestaña lo único que tengo es un formulario de Emailmeform.com
Mi blog es www.arteentorno.com
Ojala puedas ayudarme con esto ya que me gustó mucho como quedó en el resto de las páginas de mi blog.
De antemano Muchas Gracias.
Hola Victor, lo que sucede es que el formulario de Emailmeform usa jQuery, y como también tienes la versión de jQuery para este botón entonces entra en conflicto con el script del formulario. Lo recomendable en estos casos es que uses la versión de sólo HTML del formulario, ahí en la página de EmailMeForm puedes copiar el código que es sólo HTML y no tiene nada de scripts.
EliminarSaludos.
Gracias Potro!
EliminarAhora esta funcionando a la perfección.
Este comentario ha sido eliminado por el autor.
ResponderEliminarGracias Potro, era lo que necesitaba, saludos desde Paraguay.
ResponderEliminarSaludos hasta Paraguay :)
EliminarMuchísimas gracias hermano, esto era justo lo que estaba buscando.
ResponderEliminarTenía mi botón con efecto y todo, y me funcionaba bien hasta que agregué una barra de herramientas a mi blog y después de ahí no me funcionaba el efecto.
Probé varios códigos de botones y ninguno me hacia lo que me hacia el primero, pero con la barra puesta, hasta que encontré este que pusiste.
De verdad te lo agradezco en el alma, que Dios te bendiga hermano.
Mira, le puse esto en cero ( if (jQuery(this).scrollTop() > 0) {), para que me aparezca el botón al bajar un mínimo pixel je je je me gusta mas así, también hice algunos ajustes en la posición del botón y usé mi propia imagen de botón, pero todo esta perfecto. De verdad no encuentro palabras para agradecerte hermano.
Saludos desde República Dominicana :D!
Seguramente era la barra de Wibiya, esa barra usualmente afecta a otros scripts. Qué gusto que este botón te haya funcionado y satisfecho el resultado :)
EliminarSi, fue esa misma barra je je je... de verdad que me siento muy agradecido y satisfecho :D. Dios te bendiga grandemente.
EliminarSaludos!
como hacer que vaya del lado izquierdo
ResponderEliminarEn la entrada se explica eso.
EliminarExcelente Potro, ya lo agregue en mi blog
ResponderEliminarSolo tengo una duda como hago para que quede en el centro?
Hola Obed, sólo cambia la /* Distancia desde abajo */ para que quede a la altura que deseas.
Eliminarhola que tal estoy haciendo una plantilla nueva y cuando pongo todo el codigo (esta bien escrito, ya lo use en otra plantilla y me funciono) no me aparece la imagen, no se si sera por el jquery, hay forma de saber si esta funcionando el jquery o tenes idea de porque no me funciona la flecha ??
ResponderEliminarHabría que ver en cuál blog lo has puesto para saber qué pudo haber pasado que no aparece la imagen.
Eliminarhola que tal aparentemente no tenia instalado bien jqueri o algo asi y por eso no aparecia, ahora tengo otro problema, necesito poner otra sidebar mas del lado izquierdo, eh visto como 100 formas diferentes de ponerla pero no me funciona niguna,te dejo la plantilla mia para que veas:
Eliminarhttp://www.mediafire.com/download.php?03u1ow36b3mrar2
PD: casi me vuelvo loco probando, si pudieras ayudarme te lo agradeceria muchisimo, no sabia en que lado del blog dejar mi duda por que la opcion de contacto me marca que no esta disponible.
No hace falta el respaldo de tu plantilla, sólo dime cuál blog es y cómo se llama la plantilla original. Saludos.
Eliminarla plantilla original se llama ProGames, y el blog es:
Eliminarhttp://paradiseanimesf.blogspot.com.ar/
Cambia el ancho (width) del #outer-wrapper por 1300px
EliminarLuego arriba de #sidebar-wrapper { añade esto:
#sidebar-wrapper {
border-radius: 7px 7px 7px 7px;
float: left;
margin-right: 7px;
margin-top: -6px;
overflow: hidden;
width: 308px;
word-wrap: break-word;
}
Por último, arriba de <div id='main-wrapper'> agrega esto:
<div id='sidebarleft-wrapper'>
<b:section class='sidebar' id='sidebarleft' preferred='yes' />
</div>
El problema será que los fondos de tu blog son imágenes, así que lo más seguro es que tengas que editar el ancho de todas esas imágenes a fin de que cuadre con el nuevo ancho.
ya esta, lo unico que en ves de #sidebar-wrapper {, tenia que poner sidebarleft.
EliminarMuchuisimas gracias te debo una enorme
Es verdad, se me pasó cambiar esa parte :P
Eliminarel unico problema ahora es que la imagen que aparece debajo de los titulos de la sidebar ahora esta del lado iquierdo , pero del derechio no, ademas el fondo de los gadgets no aparece, tenes idea de que pueda ser ??
EliminarHas de haber modificado los estilos correspondientes a la sidebar. Revisa los estilos de la plantilla original para que veas qué cambiaste.
Eliminarhola que tal tengo un ultimo problema, ya casi termino, y necesitaría cambiar el color de la letra dentro de los gadgets de mi blog (el de arriba) por el color blanco, tenes idea de como puedo hacerlo ??
ResponderEliminarCambia esto:
Eliminar.sidebar {
color: #000000;
Por esto:
.sidebar {
color: #FFF;
muchas gracias sos un capo
EliminarGracias, me funcionó perfectamente. Agrego una url a el tipo de flecha que utilicé: http://img710.imageshack.us/img710/5193/flecha60px.png
ResponderEliminarY el link al blog:
http://betaraytv.blogspot.mx
Saludos.
Me alegro que te haya servido :)
EliminarSaludos.
hola perdona que te joda otra vez, pero tenes idea de como sacar la barra de arriba marrón o aunque sea ocultarla y sacar la opcion de pagina principal
ResponderEliminarEs el gadget de páginas, elimínalo, luego quita esto de tu plantilla:
Eliminar#wrapper-bg {
background: url("http://3.bp.blogspot.com/-82y4ZtdgLMY/TyrYaNnOFKI/AAAAAAAADBs/EckDZSwoXLk/s1600/wrapper1.png") repeat-x scroll 0 0 transparent;
}
pasa que en la ventana de diseño no me aparece, y en html no de donde borrarlo
EliminarAh qué plantillas esas... borra todo lo que empiece con body#layout así aparecerán todos los elementos en esa sección.
EliminarHola solo para agradeser esta modificacion, me encanto, lo puse en mi blog y se ve genial, gracias!! te invito http://utilidadez-gratis.blogspot.mx/
ResponderEliminarMe alegro que te haya gustado :)
EliminarHola Potro tanto tiempo jajaja tengo otro problema,quiero hacer un menu para mi blog, pero todos los que encontre usan todas las etiquetas para hacerlo, y yo necesitaria que use nada mas las etiquetas que eija, habra alguna forma de hacerlo??
ResponderEliminarPD: perdona que siempre pregunte aca, lo que pasa es que no se donde se ponen las dudas
Cuánto tiempo Maxi_96 ;)
EliminarCualquier menú, el que sea, puedes poner los enlaces que quieras, ya sean todas las etiquetas, o las que elijas, o incluso cualquier enlace que no sea una etiqueta, en realidad esa no es una regla ;)
quiero siga apareciendo y desapareciendo pero sin efecto deslizante por favor
ResponderEliminarCambia el 800 que está en el script por 0
EliminarCon eso no tendrá el deslizamiento.
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarHola El Potro, lo he intentando en mi blog y blog de pruebas pero ha sido imposible. Sale la flecha ya de inicio --o sea que no hay que bajar por el blog para que esta aparezca-- y después no funciona el subir para arriba. Supongo que es un problema de JQuery que ya está en el blog. No he añadido el script como indicas pero no funciona.
ResponderEliminarNecesitaría verlo puesto en tu blog Juan José, entré pero no lo veo ahí.
EliminarHola Potro, soy Emilio, Juanjo es mi compañero del blog. Te hago yo la misma pregunta. Mi blog, el de siempre ....mohicano.
EliminarHola Potro, te escribió mi compañero. La pregunta es la misma. Lo he intentando pero no funciona ni el botón, no sube hacia arriba ni tampoco tiene el efecto "aparición". Probé cambiando la última versión de Jquery pero...nada.
EliminarUn abrazo.
Hola Emilio, no veo colocado el botón, pero quizá es porque ya tienes una versión de jQuery, y al poner este botón estás agregando otra; sólo debe haber una versión.
EliminarHola El Potro, no añado ninguna, dejo la que está que es la versión 3 creo. De todas formas probé con la última, la que aparece en esta entrada y tampoco. Debe haber algo. Salía la flecha desde el principio y el enlace no funcionaba. Lo intenté en el blog de pruebas e igual.
EliminarTambién quería preguntarte una cosa que pudiera estar relacionada. He puesto los comentarios incustrados, cuando publico un comentario no vuelve a este se queda en el top del post. Se puede solucionar?
De hecho, lo sigo teniendo en el blog de pruebas Potro. Allí está.
EliminarPues sin verlo puesto será muy complicado saber si es jQuery u otra cosa.
EliminarRespecto a lo otro, ¿ya has probado en otro navegador?
Te lo puse en un mensaje posterior, el botón está en el blog de pruebas.
EliminarSobre el tema comentarios: lo he probado en Chrome, Explorer 8 y Firefox. Todos igual.
Tienes dos versiones de jQuery, no una, además que, si uno de los scripts tiene el hack de compatibilidad entonces los demás que tengas también debes aplicarle el mismo hack.
EliminarPues ahora mismo no lo se lo voy a revisar, supongo que el hack que comentas debe estar si no no funcionaría a lo que corresponda. En mi blog principal también hay dos versiones de Jquery?
EliminarEn el blog principal solo veo la 1.3 para el slider y ya probé con la 1.7 y tampoco funcionaba. Puede tener algo que ver con el tema de los comentarios?
EliminarNo creo, el problema debe estar con esas versiones de jQuery y lo del hack que te comentaba.
EliminarIntentaré lo que me comentas. Olvidando este tema ¿alguna solución para el tema de los comentarios?
EliminarEso podría ser por el navegador, ¿ya has probado en otros navegadores? Aunque, te diré que a mí en este blog algunas veces también se queda el scroll arriba aun después de hacer un comentario.
EliminarComo te dije los probé todo y quité el fb comments también por si acaso. Y nada. Comentas sea donde sea...y se queda arriba al comienzo del post.
Eliminar¿En cuál blog te sucede, en el de pruebas o el normal? ¿recuerdas a partir de cuándo sucede eso?
EliminarPues me sucede en el normal Potro. No lo recuerdo porque nunca he tenido comentarios incrustados en la entrada. Ha sido ponerlos e ir siempre así. En el pruebas están los anidados y allí no pasa. El fb comments no es, los scripts del jquery tampoco. El caso es que arriba marca la dirección de los comentarios pero no baja.
EliminarEs en el blog normal Potro. Me sucede desde que tengo los comentarios incrustrados en la entrada. Antes los tenía en ventana (hace una semana). Lo raro es que en la url aparece la dirección que va a los comentarios pero no baja.
EliminarEn el de pruebas tengo los anidados y allí no sucede. Va todo bien. He probado quitando el fb comments e incluso jquery pero nada...
Pues ni idea. Ese problema se daba al inicio en los comentarios anidados y creo sólo pasaba con Firefox y otro navegador. Pero luego, con la actualización del script ese problema se solventó.
EliminarPor esos tiempos, lo que ayudaba a resolverlo era esto:
http://vagabundia.blogspot.com/2012/01/los-comentarios-y-el-salto-al-final-de.html
El caso es que aquí no hay comentario ni anidados ni siquiera el código que los genera porque es una plantilla antigua modificada. El tema es que a la inversa de la explicación de vagabundia. Solo que es tras un comentario y siempre se queda en lo alto del post, al inicio. Pero bueno tampoco es algo muy grave, el mensaje está enviado. Gracias por tu tiempo Potro.
Eliminarme aparecen los codigos en la cima como lo arreglo
ResponderEliminarEl código debe ir antes de ]]></b:skin> no antes de <b:skin><![CDATA[/*
ResponderEliminarhola que tal otra vez yo, estaba viendo una plantilla (Versatile) y queria saber si tenes idea de como hacer el carrusel de arriva pero con las entradas destacadas (o si se puede que pase todas las entradas del blog)
ResponderEliminarNo conozco el carrusel, pero supongo que trabaja igual que todos (o la mayoría), que tú agregas manualmente las imágenes y enlaces que quieras.
EliminarMuchas gracias, fuiste de mucha ayuda. Sólo cambié la imagen de la flecha, si tenés ganas y tiempo fijate! Buen fin de semana!!!
ResponderEliminarMe alegra que te haya sido útil :)
EliminarHola Potro de nuevo, lo del jQuery ya lo deje por imposible. Respecto a esta flecha de subir... que habria que cambiar para que en vez de subir, que baje hasta el pie de pagina?.
ResponderEliminarMira este tutorial, ahí verás un método más completo que incluye la función de bajar:
Eliminarhttp://tympanus.net/codrops/2010/01/03/scrolling-to-the-top-and-bottom-with-jquery/
Gracias Potro, indagaremos haber si puedo con ello. Un abrazo.
EliminarVale, de cualquier manera veré si mañana tengo algo de tiempo y publico una entrada sobre ello.
EliminarNo he conseguido nada, así que que damos a la espera de la publicación.
EliminarNo te he hecho esperar mucho, ya está publicada la entrada ;)
EliminarLO gracioso es que justamente la linea que dice jQuery.noConflict(); es la que me causaba conflicto. La quité y funciona de maravillas.
ResponderEliminarSaludos Potro.
Gabriela.
Vaya, sí que es extraño. Qué gusto que hayas dado con el problema para resolverlo :)
EliminarSaludos!
Dónde está lo de ]]> ? :)
ResponderEliminarUsa las teclas CTRL + F para localizar ese o cualquier otro código.
EliminarExcelente script! Recién me meto de llego al mundo de los Blog (rontacuchi.blogspot.com) y cada vez aprendo sobre la versatilidad de la misma. Se agradece el aporte Potro.
ResponderEliminarGracias a ti por tu comentario y visita Ronald. Saludos.
EliminarMe encanta Potro! Muchas gracias por este Post, queda genial! Saludos
ResponderEliminarPor nada ;)
EliminarHola Potro.
ResponderEliminarTe escribo porque hoy me dí cuenta de que el botón de ir arriba ha dejado de funcionar. Aparece constantemente, es decir, no aparece al bajar sino que está desde el principio y tampoco cumple su función. No se que pudo pasar, ya he revisado y solo tengo una versión de JQuery. Ojalá pueda solucionarse.
De antemano muchas gracias.
Perdón Potro, se me olvidaba dejarte mi blog.
ResponderEliminarwww.arteentorno.com
Gracias!