Enlaces de navegación que aparecen al bajar la página y muestran el nombre de las entradas

26 de febrero de 2013 173 comentarios ,

Los enlaces de navegación son esos que aparecen al final de la página que dicen "Entradas antiguas", "Entradas recientes" y "Página principal" y nos sirven para desplazarnos por las entradas del blog. Lo que haremos con esta entrada son dos cosas:

  1. Cambiar los textos "Entradas antiguas" y "Entradas recientes" por los títulos de las entradas.
  2. Hacer que éstos datos aparezcan en un recuadro "desvaneciente" cuando se baje el scroll de la página.

Puedes verlo en funcionamiento en este blog de pruebas, al bajar el scroll aparecerán los enlaces de navegación mostrando los títulos de las entradas que anteceden y preceden al post.

Esta forma de mostrar los enlaces de navegación sólo se verá en las entradas individuales, ya que en la portada y demás partes del blog se seguirán mostrando como siempre.

La instalación es muy sencilla en realidad. Primero entra en Plantilla | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:
<b:include name='nextprev'/>
Y cámbiala por esto:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='blog-pager-note'>
<h4>También hemos publicado:</h4>
<b:include name='nextprev'/>
</div>
</b:if>
Ahora pega antes de </head> lo siguiente:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
// <![CDATA[
$(function() {
$('#blog-pager-note').toggle()
.css({
width: '520px',
height: '150px',
position: 'fixed',
padding: '1em',
bottom: 0,
right: 0,
background: 'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4TLaVfEuB4D0xZsrPY5yyHELRhHYKprkcYwYVuYfG9qs3PR6UZDIrYuZ_MTpvSaStBnlcUnh8iDDESF8A2hreGYftRYyCdXEyt2jp5NUdSgHi6N40uOo6nN3A9nptBEPd-UdSIFgi_jg/s10/negro85.png)'
});

$(window).scroll(function() {
if($(this).scrollTop() > 150) {
$('#blog-pager-note').fadeIn();
} else {
$('#blog-pager-note').fadeOut();
}
});
});
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$(".blog-pager-newer-link").html("<div>Entrada anterior:</div>" + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$(".blog-pager-older-link").html("<div>Entrada siguiente:</div>" + olderLinkTitle);
});
});
// ]]>
</script>

<style type='text/css'>
<!--
#blog-pager-newer-link {float:left;clear:both;line-height:30px;}
#blog-pager-older-link {float:left;clear:both;line-height:30px;}
.home-link {display:none;}
.blog-pager-older-link, .blog-pager-newer-link {
background-color: transparent !important;
background-image: none !important;
border:0 !important;
color:#0577AB !important; /* Color de los títulos de las entradas */
float: left;
width: 500px;
clear:both;
}
a.blog-pager-older-link:hover, a.blog-pager-newer-link:hover {
text-decoration:none !important;
}
a.blog-pager-newer-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNu7oJTOmLi1QwkEQIv1J1He10YIzpA9br5w8rVGQYmsJvDxK01tUNClF5M8DVvRvhcefOBPt0UvhuPPWcKGCvc9hRtnrRLhLdtuQr5wIuVAKQOIoLt_Ke3Xsw3BRbKEV6tvsCxOmBbqw/s32/flecha2.png);
float:left;
}
a.blog-pager-older-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhui0jFnQw0bpDhjWSRI-is4IXEMT60C8XrHeU55wo2L2otTICJ3HM-KcfNbMRICnJnTlsa_o8Ji7KtQSeohbXFyq6184OSE5uNTMRdm3y5vBSan_OjKOlfom9ktfWsDljcr24-y_FTUUc/s32/flecha1.png);
float:left;
}
#blog-pager {
width:500px;
background-color: transparent !important;
background-image: none !important;
border:0 !important;
text-align:left;
}
#blog-pager div {
color:#fff; /* Color de los textos "Entrada anterior" y "Entrada siguiente" */
font-weight:bold;
margin-bottom: -5px;
}
a#blog-pager div:hover {
text-decoration:none !important;
color:#fff; /* Color de los textos "Entrada anterior" y "Entrada siguiente" */
}
#blog-pager-note {
z-index:9;
}
#blog-pager-note h4 {
margin:0;
padding:0;
color:#4898B9; /* Color del título del recuadro */
font-size:16px; /* Tamaño del título del recuadro */
}
-->
</style>
</b:if>
Hay tres URLs en color azul, la primera es la imagen de fondo semitransparente del recuadro, las otras dos corresponden a los íconos de las flechas.
En color verde puedes ver dónde cambiar los colores de los textos.
El número en color rojo es la distancia en pixeles que activa el gadget, es decir, que como está ahora, el recuadro aparecerá cuando se haya bajado el scroll 150px. Puedes usar un valor más alto en caso de que tus entradas suelan ser largas y por lo tanto la "altura" del scroll sea mayor.

Cabe mencionar que este gadget usa jQuery, así que procura tener sólo una versión, y si usas Scriptaculous deberás aplicar un hack, de lo contrario podría no funcionar.

También puedes cambiar las palabras "Entrada anterior" y "Entrada siguiente" por alguna otra frase.


173 comentarios en:

" Enlaces de navegación que aparecen al bajar la página y muestran el nombre de las entradas "

  1. Muchísimas gracias Potro:Ya lo implementé y ha quedado estupendo

    ResponderEliminar
    Respuestas
    1. Poderoso Potro, mundial, aunque no lo voy a usar me sigue pareciendo excelente para futuros proyectos... Por ahora dejaré mi www.sintemario.com sin muchas cosas más, todo me lo has dado tu, por lo menos dejaré de abusar jejeje.

      Eliminar
  2. Muy interesante Potro, por el momento utilizo flechas (imágenes) en ese lugar, ya veré si me animo a hacerlo, gracias por todo lo que nos ayudas, saludos

    ResponderEliminar
  3. En el blog de pruebas no me aparece nada, Potro. ¿Estará bien la dirección?

    ResponderEliminar
    Respuestas
    1. No sé si sea porque tenía poco contenido la entrada y el scroll era poco, revisa de nuevo, ya le he puesto más contenido.
      Yo lo he verificado en Chrome, Firefox, Opera, Safari, e IE, todos en su última versión y en todos ellos funciona sin problemas.

      Eliminar
    2. Ahora sí funciona perfectamente. Yo estoy usando las últimas versiones de Chrome y Firefox.

      Eliminar
  4. Hola Potro, me ha venido genial tu entrada. Acabo de ponerlo en práctica y funciona perfectamente ;)

    ResponderEliminar
  5. Siempre interesantes las propuestas Potro :)
    Besos

    ResponderEliminar
  6. Muy bueno, pero, soy yo o no funciona en el blog de pruebas?

    ResponderEliminar
    Respuestas
    1. Tenía poco texto la entrada de prueba y por eso no alcanzabas a ver mucho scroll, pero ya le he agregado más :)

      Eliminar
  7. deberia aparecer no tan grande quedaria muy feo

    ResponderEliminar
  8. Hola Portro!!
    Visite tu blog de Pruebas para darme una idea, pero no vi nada .___.

    Te dejo saluditos y te obsequio una flor par el jardín de casa ^^

    http://i1164.photobucket.com/albums/q577/Alison-Aly/Herramientas/Emoticones/Minis%20Encantos/MINISENCANTOSGIFBYALISON636.gif

    ResponderEliminar
    Respuestas
    1. Qué linda Alison, yo te dejo otra :)
      http://goo.gl/1RA4d

      Eliminar
    2. Me encanto, ♥

      Gracias Potro, Saludiños!!!

      Eliminar
  9. Jo.. a mi no me vale.... :(

    Porqué sera??

    ResponderEliminar
  10. Lástima que no me cuadre con la estética de mi blog...
    Por lo demás, una forma muy elegante de mostrar las entradas.
    Gracias Potro.
    Un saludo, Tapestry.

    ResponderEliminar
    Respuestas
    1. El diseño es lo de menos, siempre es personalizable :)

      Eliminar
  11. Hola, quisiera saber si este tipo de enlaces de navegación sirve para las vistas dinámicas, lo digo por mi blog emprendernegociosmultinivel.blogspot.com el cual tiene una configuración con dicha presentación.
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Iván, no lo he probado ahí, pero usualmente nada que requiera tocar el HTML funciona en esas plantillas. Será cuestión de probar.

      Eliminar
  12. Muchas Gracias POTRO...por todas tus enseñanzas

    ResponderEliminar
  13. Vale ya si me sirve! :) pero hay otra duda, cómo podría reducir el tamaño de las letras? Es que se me salen de la ventana ya y no se pueden leer bien... :(

    Gracias :)

    ResponderEliminar
    Respuestas
    1. ¿El de los títulos de las entradas?
      Puedes poner el tamaño de la fuente debajo de .blog-pager-older-link, .blog-pager-newer-link {
      O puedes hacer más grande el recuado, esto último lo puedes hacer modificano todos los width del código, incluyendo el width: '520px',

      Eliminar
  14. Hola!
    Esta perfecto pero tengo un problema es que no aparecen los nombres de las entradas!!!

    que hago!!! ?

    ResponderEliminar
  15. Saludos Potro, que bueno tener un nuevo "truco" para probar, solo tengo una consulta, después que logre modificar el tamaño y mover los enlaces, ¿Como puedo lo puedo centrar?

    ResponderEliminar
    Respuestas
    1. Puedes cambiar el text-align:left; del código por text-align:center; pero los íconos no se centrarán.

      Eliminar
    2. Muchas gracias.

      Otra pregunta que no tiene que ver, en nuestro blog (TitularesAndroid.com) las publicaciones solo muestran la hora de publicación y no la fecha, tanto en los resúmenes de la pagina principal como en las entradas independientes ¿Como puede arreglarlo? Gracias de antemano.

      Eliminar
    3. Elimina el display:none; de esta parte:
      h2.date-header{margin:1.5em 0 .5em;display:none;}

      Eliminar
  16. hola buen dia o tarde mi amigo agrades mucho tu ayuda a todas las personas que como yo emos aprendido mucho con tu web de info blogger mira tengo una pregunta:
    Es que me gustaria poner un scrip de imagenes que cambien de pendiendo la hora y el dia de la semana no se si me puedas colaborar de ante mano mil gracias...
    espero tu mas pronta respuesta

    ResponderEliminar
    Respuestas
    1. Hola Walter, nunca he usado un script de esos, pero mira en esta página, al final hay un usuario que muestra un código que según lo hace:
      http://ayudawordpress.com/foro/topic/imagen-que-cambie-segun-la-hora-y-el-dia

      Eliminar
    2. mil gracias lo voy a intentar

      Eliminar
  17. ayuda alguien porfavor en mi blog http://vdfasdfwertwert.blogspot.mx/ es es otro para que vean el error no se que hice solo puse el facebook alos iconos y puse lo de arriba y asia abajo de los botones http://elcerebrodelfuturo.blogspot.mx/# esta es la pagina que uso y se descompuso asi rimo bueno el problema es que antes si funcional de donde dice popular tags y blog archive y ahora ya no se ponen como el de vdfasdfwet como le ago para que funcione

    ResponderEliminar
    Respuestas
    1. ¿Cuál es exactamente el problema? Yo lo veo todo igual.

      Eliminar
  18. Potro, gracias por este nuevo gadget, solamente que al instalarselo a mi página aparece estatico, te dejo la dirección de mi web para que me ayudes http://www.revistametalera.com/

    ResponderEliminar
    Respuestas
    1. Quita la versión de jQuery que tienes dentro del gadget del fanbox de Twitter. No debe haber dos, sólo una.

      Eliminar
  19. Hola potro mi problemas no tiene que ver con esto. Mira cuando publico una entrada en mi blog y le pongo insertar salto de linea, para que aparesca leer mas, no aparece leer mas, mi blog es este http://wwwpavasfamosas.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola, asegúrate que arriba de <div class='post-footer'> tengas este código, sino lo tienes agrégaselo:

      <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
      <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
      </b:if>

      Eliminar
  20. Hola, Potro. ¿Cómo puedo quitar los dos puntos que aparecen por defecto en los enlaces de los números de comentarios de cada entrada?

    ResponderEliminar
    Respuestas
    1. Hola, me parece que ya no se puede, antes el código de ese enlace tenía los dos puntos visibles y podías quitarlos o cambiarlos por otra cosa, ahora el código es más simplificado y esos datos están todos dentro de una sola etiqueta que ya no podemos manipular.

      Eliminar
    2. Vaya, qué pena. Por cierto, ¿podrías explicarme cómo eliminar las viñetas de las listas de la sidebar? No quiero que aparezcan los puntos y tampoco los quiero sustituir por una imagen.

      Eliminar
    3. Depende qué plantilla uses. Regularmente se quitan así:

      .sidebar ul {
      list-style: none;
      }

      Eliminar
    4. Gracias, ya los quité. Para finalizar, ¿serías tan amable de indicarme cómo puedo eliminar la imagen de círculos que aparece en la línea de artículos anteriores y artículos recientes? Además me gustaría encerrar esos enlaces entre una línea superior y otra inferior como los tienes tú aquí.

      Eliminar
    5. Para quitar esos puntos elimina el background que está dentro de #blog-pager
      Para poner esos bordes pon en lugar de ese background, esto:
      border-top:1px solid #ccc;
      border-bottom:1px solid #ccc;

      Eliminar
  21. Gracias potro, voy a probarlo en mi blog.

    ResponderEliminar
  22. No entiendo porque en mi blog me sale blanco en una parte del fondo mientras que en el tuyo te sale completamente negro.

    ResponderEliminar
    Respuestas
    1. Hola Luis, cambia esto:
      #blog-pager {width:500px; text-align:left;}

      Por esto:
      #blog-pager {
      width:500px;
      background-color: transparent !important;
      background-image: none !important;
      border:0 !important;
      text-align:left;
      }

      Eliminar
  23. ¡Hola Potro! Primero que nada Felicidades por el aniversario del blog y por tu iniciativa de regalarle dominios a tus seguidores. ¡Eso no lo hace todo el mundo, y máxime cuando eran 7 DOMINIOS!

    Ok, me encanta esta entrada, me gusta el truco. Pero, quisiera ver si se pudiese que en vez de como sale así como tú lo muestras, salga como en esta imagen con una imagen diminuta (si la hay en la entrada) y el link. Mira esta imagen: ( https://lh4.googleusercontent.com/-SWkhsxWXzF8/US6OVEeVs1I/AAAAAAAAhpw/HJTw4vVOX6U/s912/....................................................................................................................png ) Cuando bajas el scroll, sale de esa forma. ¿Crees que puedas enseñarnos como hacerlo?

    ResponderEliminar
    Respuestas
    1. Muchas gracias :)
      No estoy seguro que pueda hacerse con estos métodos ya que el INCLUDE que recoge estos datos sólo toma la URL de la entrada, no toma nada más, ni la imagen ni el resumen, pero veré si puedo encontrar otro modo de hacerlo ;)

      Eliminar
  24. Hola potro gracias por estar al servicio, me pregunto si hay alguna forma de alienar completamente el blog entero hacia la izquierda asi como http://www.oloblogger.com/ porque se puede ver que el blog hace mejor uso del espacio de la pantalla, ojala puedas ayudarme, Gracias

    ResponderEliminar
    Respuestas
    1. Claro David, sólo es cuestión de quitarle el "auto" al margen izquierdo y derecho del contenedor principal, pero para ello habría que ver en cuál blog quieres hacerlo.

      Eliminar
    2. Hola potro, gracias por contestar, estas son los datos del blog

      Blogger Template Style
      Name: Simple
      Designer: Josh Peterson
      URL: www.noaesthetic.com

      Como ves, es una planilla de las que usa blogger actualmente en su diseñador de plantillas, que se puede hace en ese caso? Gracias

      Eliminar
    3. Con esto se alinearía a la izquierda:

      .content-outer {
      margin: 0;
      }

      Eliminar
    4. Gracias potro, sos un bacano (y)

      Eliminar
  25. ola el potro te pido un favor quisiera que mejores el codigo de este fanbox de seguidores de blogger para que se agregen como gadget y no meterlo en la plantilla misma por que al parecer no funciona en la mia.
    pero estoy condiafo que metiendo el codigo como gadget si dara :
    http://loseasi.blogspot.com/2011/10/seguidores-blogger-twitter-y-facebook.html

    ResponderEliminar
  26. Hola, Potro. Tengo una duda: ¿cómo puedo hacer para que el texto del recuadro sea más pequeño? Logré achicar el cuadro pero no el tamaño de texto.
    Espero puedas ayudarme.
    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola LAS Scanlations, puedes poner el tamaño de la fuente debajo de:
      a.blog-pager-older-link:hover, a.blog-pager-newer-link:hover {

      Pero, también cambiará el texto de "Entrada siguiente" y "Entrada anterior" ya que comparten el mismo estilo.

      Eliminar
    2. No he podido cambiar el tamaño de la fuente :S...

      Eliminar
    3. Perdón, sería añadiendo esto:
      a.blog-pager-older-link, a.blog-pager-newer-link {
      font-size:12px;
      }

      Eliminar
    4. Última duda (espero): Logré cambiar el tamaño de la fuente, pero el espaciado entre líneas casi no se modifica. Eso hace que, cuando aparece "Entrada anterior" y "Entrada siguiente", no se vean completamente los títulos de la entrada que queda más abajo. ¿Por qué podría ser?
      Saludos y gracias.

      Eliminar
    5. Puedes reducir más la fuente, o hacer más alto el contenedor, eso lo puedes hacer modificando esta parte:
      height: '150px',

      Eliminar
  27. Hola Potro
    Sabes que cuando copio alguna información de word u otro blog se me copia el background. Para lo que tengo que ir a htmol (en una entrada nueva) y borrar uno por uno. Como puedo hacer para que me quede trasparente?

    ResponderEliminar
    Respuestas
    1. Pega el contenido estando en la pestaña HTML y no en Redactar.

      Eliminar
    2. Gracias Potro. Ya no se copia el background, pero me cambia el formato tanto de letra como del escrito. Alguna solución?

      Eliminar
    3. Ya que lo pegues en HTML entonces sí cambia a Redactar y le agregas el formato que desees.

      Eliminar
    4. Gracias Potro. Una cosa más. En la plantilla que ocupo cuando posteo algo muy extenso el formato de letra me cambia automaticamente, sabes como corregirlo?

      Eliminar
    5. No debería ocurrir eso, quizás has cambiado el tamaño sin darte cuenta, ya que de forma automática no sucede.

      Eliminar
  28. Gracias amigo Potro, lo estoy Usando y esta buenisimo, Eres mexicano?
    es que estoy pensando hacer un pequeño donativo jeje y yo soy mexicano y entonces por lo de Paypal....aun asi no estoy seguro todavia jjeje es que no termino de hacer unos pagos
    aqui dejo el nombre de mi blog.
    Pocos Megas HD esta buenisimo!

    ResponderEliminar
    Respuestas
    1. Sí Tony, mexicano hasta las chanclas :)

      Eliminar
    2. jaja, Ok...igual yo..Entonces mejor asi, Vere si a mediados del mes que viene te hago algun donativo aun que sea pequeño creo que vale jaja
      Saludos y Me alegro al saber que los mexicanos somos buenisimos en Lo que hacemos :p

      Eliminar
  29. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola Luis, lee de nuevo la entrada sobre la caja de comentarios de Facebook, en tu caso debes poner el código para quienes usan comentarios anidados.
      Cualquier duda sobre el tema déjala allá para no desviarnos del tema de esta entrada.
      Saludos.

      Eliminar
  30. Esta muy bueno, pero me gustaría que apareciera solo un momento, y luego desapareciera para no fastidiar a los navegantes y como le cambio el tamaño lo quiero mas pequeño gracias por tu aporte espero me puedas responder.

    ResponderEliminar
    Respuestas
    1. No tiene esa opción.
      Para cambiarle el tamaño modifica todos los width del código, incluyendo el width: '520px',

      Eliminar
  31. Hola Potro:

    Dos cositas, cómo puedo hacer para que el texto ¨Entrada anterior¨ junto con la flecha suban un poquito más arriba casi pegado al texto inicial que en el demo es ¨También hemos publicado:¨ es que lo encuentro muy separado.

    Y la otra consulta es, ¿cómo puedo hacer para cambiar ese fondo transparente negro por uno color grisáceo como en el blog? ¡Gracias mil de antemano!

    ResponderEliminar
    Respuestas
    1. Hola, lo del fondo se menciona en la entrada. Para subir esa área agrega un margin-top: -5px; debajo de #blog-pager {

      Eliminar
  32. Muy interesante, sabes como añadir un Gadget de los de blogger a una publicación o página normal?
    Como por ejemplo el Gadget de visitas, entradas populares, etc, ya que estos no brindan código HTML.

    ResponderEliminar
    Respuestas
    1. No se puede, esos gadgets que ofrece Blogger son exclusivos para su plataforma.

      Eliminar
  33. Buenos días Potro, estoy recibiendo el acoso desde hace dos meses de un anónimo, el cual me está mandando 20 y 40 correos todos los días, le he advertido que no siga porque de lo contrario lo pondre en conocimiento de la protección de datos aquí en España, a pesar de la advertencia sigue mandándome los correos, esta mañana me he encontrado en mi gmail con 17 correos, y los mismos en blogger, ya lo he puesto en conocimiento, de la protección de datos Española, pero como me temo que tardarán en contestar, me dirijo a ti por si me puedes ayudar de alguna forma, porque este individuo anónimo no hace caso, es más se esta divirtiendo y riendo de mi...Por favor si me puedes ayudar!...
    Este tipo de correo es el que me manda.

    Anónimo ha dejado un nuevo comentario en su entrada "En la carne de la Aurora, no hay venta ni pago":

    This could be in the style of a pendant, chocker or a str .. [url=http://www.pugsby.com]long prom dress[/url] vkhcfupl
    fuhkzpod [url=http://www.jmise.com]ladies evening dresses[/url] ktknhnxe [url=http://www.dressukoutlet.com]cache prom dresses[/url] ogzhpcgg [url=http://www.christianlouboutintosale.co.uk]christian louboutin[/url]

    Gracias Potro.

    ResponderEliminar
    Respuestas
    1. Hola Carmen. En la configuración del blog dentro de la sección "Entradas y comentarios" puedes habilitar la moderación de comentarios, de esta forma el comentario no será publicado si tú no lo apruebas antes. Esta es una buena medida que puede "cansar" a quien te moleste o haga SPAM ya que al no poder publicar comentarios sin tu permiso se cansará y dejará de hacerlo poco a poco.

      Eliminar
  34. Bendiciones Potro, eres un Potrazo, siempre nos sorprendes con tu creatividad, hace un buen tiempo venia buscando esto, genial.

    Feliz aniversario, puede ser que algun dia me gane uno de tus premios, siempre llego tarde, debe ser el horario con el mundo, la proxima me trasnochare, puede ser que gane algun dia. Como tu dices: "sigue intentando..." Lo seguire haciendo Potro.

    Bendiciones desde Guayaquil, Ecuador.

    ResponderEliminar
  35. Hola Potro, soy yo nuevamente, agregue el enlace de navegacion, pero me gustaria que quedara un poco menos ancho, es que me alcanza a cubrir los post, no hay alguna forma de acortarlo?

    Gracias de antemano

    Bendiciones

    MHermon

    ResponderEliminar
    Respuestas
    1. Gracias Gilberto. Para cambiarle el tamaño modifica todos los width del código, incluyendo el width: '520px', que está en el script.

      Eliminar
  36. Potro te queria preguntar como hago para que el titulo de la entrada ocupe el ancho del blog como en esta pagina http://www.riverplate.com/Noticias/futbol-profesional/Torneos-Locales/Torneo-Final-2013/16226-ramon-diaz-explico-por-que-mauro-diaz-puede-reemplazar-a-lanzini.html

    Mi pagina es esta: http://www.mundorojoweb.com.ar/2013/02/nadie-daba-nada-por-nosotros.html gracias me ayuda mucho tu blog...

    ResponderEliminar
    Respuestas
    1. Lo veo complicado Gonzalo porque el título está dentro del área de las entradas, las entradas están en un contenedor específico y ese contenedor tiene un ancho determinado, si haces más ancho ese contenedor crece todo, no sólo el título del post, también el contenido de la entrada. El otro sitio como no es un blog tiene posibilidades distintas a las de Blogger.

      Eliminar
  37. Buenas tardes Potro, te felicito por el gran aporte que das a toda una comunidad blogger, y por lo que me toca he aprendido mucho contigo, hay va mi duda.

    Se podria insertar un modulo de reservas para un restaurante?, que conste que intentado copiar algunos por hay y modificarlo y añadirlo como gadet pero algo tengo que hacer mal, se que para otro tipo de web se puede hacer pero en blog no lo se.

    No he visto la zona apropiada para postear esto , por si lo tienes que mover te lo agradezco.

    Muchas gracias

    ResponderEliminar
  38. Buenas tardes Potro, lo primero felicidades por el gran aporte que das a toda una comunidad blogger, y en este caso por mi parte he aprendido mucho contigo, hay va mi duda.

    Se podria incluir algun modulo de reservas para un restaurante?, he intentado copiar alguno que he visto por hay y modificarlo pero me es imposible, no se si para blog hay algo.

    He posteado porque n oveo la zona indicada, si lo tuvieras que mover, te lo agradezco.

    Muchas gracias

    ResponderEliminar
  39. Buenas tardes Potro, te felicito por el gran aporte que ofreces a la comunidad blogger, y en este caso por mi parte he aprendido mucho contigo, hay va mi duda.

    Se podria incluir un modulo de reservas para restaurante en el blog? he intentado copiar alguno de otros sitios y modificarlo, pero algo hago mal.

    No encontrado la zona especfica para postear, si tuvieras que moverlo te lo agradezco.

    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Javier, no conozco algún servicio que permita hacerlo, con puro código HTML y CSS no se podrá en Blogger, necesitas mucho más que eso como PHP, bases de datos, etc. elementos que no tenemos en Blogger.

      Eliminar
  40. Hola Potranco! jjej
    Te deje una consulta en tu pagina de google plus...
    No se si la viste, tampoco quiero molestarte, es una consulta ..
    Salute!

    ResponderEliminar
    Respuestas
    1. ¿En la página? No la veo :(
      Si es en el perfil ahí de plano no reviso, tiene que ser en la página, o más seguro por aquí :)

      Eliminar
  41. hola de nuevo siento molestarte otra vez, pero es que ya me ha dado otro fallo, aunque ya se me soluciono lo de los comentarios, ahora pasa que cada vez que se me suscribe alguien no aparece, cambia el numero de seguidores y no salen, se que son publicos, pero no se porque, ademas me he desuscrito de mi blog, y sigue apareciendo mi foto, y cuando le doy a suscribir me sale guardar no seguir este sitio, ya no se que pasa, de nuevo te pido ayuda, muchisimas gracias

    ResponderEliminar
  42. hola de nuevo el problema de antes ya esta arreglado, ahora lo que pasa es que cuando sigo un blog no aparece mi foto y lo sigo de manera publica, por que es? ahora mismo te sigo a ti y no sale mi foto, muchisimas gracias

    ResponderEliminar
    Respuestas
    1. Es posible que tú veas tu avatar pero los demás no, deberías tratar ver esos blogs no estando conectada con tu cuenta para ver si de verdad apareces o no.

      Eliminar
  43. Hola Potro de felicito por tu blog, porque ayudas a mucha gente de la comunidad blogeer, en mi caso me has ayudado mucho con tus tutoriales, hay va mi duda.

    Se puede incluir un modulo de reserva para restaurante en el blog? he intentado incluir alguno que he visto por hay de otros sitios , modificando cosas claro, pero me es imposible,¿ o es que en blog no se puede hacer ?

    Si tuvieras que mover el comentario , te lo agradezco , no se donde ponerlo.

    Muchas gracias

    ResponderEliminar
  44. Buen día! Taaaaaanto tiempo :)
    Hoy vengo con una pregunta relacionada con las entradas.
    Sucede que cambié la tipodrafía de mi blog, por lo tanto tanbién debido al tamaño de la tipografía tuve que modificar esos valores en el blog para que se viera bien la letra al leer, el tema con esto es que ahora los valores predeterminados para los tamaños de letras en las entradas no sirven de mucho.
    Es decir cuando vas a escribir las entradas tenés unr ecuadro que dice La máspequeña, pequeña, normal, Grande y Extra grande. El caso es que la Extra grande no se ve como una EXTRA grande, lo hace más bien como una grande.
    Lo que quería saber era si hay de algún lugar en la plantilla que los valores que corresponden a ellos y se pueda modificar. :)
    Y abusqué como "px" y "%" pero no identifiqué nada. Hasta lo busqué con la plantilla expandida por si estaba en algo que no se ve a simple vista.
    Si podés darme una ayuda genial, y sinop, bueno, jajajaja, no se podrá =P
    Besitos y buen finde!

    ResponderEliminar
    Respuestas
    1. No Magalí, el texto extra grande es de ese tamaño, puede suceder que la fuente no la haga parecer extragrande, pero lo es. Ahí lo que tienes que hacer es poner de forma manual una medida en pixeles para el texto que desees, así se verá del tamaño que quieras.
      Saludos!

      Eliminar
  45. Vaya se me han posteado los 3 comentarios, vale potro muchas gracias, haber de que manera busco la solucion, me imagino que en worpress tampoco se podra, y digo yo?, se podria hacer mediante iframe, o no se lo que estoy diciendo.

    Gracias.

    ResponderEliminar
    Respuestas
    1. En WordPress es casi seguro que sí porque ahí sí tienes acceso al hosting y puedes crear bases de datos, quizás hasta haya algún plugin que esté listo para instalar y usar, será cuestión de buscar.

      Eliminar
  46. Hola Potro, Felicitaciones Por Tu Blog me ha sido de mucha mucha ayuda.
    quiero que me ayudes, estoy empezando un blog de letras de canciones, y pues queria saber como hacer para que cada entrada tenga su video correspondiente en un lado de la sidebar, y asi cada entrada (Letras de canciones) tenga el video del tema que le corresponda.

    Muchas gracias Potro de Antemano...! Bendiciones, Saludos desde Peru...!

    ResponderEliminar
  47. Buenas Potro, tengo una duda, en esta pagina:

    http://dimensioninteractiva.blogspot.com/

    Unos amigos y yo estamos haciendo como historias y series y todo eso, pero al entrar a las categorías donde dice: Series: Alone etc etc, al entrar allí se ven como las entradas invertidas, lo que quiero hacer es, en vez de que aparezca desde mas reciente hasta la mas antigua que aparezca al revés, entiendes?. Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Pedro, las entradas siempre se acomodan de forma cronológica, de la más reciente a la más antigua. Esta configuración no se puede modificar, pero tomando en cuenta que las ordena de forma cronológica lo que puedes hacer es cambiar la fecha de las entradas para que se acomoden como desees, claro que esto representará más trabajo.

      Saludos.

      Eliminar
  48. Hola, Potro:
    Tengo una consulta. Probé el "Salto de Línea." pero no me funciona.Además necesito instalarlo ya, urgente, por que el blog no se "desliza" si no que "salta" de a poco al pasar el scroll. Puede que esté sobrecargado por que tengo muchas imágenes y muchos videos. Pero, como te dije anteriormente recién voy por el 5% del blog. Falta mucho todavía. ¿A qué se debe? Por las dudas la dirección de mi blog es: http://simimemorianofalla.blogspot.com.ar/
    ¡Gracias...un abrazo!

    ResponderEliminar
    Respuestas
    1. Hola Oscar, yo sí veo funcionando el "Leer más" de Blogger, no encuentro ningún problema en tu blog.

      Eliminar
  49. y no se puede tener los enlaces normales y esto a la vez es que me interesaria tenerlo

    ResponderEliminar
  50. Genial!! Como todo lo que he descubierto en tu sitio y que me está sirviendo de mucha ayuda.
    Tienes un nuevo y agradecido seguidor.

    ResponderEliminar
  51. Hola Potro, tengo una consulta por un problemita muy molesto.
    Resulta que en imagenes de mis blogs aparecen banners de adsinimages, una empresa que se dedica a poner publicidades a tus imagenes... pero si tu eres miembro y yo no lo soy, asi que no se que sucede.
    Pase el antivirus, elimine las extensiones que pueda tener mi navegador y acabo de pasar un antimalware. Tienes alguna idea? O es algo que Google te mete esa publicidad por su cuenta? (no creo porque ellos ya tienen adsense)
    Un abrazo y que tengas buena semana, que recien arranca!!!

    ResponderEliminar
    Respuestas
    1. Hola F!X, ¿has probado con otro navegador para ver si sucede lo mismo? ¿has probado eliminar algún gadget que hayas añadido recientemente?

      Eliminar
  52. Potro Una pregunta. Porque no estaran apareciendo mis nuevos post que esto publicando desde hace 2 semanas. cada vez que publico algo no aparece en google.

    Me doy cuenta porque por ejemplo si tu publicas una entrada llamada "trucos enlaces de navegacion" y quieres buscarla para saber si apareció en google se debe hacer de la siguiente forma "trucos enlaces de navegacion ciudadblogger" logico te va aparecer la entrada que publicaste en google. En mi caso no aparecen, ¿Que debo hacer?

    ResponderEliminar
    Respuestas
    1. Esperar. La indexación no es igual para todos, en algunos casos tarda más, todo depende de los robots de Google.

      Eliminar
  53. Hola Potro, intentando utilizar esta utilidad de paginación en mi blog (blogger), me he dado cuenta que no tengo opción de meterla, bueno, ésta y ninguna, he probado con otras que historicamente has recomendado y no muestra la botonera de páginas abajo del todo.

    ¿Qué puede estar pasando en mi footer? ¿qué parte no tiene mi plantilla que todo esto le es transparente?. Gracias de antemano.

    Mi página es <a href="http://www.mercadocalabajio.com>ésta</a>

    Un saludo.

    ResponderEliminar
  54. A mi no me aparece esto cuando lo busco en mi blog, porque?

    ResponderEliminar
    Respuestas
    1. No lo sé, sin mayores detalles me es imposible entender el problema.

      Eliminar
  55. Potro, ya lo he solucionado. Tenía el widget inferior a hidden. Un saludo!

    ResponderEliminar
  56. Hola Potro, tengo un problema y MUY SERIO, y quisiera saber si me podrias ayudar. Cambie de plantilla mi blog, por una de MasTemplates, pero en las vistas dinamicas, no aparecen las imagenes en miniatura, pero al abrir el post, esta la foto. Como hago para que se vean?

    Ahh, solamente se ven las que subo desde la pc, y las de internet no salen en miniatura. Miralo y Gracias.

    BLOG: http://estopasoenlatv2013.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Hola Lautaro, muchos sistemas de sumarios están pensados para que las imágenes sean subidas desde el blog (como debe ser) por eso si usas una imagen externa no te funciona como debería.

      Eliminar
  57. Perdon por molestar de nuevo, pero no me funcionan igual. Las guardo en mi PC, las pongo en los albunes de Picasa y las subo desde ahi, y nada...
    Tenias razon vos, porque se ven las que subo de la compu, pero borro las demas y las subo desde esos lados y nada...

    ResponderEliminar
    Respuestas
    1. Sólo se me ocurre que revises el HTML de las entradas que no se ven con las que sí se ven, para que identifiques qué tienen de distinto, tal vez así encuentres la respuesta.

      Eliminar
  58. Yo no se como ponerlo :(
    Pero gracias, eres grandioso!

    ResponderEliminar
    Respuestas
    1. Sólo hay que seguir las indicaciones de la entrada :)

      Eliminar
  59. Buenas potro, me encanta este aporte, porque servirá para mantener a los lectores más tiempo en el sitio, pero he detectado un pequeño problema. la barra donde aparecen los enlaces se esconden detrás de los vídeos de Youtube embedidos. ¿Hay alguna forma de solucionar esto?

    ResponderEliminar
    Respuestas
    1. Hola, quizás te sirva esto:
      http://ciudadblogger.com/2011/03/cuando-los-videos-se-sobreponen.html

      Eliminar
  60. Hola Potro, encantado de saludarte y te doy las gracias por todo lo que nos aportas. He puesto el enlace de navegacion pero de los dos enlaces, el enlace de entrada anterior y enlace siguiente se queda escondido el que queda abajo, he agrandado la caja un poco de 150 a 180 pero sigo sin ver el de abajo por completo. No se si me he explicao bien. http://tuzsaccooseccionsindical.blogspot.com.es/

    Gracias desde España amigo

    ResponderEliminar
    Respuestas
    1. Hola, no he comprendido ya que entro y lo veo bien :/

      Eliminar
  61. Perdona Potro, al final pude solucionar el problema agrandando la caja, pero, la cuestion es q queda algo grande. Que he de cambiar para reducir el tamaño de la letra. He visto una respuesta tuya anterior pero no acabo de entenderla. Si no es mucha molestia podrias explicar que cambio para que sea un 12px.
    muchas gracias
    Javier

    ResponderEliminar
  62. Perdona Potro, al final di con la solucion, aunque me queda algo grande. Me gustaria cambiar el tamaño de la letra como el ejemplo que tu has puesto, pero no acabo de entender bien como se hace. Que tengo que modificar.
    Un saludo.
    Javier

    ResponderEliminar
    Respuestas
    1. Hola, sólo tienes que añadir el código del comentario #28.3 junto con los demás estilos, por ejemplo antes de #blog-pager-note h4 {

      Eliminar
  63. Hola Potro, unicamente darte la gracias por este gran servicio que nos das a los que te seguimos. Ya esta solucionado.

    Un abrazo.
    Javier

    ResponderEliminar
  64. De nuevo otra vez yo, me acabo de dar cuenta que en Chrome va estupendo, pero al abrir la pagina con el Explorer se transparenta todo lo que hay en la sidebar y no se lee bien el texto de las entradas, no se si pasa con mas navegadores. Tiene alguna solucion?

    Un saludo
    Javier

    ResponderEliminar
    Respuestas
    1. No sé decirte, no tengo un equipo con Windows para ver tu blog con ese navegador, pero a lo que respecta al blog de pruebas ese sí pude verlo con IE un día antes de ser publicada la entrada.
      Saludos.

      Eliminar
  65. Hola!! Tenia puesto con el anterior editor de html de blogger este widget, pero ahora al cambiar de plantilla e intentar insertarlo, pues me salia el recuadro pero me daba error al poner el post anterior y posterior.
    Si tenéis la amabilidad de renovar el post para poder tenerlo estaría muy agradecido.

    ResponderEliminar
    Respuestas
    1. Hola Pablo Juan, no hay nada que renovar, los pasos siguen siendo los mismos para esta y todas las entradas publicadas.
      Saludos.

      Eliminar
  66. a mi no me sirvio :/

    Le cambie la versión de Jquery,apliqué un hack y ninguno dio resultado.

    este es mi blog
    www.antiandroll.blogspot.com

    Espero su ayuda hombre

    Las mejores

    ResponderEliminar
    Respuestas
    1. No está bien aplicado el hack, además que sigues teniendo 2 versiones de jQuery y debes quedarte sólo con una.

      Saludos.

      Eliminar
  67. pues alludeme aconprende ekees sus crivise a anton

    ResponderEliminar
    Respuestas
    1. Hola maria, no he comprendido la pregunta, ¿cómo puedo ayudarte?

      Eliminar
  68. hey muchas gracias por tus codigos estan mui bueno todos, este me parecio mui bueno pero ami m esta pasando lo siguiente. en las entradas aparece pero no completo osea k no me aparece los titulos de los link solo me aparece entradas mas antiguas y entradas mas reciente, por favor me interesaria k me ayudaran a resolverlo muchas gracias. mi web http://www.inpiratech.com/

    ResponderEliminar
  69. man una ayuda porfavor...

    ami no me aprece el titutlo de las entradas debajo de los textos siguiente entrada y entrada anterior

    alparecer el newerLinkTitle y olderLinkTitle no estan funcionando podrias ayudarme con alguna solucion ? porfavor gracias exelebte blog (Y)

    ResponderEliminar
    Respuestas
    1. ¿Has verificado que no tengas otra versión de jQuery y/o que no uses Scriptaculous?

      Eliminar
    2. Si ese no fuera el problema deshaz los cambios y repite los pasos de nuevo, quizá hay una parte que te estás saltando o un código está faltando.

      Eliminar
  70. Gracias Potro, voy a probarlo en mi otro blog!!!
    :D

    ResponderEliminar
  71. Eso andaba buscando pero no me funciono, mi blog es Este de Noticias pero no se que pasaria que no me funciono. Saludos desde Nicaragua

    ResponderEliminar
    Respuestas
    1. No veo puestos los códigos en tu blog, pero igual sólo hay que seguir los pasos al pie de la letra. Recuerda que si ya usas jQuery no hace falta repetir el script (al final de la entrada se habla sobre ello).
      ¡Saludos hasta allá!

      Eliminar
  72. Buenas soy nuevo en este tema, baje una plantilla de blogger template, pero cuando entro al diseño para intentar cambiar la url de los botones de twitter, facebook, google, rss y otros que trajo la plantilla, ni los veo en el diseño y cuando lo activo solo me lleva a https://www.twitter.com/YOUR USERNAME.
    podrian ayudarme en esto por favor mi correo es jcs.judaca@gmail.com gracias

    ResponderEliminar
    Respuestas
    1. Hola JC Suarez, no sé cuál plantilla uses pero, sólo entra en la Edición de HTML, da click en cualquier parte dentro de los códigos, luego presiona las teclas CTRL + F y busca el texto YOUR USERNAME así podrás localizar esa área.

      Eliminar
  73. Gracias por el post :) pero fijate que he seguido todos tus pasos, pero resulta que solo me muestra "Entrada siguiente" y "Entrada anterior" pero no me muestra el nombre de la entrada. A que se debe eso? Saludos

    ResponderEliminar
    Respuestas
    1. Hola Edwin, asegúrate de haber seguido todos los pasos, también que la primera línea que hay que cambiar no la tengas dos veces, y de igual forma asegúrate que no tengas jQuery en tu blog, si es así deberás quitar la versión repetida (al final del post se hace una mención sobre ello).

      Eliminar
  74. Hola Potro, me encanta tu página y es realmente útil para los que somos blogueros desde hace poco tiempo. Tengo un problema que no se si podrías ayudarme a resolver. Te explico. Tengo un blogg von vista dinámica Magazine. Recientemente le añadí una foto en la cabecera y, al hcerlo, me ha desaparecido la barra de navegación de las páginas. No se si sabrás decirme algún código CSSO o algo para que reaparezcan. Estoy un poco desesperado ya. Gracias. Te dejo la dirección de mi blog para que veas a qué me refiero. http://micruzbiological.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola Miguel, mira el comentario #27 de esta entrada: http://ciudadblogger.com/2011/09/personalizar-la-cabecera-en-las-vistas.html

      Eliminar
    2. Gracias Potro. Lo hice y ¡¡apareció!!, pero no logro que aparezcan en ella los nombres de las páginas asignadas... mi blog, para que veas lo que te digo, es micruzbiological.blogspot.com.es

      Eliminar
    3. Hola, ¿has añadido más estilos para esa área? ¿cuáles?
      Ahora mismo veo que aquí tienes una llave que no es la que debería estar:

      #content {
      border-image:none !important;
      border:2px solid #E6E6E6; /*El color del borde*/
      -moz-box-shadow:0 0 6px #E6E6E6; /*Las sombras*/
      -webkit-box-shadow:0 0 5px #E6E6E6;
      box-shadow:0 0 5px #E6E6E6;
      {

      Esa del final debes cambiarla por }

      Eliminar
    4. ¡Hola Potro! Perdona por no contestarte antes,pero inexplicablemente me ha llegado hoy que tenía un comentario tuyo por aquí... Veo que no paras de ayudar y ofrecer cosas chulas al personal, ¡eres un crack!. Por mi parte hice el cambio que me proponías, pero nada, siguen sin aparecer los nombres de las páginas... Es en la vista Magazine, y ya no se qué hacer, ¡la verdad! ¿Se te ocurre algo? Mil gracias

      Eliminar
    5. Hola Miguel, elimina todos los estilos que hayas añadido para personalizar los enlaces de tu menú, eliminando esos estilos deberían aparecer nuevamente los nombres.

      Eliminar
  75. Potro como hago si quiero que el espacio ocupado sea menor osea no tan alargado sino un cuadro pequeño nomas??

    ResponderEliminar
    Respuestas
    1. Cambia todos los width: 500px; por un valor más pequeño.

      Eliminar
  76. mera mierda , pasa algo ya configurado , pasa el codigo que quede como el del la web demo , asi , gracias

    ResponderEliminar
  77. Hola potro!!! muy buena la web, necesito eso mismo pero para que la imagen que esta fija en la barra lateral aparezca al bajar y quede fija en ese mismo lugar. Me podras ayudar? mi blog es http://bocademividacabj1905.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Hola, en otra entrada te he dado un enlace que te podrá servir. Saludos.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

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

 
Ir Arriba Ir Abajo
I Ciudad Blogger