viernes, 9 de julio de 2010

Mis Consejos de Blogger: Paginación con botones

Hola. Hoy estreno una sección de este blog dedicado a compartir con el resto de la blogsfera mis grándes descubrimientos sobre personalización y construcción de vuestro blog.

Voy a empezar con una modificación que me costó sangre conseguirla, ya que casi me atreveria a decir, no hay precedentes . Se trata de una navegación primera-anterior-siguiente-última que muchos webcomiqueros me agradecerán. Lo podeis ver en acción en mi webcomic http://boredgirlwebcomic.blogspot.com y, con suerte, en este mismo blog.

Con esto pasareis del aburrido y confuso paginador tradicional:

A uno más vistoso, lógico y amigable^-^:

Empieza la cosa:
Primero, iros a vuestro BLOG y pinchad sobre la opción "Diseño" de la barrita superior:

Después iros a la pestaña "Edición HTML" para ver el código de la plantilla:

ahora, (¡¡MUY IMPORTANTE!! ya que si no no encontrareis lo necesario para el siguiente paso) pulsad sobre el "check" de "Expandir plantillas de artilugios" para verlo TODO:

Una vez hecho esto, buscais el siguiente código:


#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}


Y lo substituis por ESTE:



#blog-pager-first-link {
float: left;
}

#blog-pager-older-link {
float: left;
}


#blog-pager-last-link {
float: right;
}

#blog-pager-newer-link {
float: right;
}



(Consejo: para facilitar la edición y evitar pifias suelo copiar TODO el codigo en un editor de texto por partida doble. uno para modificar comodamente y otro para tenerlo como seguridad.)

Como podreis observar, lo único que hize fue añadir las linesas de "#blog-pager-older-link" y "#blog-pager-newer-link" y borré el de "#blog-pager". El orden de estas lineas es irrelevante. creedme. lo he probado de 1000 formas y nada ha cambiado.

Luego buscais el siguiente trozo de código:



<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</div>
<div class='clear'/>
</b:includable>



y lo substituis por este codigo:


<b:includable id='nextprev'>
<div id='blog-pager'>

<b:if cond='data:olderPageUrl'>
<a href='[Link al primer post]' id='blog-pager-first-link' title='Primera tira'>
<img src='[imagen de primero-on]'/></a>
<b:else/>
<a id='blog-pager-first-link'>
<img src='[imagen de primer-off]'/></a>
</b:if>

<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' id='blog-pager-older-link' title='Anterior tira'>
<img src='[imagen de anterior-on]'/></a>
<b:else/>
<a id='blog-pager-first-link'>
<img src='[imagen de anterior-off]'/></a>
</b:if>



<b:if cond='data:newerPageUrl'>
<a expr:href='data:blog.homepageUrl' id='blog-pager-last-link' title='Última tira'>
<img src='[imagen de último-on]'/></a>
<b:else/>
<a id='blog-pager-last-link'>
<img src='[imagen de último-off]'/></a>
</b:if>
<!-- archivos -->
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' id='blog-pager-newer-link' title='Siguiente tira'>
<img src='[imagen de siguiente-on]'/></a>
<b:else/>
<a id='blog-pager-newer-link'>
<img src='[imagen de siguiente-off]'/></a>
</b:if>

</div>

<div class='clear'/>
</b:includable>



(Fijaos en las partes entre []. subtituirlo por los links correspondientes)

Decir que esta parte del código lo podeis poner donde os apetezca e incluso duplicarlo, tal como lo hice en Bored Girl.

yo voy a utlizar estas imagenes. ¡cojedlas si quereis! son Creative commons^-^

24 comentarios:

  1. hola como estas? me podrias ayudar? no me sale el primero codigo a susitituir solo el segundo, sustituyo el segundo codigo y me salen cruzados los botones este es una copia para que descarges de mi plantillas mi platilla: https://sites.google.com/site/nejoyelprofesorfri/nejo-y-el-profe/template-6617232120325514590.xml?attredirects=0&d=1

    ayudame mi blog es nuclearcomic.com

    ResponderEliminar
  2. si no te sale la primera parte, incluyela sin mas entre las etiquetas de "[style]"..."[/stile]" (las [" "]"son de esas cosas que parecen V tumbadas. No me deja poner codigos ._.U)
    y los segundos te salen cruzados... porque no está el primer codigo XD.

    aquí tienes la plantilla ya corregida, si no quieres calentarte mucho la azotea:
    http://www.2shared.com/document/ynaqIUKO/_prueba_template-6617232120325.html

    ¡Venga!. a ver si te sirve de algo y perdon por la tardanza

    ResponderEliminar
  3. NO FUE TARDANZA JEJEJE Y GRACIAS POR TU AYUDA... TE DARAS CUENTA QUE ESTOY HACIENDO UN "WEBCOMIC" JEJEJE DESDE YA ME HAGO SEGUIDOR DE TU COMIC "BG"

    ResponderEliminar
  4. HOLA LEI TU COMENTARIO JEJEJE GRACIAS, ME FUISTE DE MUCHA AYUDA... COMO AUN ES DE PRUEBA, AUN NO DECIDO DONDE DEJAR LOS BOTONCITOS TUYOS TALVEZ ARRIBA DONDE ESTA LA FECHA Y ABAJO COMO LOS TUYOS... AHORA ESO DE LOS CUADRITOS ROJOS QUE APARECEN PUES LA TRAI LA PLANTILLA Y APARECEN CUANDO DENTRO DEL POST HAY UN LINK.. BUSCARE LA FORMA DE DESABILITARLOS
    TE HAS GANADO A UN LECTOR MAS DE TU WEBCOMIC "BG"

    ResponderEliminar
  5. gracias XD
    y NO GRITES. QUE ES DE MUY MALA EDUCACIÓN XDDDD

    ResponderEliminar
  6. Hola, oye muy buen cambio, luce mas genial, pero ¿que pasa con las plantillas del diseador de blogger?, intente agregarlo a uno de mis blogs y no me aparece el codigo de la misma manera, ¿solo funciona con la plantilla antigua?

    ResponderEliminar
  7. muffin: Pues, no tengo nidea. suelo rehuir el diseñador del Blogger. Es posible que el diseñador formatee de una forma diferente el código. Busca que seguro que encuentras los huecos donde colocar el código X3 (tienen que estar ahí)^-^ Suerte.

    ResponderEliminar
  8. Señor, me ha hecho usted un hijo. Pero tranquilo, su responsabilidad sólo será aceptar mi agradecimiento. Un saludo!!

    ResponderEliminar
    Respuestas
    1. o.Ou ¿de nada?

      Le he echado un vistazo a tu "hijo" (bueno. a tus hijos) y se ven muy guapos, sanos y gordotes. Seguiré sus desarrollos con atención :D

      Eliminar
  9. Llevo más de un mes intentando poner esto en mi blog, pero no encuentro ninguno de lo códigos que indican (si puse eso de expandir artilugios) creo que solo me queda seguir poniendo los enlaces en cada entrada "manualmente"
    supongo que es por que mi blog es xml.

    ResponderEliminar
    Respuestas
    1. mmh... ¿cual es tu blog? Me gustaria ver tu plantilla, a ver como se podria arreglar :P

      Eliminar
    2. Pude hacer la segunda parte pero la primera definitivamente no hubo como, esos códigos no están, como resultado los botones me han quedado en desorden.
      Estos son los blogs:
      http://oneshotcomic.blogspot.com
      http://soldadoartemisa.blogspot.com

      Eliminar
    3. ¿no tienes una etiqueta de "style" o "b:skin"? Debe estar en la sección "head". Antes de "body" Lo colocas ahí dentro (entre "style" o "b:skin" y "/style" o "/b:skin" y deberia funcionar :3

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
    5. Aparece < b:skin><![CDATA[/* poco después de head.
      ¿Cómo lo coloco el código?
      Perdona las molestias

      Eliminar
    6. pues ... a continuación de eso, si quieres. Con tal que esté entre el "" El orden dentro de esa sección es irelevante. la posición de los botones los da el código "float:"."left" para la izquierda o "right" para la derecha :3

      suerte.xD

      Eliminar
    7. entre "< b:skin> < ![ CDATA [ /* " y " ]] > < /b:skin >" (le he puesto espacios, porque me los interpreta :P)

      Eliminar
    8. En la vista previa me sale algo como declaración no válida y un montón de texto.

      Eliminar
    9. Xtraño... ¬.¬U

      Si pudieses enviarme la plantilla para que la pudiese revisar y eso... porque te he dicho lo máximo que te podia decir para ayudarte sin ver el código en si. xP

      Eliminar
    10. Te enviado la plantilla a al mail que asoma en tu perfil.
      Disculpa por molestar tanto.

      Eliminar
    11. recibido, estudiado, corregido y enviado :D

      Eliminar
  10. Hay forma de colocarla en la parte superior y que igual quede por debajo?

    ResponderEliminar
    Respuestas
    1. ¿te refieres a como tengo en mi webcomic BORED GIRL XD http://boredgirlwebcomic.blogspot.com.es?

      ¡Por supuesto! basta con colocar la segunda parte del código justo despues del código de "b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'"

      De hecho, puedes cologarla donde te de la gana. Experimenta. XD

      Eliminar
  11. Muchas gracias! me costo un poco con el nuevo diseño de blogger, pero al parecer funciona bien, muchas gracias por este codigo :D

    ResponderEliminar