:::: MENU ::::
  • Desarrollo Web - Responsive Design

  • Easy to Customize

  • Customizable fonts.

viernes, 16 de agosto de 2013

Hoy les traigo un nuevo tutorial para mejorar el diseño de su blog de blogger, antes de empezar recuerden que pueden hacer sus peticiones en comentarios o la sección de contacto.

Muy bien, lo que haremos en este tutorial como en el titulo lo dice... pondremos una paginación a nuestro blog para darle un diseño mas amigable al  visitante del blog ya que la que tiene por defecto la mayoría de las plantillas "ver entradas mas antiguas" es poco atractiva.




blogger paginacion
Así se vera tu paginación
 Como puedes observar en la imagen de arriba así se verá tu paginación entonces vamos a empezar primero que nada ps debemos iniciar sesión en blogger  y luego nos iremos a Diseño y agregamos un gadget de tipo Html/JavaScript


  • Copiamos y pegamos el siguiente código:

<style type="text/css">#blog-pager{font-size:normal;padding:10px 0;clear:both;} .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://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -50px repeat-x} .showpageNum a:hover{border:1px solid #888;background:#ccc url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -25px repeat-x} .showpageOf{margin:0 4px 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://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 0 repeat-x;text-decoration:none}</style> <script style='text/javascript'> var numshowpage=7; var postperpage =6; var upPageWord="Anterior"; var downPageWord="Siguiente"; var home_page="/"; var urlactivepage=location.href; </script> <script style='text/javascript' src='https://dl.dropboxusercontent.com/u/168482905/paginacion%20para%20blogger/script-paginacion-blogger.js'></script>


  • Ahora solo guardamos  y listo! 
Ahí tienes tu paginacion en tu blog, con un sencillo gadget. Si tienes dudas no dudes en dejarme un comentario.




0 comentarios:

Publicar un comentario

¿Necesitas una pagina web? Contáctanos