Paginacion para el blog en jimdo mas estilos css

mejorar el blog en jimdo
ordenar el blog jimdo

Saben siempre que entraba a mi blog jimdo lo veía desordenado, no encontraba la manera de ordenarlo.

Tenía que colocar el teaser en 1 o 2 máximo y solo podía publicar un número de entradas de 20, todo esto con el fin de que el blog no sea largo y que mis visitantes no se priven de todas las ultimas entradas.

Cuando agregamos demasiados artículos en una pestaña, la página se nota rápidamente lenta e ilegible claro esto para las persona que utilizamos mucho el blog.

 

Este código que te vamos a obsequiar te permitirá tener una paginación ordenada y mostrar todas tus entradas segmentadas.

Tambien te recomendamos que aprendas a ubicar en categorias tu blog, en otro articulo publicaremos como ordenarlo.

 

En este momento te dejamos mas de 30 estilos css de paginacion jimdo para que elijas el que mas te guste.

Paginacion automatica del blog

Demostracion de los resultados de paginacion en jimdo.

Aqui podran visualizar el demo de la paginacion, pueden entrar a mi blog , ahi enumero todas la entradas, ademas tiene un estilo css muy llamativo.

 Asi agregas un codigo html a tu pagina jimdo

¿ Donde agrego este codigo ?

Agrego este codigo insertando un elemento widget/html

En esta imagen se visualiza como agregar el codigo que te proporcionamos lo pegas y das guardar.

Todo esto lo debes agregar en la pagina que insertes todas las entra del blog AL INICIO arriba de todo.

Para visualizar la imagen claramente y mas amplia da clic sobre ella.

 

Codigo-1 paginacion jimdo, insertalo en un widget/html

Nota: var $page_set = 4; puedes modificar el numero para los items que deseas por pagina

por ejemplo en el numero 1 se visualizaran cuatro articulos en el 2 cuatro  articulos mas  asi sucesivamente.

 

smiley

Copia este codigo y pegalo en un widget/html

Este es un script pegalo al inicio de tu blog.

 <script type="text/javascript">
//<![CDATA[


var $p_first = 1;        
var $page_set = 4; //cuantos items deseas por pagina      
var $open_page = 2;      
var $p_status = Array();
var $b_page = Array();   
var pmove;               

jQuery.noConflict();
(function($) {
  $(function() {
    
    $("div.blogselection").each(function($i){
      
      var $b_count = $(this).children("div.j-blogarticle").length;
      
      if($b_count>2){
        
        $pager ="<div class=\"pager_navi\"><\/div>";
        $(this).append($pager);
        
        $(this).prepend($pager +"<hr>");
        
        $b_page[$i] = 1 + Math.floor(($b_count - 1) / $page_set);
        
        pmove($p_first,$i);
      }
    });
  });
  //mas diseños Y codigos en www.disemucho.net
  pmove = function($p,$target) {
    $p_status[$target] = $p;
    $("div.blogselection").each(function($i){
      if($i == $target){
        var $pager_arr = Array();
        var $back = $p_status[$i] - 1;
        var $next = $p_status[$i] + 1;
        
        
        var $f = $p_status[$i] - $open_page;
        if($f <= 0){
          $f = 1;
        }
        
        var $l = $p_status[$i] + $open_page;
        if($l > $b_page[$i]){
          $l = $b_page[$i];
        }
        
        var $row = 0;
        $pager_arr[$row++] = "<div style='float:left;width:80%;'>";
        if($p_status[$i] == 1){
          $pager_arr[$row++] = "<a class='disemuchonet1'><\/a>";
        }else{
          $pager_arr[$row++] = "<a class='disemuchonet2' href=\"javascript:pmove("+$back+","+$i+");\"><<<\/a>";
        }
        var $j;
        for($j=$f;$j <= $l;$j++){
          if($j!=$p_status[$i]){
            $pager_arr[$row++] = "<a class='disemuchonet3' href=\"javascript:pmove("+$j+","+$i+");\">"+$j+"<\/a>";
          }else{
            $pager_arr[$row++] = "<a class='contenedor'><b class='active'>"+$j+"<\/b><\/a> ";
          }
        }
        
        if($p_status[$i] == $b_page[$i]){
          $pager_arr[$row++] = "<a><\/a><\/div>";
        }else{
          $pager_arr[$row++] = "<a class='disemuchonet4'  href=\"javascript:pmove("+$next+","+$i+");\">>>  <\/a><\/div><a href='http://www.disemucho.net/2014/01/25/paginacion-para-el-blog-en-jimdo-mas-estilos-css/' target='_blank'><img style='width:20px;float:right;padding-top:10px;' src='http://u.jimdo.com/www23/o/sa5d0d73091157220/img/i4718700df1c0d2b0/1390677574/std/image.png'/><\/a> ";
        }
        $pager_arr[$row++] = "<\/div><div style='clear:both'><\/div>";
        $pager ="";
        $.each($pager_arr,function(key,val){
          $pager = $pager + val;
        });
        $(this).children("div.pager_navi").html($pager);
        
        
        $(this).children("div.j-blogarticle").hide();
        $(this).children("div.j-blogarticle").each(function($j){
         
          if($j >= ($p_status[$i] * $page_set)-$page_set && $j < ($p_status[$i] * $page_set)){
            $(this).show();
          }
        });
        
       // $("body").scrollTop(0);
      }
    });
  };
})(jQuery);


//]]>
</script>

¿Donde esta head ?

El siguiente código pégalo en el head.

El head lo encuentras ? mira la imagen

Dale clic para ampliar.

Listo , actualiza tu web presionando f5 míralo en vista previa.

 Si deseas otro diseño en las flechas andelate,atraz escoje de la galeria de estilos el que mas te guste.

Pega este Codigo-2 en head de tu web jimdo.

smiley

Pega este codigo en el head de tu web jimdo

Aqui esta el script y los css

 <script type="text/javascript" src="http://www.google.com/jsapi">
</script>

<script type="text/javascript">
//<![CDATA[
google.load('jquery', '1')
//]]>
</script>
<link rel="stylesheet" href="http://disemuchopaginacion.blogcindario.com/ficheros/imagenes/paginacion-jimdo-disemucho-net-style-12.css" type="text/css" />

Galeria de estilos css de paginacion jimdo

 

¿Como insertar todas las entradas de mi blog en una pestaña o pagina?

Primero debes crear tu pestaña o pagina, te dirijes a ella e insertas el blog como ves en la imagen.

Para visualizar la imagen claramente y mas amplia da clic sobre ella.

 

  • Crea una subpágina en el menú de navegación para tu blog.
  • Introduce un módulo "Blog" en la subpágina donde quieres que aparezca.
  • Ajusta las opciones del blog.

 

¿Como ordeno los articulos o numero de entradas en blog jimdo?

Categoria:Tu decides como deseas ordenar tu blog jimdo, lo puedes hacer por la categoria que elijas o si deseas que se muestren en una pagina todas las entradas elijes todos como lo tengo yo en mi pagina.

Con las categorías podrás ordenar tus artículos según tus propios criterios. De este modo podrás tener muchos blogs sobre diferentes temas en tu página

clic para ver amplia
clic para ver amplia

Teaser: es el conjunto de elementos que aparece en el resumen del artículo. Aquí puedes configurar el número de elementos que debe aparecer en el teaser.

Ejemplo, tu blog está compuesto por los siguientes elementos: Título,texto, Imágenes, etc. En el largo del teaser, 0 equivale a mostrar solo los títulos de las entradas de blog, 1 a mostrar el título y el primer módulo, 2 a mostrar el título y los 2 primeros módulos, etc.

POR FAVOR REPORTA CUALQUIER PROBLEMA CON ESTE SCRIPT

Comentarios: 16
  • #16

    Jorge Luis (domingo, 11 octubre 2015 17:43)

    Realizo todo los paso pero no aparece nada en mi pagina , no se que pueda estar pasando !!! podrías hacer un vídeo por favor te lo agradecería mucho!!!!

  • #15

    juan gongora (martes, 05 mayo 2015 11:27)

    hola!! amigop no me sirvio aparece el numero pero no me aparece las flechas para ir a la siguiente pagina para ver la sdemas entradas

    graciAS

  • #14

    Esthela Duche (jueves, 26 marzo 2015 11:27)

    Hola, muy buenos dias..
    Bueno te agradezco mucho por visitar nuestra sitio web, basicamente colocamos nuestra marca en la mayoria de codigos que proporcionamos a la comunidad de Jimdo, es mas como una retribucion por nuestros servicios. Pero, si deseas colocar tu propio logo puedes hacerlo con total libertad.
    Saludos.

  • #13

    euro-lingual (miércoles, 25 marzo 2015 06:17)

    Consegui hacer la paginacion y esta muy buena. Te agradezco mucho, pero en la parte derecha de la pagina aparece un botón para hacer link a tu blog. Es obligatorio esto, me gustaría evitar esto.
    Es posible? Como debería modificar el script?
    Gracias por tu consideración

  • #12

    Esthela Duche (miércoles, 24 septiembre 2014 20:14)

    Hola cumbiaactual recuerda que esto solo es para entradas del blog cual es la seccion de tu blog para revisar tu codigo fuente.

  • #11

    cumbiaactual (miércoles, 24 septiembre 2014 18:26)

    ps no me sirvio x que segui todos os pasos lo intente varias veses

  • #10

    tutorialesconjahirceloriopt (lunes, 07 julio 2014 18:25)

    hola no me sale la paginacio ayudaa

  • #9

    DJBREIMER (martes, 27 mayo 2014 13:42)

    muy wena me sirvio

  • #8

    sandovalgames (jueves, 20 febrero 2014 13:00)

    Perfecto! Solo que tengo una duda, cuando creo la sub-página, tengo que ponerle otra categoría al blog o le sigo poniendo "todos" y si es así aparecerán los mismos que en la primera página o la continuación de esos?

  • #7

    sandoval-games (lunes, 17 febrero 2014 00:02)

    Muchísimas gracias, soy Sandoval el que lo pidió!! aa muero de alegría, muchísimas gracias en verdad

  • #6

    carlosdise (jueves, 13 febrero 2014 13:46)

    esto mola que bueno

  • #5

    Esthela Duche (domingo, 26 enero 2014 13:38)

    Muchas gracias a todos por sus comentarios por favor este pendiente ya que esta semana publicaremos un pack de plantillas y botones sociales para jimdo. Tambien quiero invitarlos a nuestro nuevo proyectos de negocio, hemos actualizado esta seccion con mas detalles del negocio.
    http://www.disemucho.net/proyecto-disemucho/

  • #4

    yiyosanabria (domingo, 26 enero 2014 13:17)

    Esthela, como siempre digo... "INTERESANTE" aprendo mucho de tu página felicitaciones por todo el contenido .. saludos!

  • #3

    Ylder Gonzalez Vera (domingo, 26 enero 2014 07:10)

    pues felicitaciones dos veces, lograste lo que el equipo de jimdo no ha logrado muy buen trabajo.... por cierto de donde eres? quisiera agregarte a google+ para contacto mas directo...

  • #2

    Ylder Gonzalez Vera (sábado, 25 enero 2014 20:18)

    si funciona te felicito el doble, por el momento muy buen trabajo el que realizas, buena noche.

  • #1

    Misterangelalonso (sábado, 25 enero 2014 18:36)

    Genial!!!!! ^^
    Me quede sin palabras!
    Muchas gracias!!!