ESTILOS DE PAGINACIÓN PARA BLOGGER CON CSS

ESTILOS DE PAGINACIÓN PARA BLOGGER CON CSS .

Navegando en el blog de Abu-farhan encuentro seis estilos de barra de navegación para blogger, estos 6 estilos los podemos disfrutar a gracias a Choen.

A sí que si estabas pensando poner una barra de paginación en tu blog pero el color de la paginación no se ajustaba a tu gusto, puedes escoger entre estos 6 estilos  de paginación que bienen en distintos colores, escoge el que más te guste.

 El color de los estilos es el mismo que pueden ver en la imagen de arriba.

Primero ve a Diseño > Añadir un gadget > elije HTML/Javascript, copia y pega el siguiente código:

Ir a Blogger

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

<style type='text/css'>.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord="Anterior";var downPageWord="Siguiente";</script><script style='text/javascript' src='http://dl.dropbox.com/u/3373498/PazosBlogger-blogger-page-nav-v2.js.txt'></script>

Haz click en guardar y situa el Elemento debajo de todas las entradas.



Ahora tienes que copiar el código CSS para darle estilo, y lo ponen en su plantilla antes de ]]></b:skin> .

Se los dejo enumerados del 1 al 6 en orden como están en la imagen de arriba:


 1 Un clic en “Plantilla”

  2 Un clic en “Editar HTML”

 3 Ahora se te abrirá el Editor HTML de tu plantilla

4 En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

5 Busca el siguiente código:   ]></b:skin>


 

6 una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste

 Estilo 1

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }

.showpageArea a {
  color: #000;
  text-shadow:0 1px 2px #fff;
    font-weight: 700;
  }

.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -50px repeat-x;
  }

.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -25px repeat-x;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

 Estilo 2

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }

.showpageArea a {
  color: #000;
  text-shadow:0 1px 2px #fff;
    font-weight: 700;
  }

.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #919106;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -50px repeat-x;
  }

.showpageNum a:hover {
  border:1px solid #aeae0a;
  background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -25px repeat-x;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #919106;
  background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

 Estilo 3

. showpageArea (
  font-family: Verdana, Arial, Helvetica;
  color: # 000;
  font-size: 11px;
  margin: 10px;
  )

. showpageArea a (
  color: # fff;
  )

. showpageNum a (
  padding: 3px 8px;
  margin: 0 4px;
  text-decoration: none;
  background: # 363636 url (http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0-25px repeat-x;
  )

. showpageNum a: hover (
  background: # 044697 url (http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0-50px repeat-x;
  )

. showpagePoint (
  color: # fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: # e30000 url (whttp: / / i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 0 repeat-x;
  text-decoration: none;
  )

. showpageOf (
  margin: 0 8px 0 0;

 Estilo 4

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }

.showpageArea a {
  color: #fff;
  }

.showpageNum a {
  padding: 3px 4px;
  margin:0 4px;
  text-decoration: none;
  border-top:2px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -25px repeat-x;
  }

.showpageNum a:hover {
  border-top:2px solid #999;
  border-left:1px solid #999;
  border-right:1px solid #999;
  border-bottom:1px solid #999;
  background: #999 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -50px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  border-top:2px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background: #000 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

 Estilo 5

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }

.showpageArea a {
  color: #fff;
  }

.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #333 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 -50px repeat-x;
  }

.showpageNum a:hover {
  background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 -25px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #06a2b9 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

 Estilo 6

. showpageArea (
  font-family: Verdana, Arial, Helvetica;
  color: # fff;
  font-size: 11px;
  margin: 10px;
  padding: 8px 20px;
  background: # 333;
  )

. showpageArea a (
  color: # fff;
  )

. showpageNum a (
  padding: 3px 8px;
  margin: 0 4px;
  text-decoration: none;
  background: # 666;
  )

. showpageNum a: hover (
  background: # 888;
  )

. showpagePoint (
  color: # fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: # da6100;
  text-decoration: none;
  )

. showpageOf (
  margin: 0 8px 0 0;
  )

 Fecha de la Publicación; 18-01-2019

 Fuente;  masaudaz

Vía | Abu-farhan :  

 Publicado por;