Plantilla propia en jimdo

Como Adaptar Una Plantilla HTML/CSS Para Jimdo

Ya saben que mi web es muy visitada y los correos ya me saturaban el gmail jajajaja me pedian un tutorial  ¿como adaptar una plantilla para Jimdo?,te dejo el video tutorial  paso a paso como adaptar una plantilla HTML/CSS de una manera fácil.

El video tutorial lo he creado de una manera rapida y sencilla para que lo entiendas.

Bueno aqui les dejo abierto los comentarios cualquier duda dejen comentarios en esta seccion solo para respuestas sobre plantillas jimdo.

aaaa y no se olviden suscribasen al canal besos Esthela Duche

Boton suscripcion de youtube para tu web o blog

Sabias que los desarrolladores de google crearon una zona para el boton de suscripcion de youtube.

El botón te permite suscribirte de  un solo clic, tus  visitantes se suscriben a tu canal de YouTube sin tener que dejar tu sitio.


 

Para añadir un botón, la aplicación tiene que cargar el archivo JavaScript no te olvides este paso es muy importante.

Este codigo lo colocas en el head de tu pagina:

smiley

Copia este codigo y pegalo en el Head:

 <script src="https://apis.google.com/js/platform.js"> </script>
smiley

Copia este codigo y pegalo en un widget/html Layout full:

<div class="g-ytsubscribe" data-channel="JUANAESTHELA" data-layout="full" data-count="default"> </div>

En JUANAESTHELA cámbialo y pon tu ID de canal.

 

Puedes crear tu propio estilo desde la página oficial de los desarrolladores

 

Configura un botón

 

Channel Name or ID o ID del usuario de YouTube: Ejemplo el mío es JUANAESTHELA

Layout o Diseño: Elije entre un diseño full como este ejemplo o un estándar por defecto.

Theme o Tema: Por defecto el fondo es transparente o con fondo oscuro dark esto depende a tu sitio web claro o oscuro.

Subscriber count o recuento de suscriptor: Esta opción elije por default si deseas que se visualice el número de tus suscritos o hidden que significa oculto.

 

9 comentarios

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

16 comentarios
Comentarios: 63
  • #63

    modeluzperu (jueves, 21 noviembre 2013 19:57)

    Por favor, si me pueden decir como puedo colgar un encabezado flash a mi página Jimdo Pro.
    Gracias

  • #62

    virtuallcine (jueves, 31 octubre 2013 10:10)

    http://papomixx2.jimdo.com/

  • #61

    clangpd (martes, 27 agosto 2013 21:52)

    ñpñ

  • #60

    tony (sábado, 01 junio 2013 23:45)

    hola quisiera saber como poner un slider en la cabecera de mi web jimdo, ayudenme, gracias

  • #59

    efectophiproducciones (lunes, 26 noviembre 2012 14:24)

    Como hago para que mi pagina Jimdo con plantilla se vea bien en distintos monitores?

  • #58

    luislozadaruiz2009 (domingo, 11 noviembre 2012 07:29)

    como actualizo un calendario en html

  • #57

    Marcos Tulio Contreras (viernes, 05 octubre 2012 15:57)

    hola me pueden ayudar a como bajar el menu de mi plantilla

  • #56

    dulceenjambre (jueves, 20 septiembre 2012 11:30)

    denme su punto de vista de mi pagina web:dulceenjambre.jimdo.com

  • #55

    gabupotgames (lunes, 17 septiembre 2012 19:44)

    VISITEN MI PAGINA WEB: WWW.GABUPOTGAMES.COM

  • #54

    ministerioalfavision (jueves, 13 septiembre 2012 16:24)

    me gustaria que publiquen mi pagina para dar a conocer el nombre de jesus

  • #53

    vicentte (domingo, 29 julio 2012 22:15)

    y como se adaptan las plantillas de wordpress para jimdo??

  • #52

    elrincondejorge (jueves, 26 julio 2012 05:47)

    como puedo modificar las imagenes de las plantillas que descargo por aqui por tu web (que por cierto es MUY BUENA!! ) te agradeceria eternamente si me dices como modificarla en general.. osea quiero tomar la que descargue como modelo pero hacerle unas modificaciones espero tu respuesta gracias! :D

  • #51

    asd (sábado, 14 julio 2012 03:12)

    http://stiloparavoz2012.jimdo.com voten si le gusta o no mi web

  • #50

    asd (sábado, 07 julio 2012 22:08)

    http://stilomusicaal2012.jimdo.com

  • #49

    JUAN AVALOS (lunes, 28 mayo 2012 11:15)

    bienvenidos

  • #48

    Crishtian yanac (martes, 22 mayo 2012 23:43)

    Ola.!! yo me descargue una platilla de lady gaga , lo que pasa es que en la parte superior de mi pagina salen varios nombres (inicio,comentario,videos,imagenes,visitas amigos,) como hago para cambiarles de nombre o casarlos?? ayuda porfa

  • #47

    Siverlong (lunes, 09 abril 2012 10:20)

    Aprovecha la oportunidad!!!!!!
    Solo queda un mes para que el concurso siverlong de la mejor pagina jimdo termine y empiezen las votaciones, si aun no estas incluido en el concurso, ¿a que estas esperando?
    CONCURSA YA TOTALMENTE GRATIS tan solo pon los pocos datos que te piden en nuestra web y ala a concursar, y si ya estas dentro del concurso, queda poco para las votaciones, empieza a preparar a ua amigos para que te voten.


    CONCURSO MEJOR PAGINA JIMDO

    De : siverlong

  • #46

    anzuly28 (martes, 27 marzo 2012 13:16)

    ola

  • #45

    hugo (lunes, 26 marzo 2012 21:27)

    quien me puede ayudar con mi pagina porfavor soy nuevo con esto y tengo todo hosting dominio y unas plantillas index pero no se que hacer para q me quede lo que quiero ayudarme porfavor

  • #44

    pandorica (domingo, 25 marzo 2012 15:22)

    gracias por el aporte un saludo
    espero ke les guste mi web

  • #43

    muonlinecontodo (sábado, 24 marzo 2012 04:02)

    Hola, tengo un problemamita xD!... resulta que estoy creando una web exclusivamente para el mu online resulta que yo elegí una plantilla de jimdo, la cual se encuentra en Plantillas Especiales es la Plantilla S4167 para mi gusto le quedo bien, bueno ahora el problema es que yo quiero cambiarle de cursor o puntero a mi web y ponerle otro, pero cuando pongo el codigo del cursor en HTML y pongo guardar despues toda la web aparece en blanco solo se ven los widgets... esto es porque no tiene codigo HTML la plantilla de jimdo S4167 ¿alguna solucion para esto? ¿ponerle un cursor a esa plantilla? este es el codigo:
    <style>
    body,a {
    cursor: url(http://antraxmu.com/mu.cur), auto;
    }
    a:hover {
    cursor: url(http://antraxmu.com/mu2.cur), auto;
    }
    </style>
    Desde ya muchas Gracias ;)

  • #42

    JJ-21 (jueves, 22 marzo 2012 12:56)

    JJ-21 tu web de ocio: http://JJ-21.jimdo.com

  • #41

    stacionrex (martes, 20 marzo 2012 18:22)

    yo he intentado aserla pero no me sale me pueden enviar una plantilla a micoreo stacionrex@live.com

  • #40

    software-full (domingo, 18 marzo 2012 00:12)

    Muy buen tuto, sigan así

  • #39

    beto (martes, 13 marzo 2012 18:35)

    como hacer una mejor plantilla y si tienes tutoriales de descarga embiame uno no

  • #38

    ohbrayan (viernes, 17 febrero 2012 10:26)

    hola amiga es q coloque en mi web un muchequito que da vueltas ahora lo quiero quitar como hago para eliminarlo

  • #37

    coticotilleos (jueves, 16 febrero 2012 10:19)

    a mi me gusto mucho el video

  • #36

    Kenny García Rodríguez (lunes, 06 febrero 2012 00:47)

    JE HEY! BUEN ESLOGAN, SIEMPRE ME HA GUSTADO SER ORIGINAL, Y YA ME GUSTARÍA UNA PLANTILLA PROPIA, ESPERO QUE ME SIRVA. TE PONDRÉ EN FAVORITOS Y CUANDO TENGA $$$ TE DONO ;D

  • #35

    marco (domingo, 05 febrero 2012 20:42)

    gracias

  • #34

    7segundos (sábado, 28 enero 2012 15:12)

    gracias por la ayuda

  • #33

    halocealfa (viernes, 27 enero 2012 18:12)

    ola

  • #32

    jrtutos (lunes, 23 enero 2012 08:13)

    Porque Cuando Entro A Editar Una Plantilla Como Tu, Con El DwCS5 No Me Sale Para Editar El Diseño?
    Solamente Los Codeigos :$ Ayuda Porfavor.

  • #31

    Juan (sábado, 21 enero 2012 17:37)

    Buen video, aunque me gustaría que pusieras los links de algunas paginas:)

  • #30

    jrtutos (viernes, 20 enero 2012 15:21)

    Me ME Gusta :D Ya Estaba Buscando Como Editar Mi Plantilla xd Bueno Echate Una Pasadita Por Mi Pagina :D
    jrtutos.jimdo.com

  • #29

    unicoop (viernes, 13 enero 2012 09:24)

    este error me sale En tu código HTML se encontraron 1 errores/observaciones.

    line 27 column 25 - Warning: <form> lacks "action" attribute

  • #28

    unicoop (viernes, 13 enero 2012 09:20)

    yo tengo una plantilla corregida pero no me sale igual cual puede ser el error

  • #27

    andresvizcainoweb (jueves, 12 enero 2012 12:07)

    nena nesesito algunos consejos tuyos y quiero ser mood

  • #26

    xoan.ninguen (jueves, 05 enero 2012 12:56)

    Muy bien.
    Me ha encantado la sencillez con la que has explicado la personalización de la plantilla.
    Tu página es como un batiburrillo de cosas, pero buscando bien, es un tesoro.

    Te felicito.

  • #25

    William Ajhuacho (miércoles, 04 enero 2012 10:20)

    Hola,
    Uso la plantilla F4027 jimdo, elegi esa, mas que todo por el color (Negro en toda la plantilla).Pero deseo que la cabecera de imagen (parte superior en la pagina) ; quiero que vaya al centro y no hacia la derecha como en la plantilla. como podría lograr eso?.
    Saludos

  • #24

    Ana y Yoko (viernes, 30 diciembre 2011 05:13)

    como mola nyaa! x3

  • #23

    iup (lunes, 26 diciembre 2011 17:46)

    k genial

  • #22

    juegosv1 (lunes, 19 diciembre 2011 08:39)

    ¡Es increíble, jamás vi una página tan útil y que contenga de todo!
    ¡Además me gustan todos esos diseños que usas para tu página!
    Por favor visita: www.juegosv1.jimdo.com y deja un comentario!

  • #21

    Maykel leon (domingo, 18 diciembre 2011 14:20)

    muy bueno todo garcias

  • #20

    wilmerleoxd (lunes, 05 diciembre 2011 22:20)

    puxa q xvr

  • #19

    desarmandocorazones (lunes, 05 diciembre 2011 08:38)

    Muy interesante

  • #18

    ventacelular (viernes, 18 noviembre 2011 14:08)

    COMO MANDO UN CORREO DE PROMOCION

  • #17

    marinasafor (martes, 15 noviembre 2011 08:07)

    hola , segui tus pasos para insertar una nueva plantilla , hasta ahi todo correcto , pero cuando pincho en vista previa , encima de la plantilla aparece un cuadro de un coche y pone " headline 2 o algo parecido y ahi se queda . no se lo que es ni se elimina ni nada. Y tengo una pregunta ¿ despues de incertar una nueva plantilla de las que tu tienes , se puede cambiar el cabezal, botones etc...? espero respuesta gracias

  • #16

    alfa-radio (lunes, 14 noviembre 2011 12:33)

    SALUDOS

  • #15

    Sonia González Ponce (domingo, 13 noviembre 2011 17:03)

    Gracias por dar tu trabajo a los demás...contigo podemos pensar en ver nuestra web a nuestro gusto...a ver si soy capaz de cambiar mi interfaz, saludos!
    www.eltallerdelamussa.com

  • #14

    encuentrosamistosos (lunes, 07 noviembre 2011 04:39)

    LOL