Colocar páginas numeradas.

7 de enero de 2014

Un bonito efecto que sirve para las plantillas blogger. Para colocarlo en tu blog debes seguir dos pasos muy sencillos~

1. Primero ve a Plantilla / Editar HTLM busca con Ctrl + F </body> y coloca encima, el siguiente script:
<script style='text/javascript'> var pageCount=5;var displayPageNum=5;var upPageWord=&quot;Anterior&quot;;var downPageWord=&quot;Próxima&quot;;</script> <script src='http://static.tumblr.com/y66747w/DqWm7hhf3/page-nav.js' style='text/javascript'> </script>

2. Luego arriba de ]]></b:skin> coloca lo siguiente:
.showpageArea {
   font-family:tahoma; /* fuente */
   font-size: 8pt;
   color: #fff; /* color de texto */
   margin:10px;
 }
.showpageArea a {
   padding: 3px 8px;
   margin: 2px;
   text-decoration: none;
   color:#fff;  /* color de texto */
   border:1px solid #000; /* borde de próxima pagina */
   background: #FF7F51; /* color de fondo de próxima pagina */
}
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  color: #666; /* color de texto */
  border:1px solid #000; /* Borde de la numeración */
  background: #A0D0A0; /* color de fondo de la numeración */
}
.showpageNum a:hover {
   color: #fff; /* color de texto */
   border:1px solid #000; /* borde la numeración cuando el cursor esta encima de ella */
   background: #FF7F51; /* color de fondo la numeración  */
}

.showpageOf{
   margin:0 8px 0 0;
}
.showpagePoint {
   text-decoration: none;
   padding: 3px 8px;
   margin: 2px;
   font-weight: 400;
   background: #FF7F51; /* color de fondo de la numeracion activa */
   color:#fff; /* color de texto */

Solo faltaría personalizarlo a su gusto~ eso es todo, espero les sirva el tuto!
A veces tarda un poco en aparecer cuando lo colocas, es por el script que usa, si le das tiempo aparecerá ♥

9 comentarios:

  1. Gracias por el excelente tuto :3
    Saludos!

    ResponderEliminar
  2. Genial gracias !! Y muy bonito diseño ^^

    ResponderEliminar
  3. Me encanta tu nueva plantilla. ^^ Muy buen tuto!!!

    ResponderEliminar
  4. Neniis! que geniaal! *3*! adoro tu diseñooo! de verdad verdad!!! ksjdlksjdakdsad !~~~Gracias por el tuto! veré que más me consigo por tu blog *-*

    ResponderEliminar
  5. La otra vez no podia comentar porque no encontraba la caja de comentarios xD ... ahora sobre el tuto, pues la verdad es que suena muy interesante y sintio que debo tenerlo xD , lo aplicare en otro diseño :3

    ResponderEliminar
  6. Hermosa, te puse en mi sección "blog" donde están los créditos, gracias por todo :3

    ResponderEliminar
  7. Respuestas
    1. a veces tarda un rato en colocarse por el script que usa

      Eliminar
Muchas gracias por dedicarle tu tiempo a mi blog! Espero que la entrada te haya gustado y no dudes en dejar tu opinión en un comentario ♥ (Por favor no dejes spam)