Añadir caja rotativa con entradas recientes estilo blog de noticias en Blogger
Página 1 de 2 12 ÚltimoÚltimo
Mostrando resultados del 1 al 10 de 16
  1. #1
    Registro
    04-enero-2017
    Ubicación
    República Dominicana
    Mensajes
    27
    Este truco está muy bueno para páginas de noticias y revistas, pues ayuda a mostrar el último contenido publicado en el blog automáticamente con sólo hacer unos pequeños cambios en un código.
    Bueno, lo que debemos hacer es dirigirnos a Blogger> entrar a Diseño> presionar en Añadir un gadget> ahora en HTML/Javascript. Es donde pegaremos el siguiente código:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
    <style>
    #headlines {
    overflow:hidden;
    position:relative;
    line-height:25px;
    background:#34495e; /* Color de fondo */
    height:45px;
    padding:0 0 0 135px;
    }
    #headlines h3 {
    color:#fff;
    font-family:Oswald, sans-serif;
    font-size:17px;
    font-weight:400;
    text-transform:uppercase;
    margin-left:-115px;
    margin-top:10px;
    position:absolute;
    }
    #headlines .right_arrow {
    padding:0 38px 0 110px;
    display:block;
    background:url(//lh6.googleusercontent.com/--o4encAx1Tc/VApRPFfbQFI/AAAAAAAALd4/kf0T7CNSvY0/s41/arrow.png) no-repeat right center;
    height:46px;
    line-height:46px;
    position:absolute;
    left:0;
    top:0;
    }
    #ticker_post {
    position:relative;
    margin:0;
    margin-left:20px;
    height:50px;
    width:auto;
    }
    .marquee {
    width: 980px; /* Ancho del área donde se muestran las entradas */
    overflow: hidden;
    line-height: 45px;
    }
    .js-marquee a {
    font-family:Oswald, sans-serif;
    font-size:15px; /* Tamaño de los textos */
    color: #FFF; /* Color de los textos */
    padding-bottom: 20px;
    text-decoration: none;
    }
    .ticker_separator {
    color:#FFF; color: #FFF; /* Color del separador de las entradas */
    margin:0 10px;
    }
    </style>
    <div id='headlines'>
    <h3> Título de la caja </h3>
    <div class='right_arrow'></div>
    <script>
    var blog_url = " http://aqui pones la URL de tu blog ";
    var numero_post = 10; // Número de entradas a mostrar
    </script>
    <script type="text/javascript" src="http://yourjavascript.com/946415552/ticker.js"></script></div>
    <div style='clear:both;'></div>
    <script>
    $(window).load(function() {
    $('.marquee').marquee({
    direction: 'left', // Dirección de la marquesina, usar left o right
    duration: 25000, // Velocidad
    pauseOnHover: true,
    duplicated: true
    });
    });
    </script>

    Ahora debemos editar lo que está en color rojo, guardar el gadget y ubicarlo en el lugar que queremos que se visualice, cuando lo ubicamos presionar en "Guardar disposición", luego visualizar el blog y allí está nuestra caja de entradas rotativas.

    Es una marquesina basada en Javascript y CSS y asociada a jQuerry.

    Espero les sirva y, pues hasta la próxima.




    PD: El código obviamente va en un gadget HTML/Javascript y funciona en todas partes, pero naturalmente se usa cerca de la cabecera del blog.
    Última edición por Michael Rosario; 12-feb-2017 a las 07:06

  2. #2
    Registro
    13-abril-2014
    Ubicación
    El salvador
    Edad
    23
    Mensajes
    429
    Lo provare muchas gracias
    Citar Citar  

  3. #3
    Registro
    07-enero-2013
    Ubicación
    Vivo En Limbo
    Edad
    29
    Mensajes
    1.107
    Voy a probar a ver como funka,
    gracias por el dato,
    si funciona hago video,
    y obvio te doy los creditos por compartirlo
    Gracias Salu2
    Citar Citar  

  4. #4
    Interesante la info probare a ver que tal, gracias
    Citar Citar  

  5. #5
    Registro
    28-octubre-2013
    Ubicación
    USA
    Mensajes
    439
    Gracias por compartir se agradece
    Citar Citar  

  6. #6
    Buenísimo!!!
    Citar Citar  

  7. #7
    Registro
    07-enero-2013
    Ubicación
    Vivo En Limbo
    Edad
    29
    Mensajes
    1.107
    Michael Rosario lamentablemente lo probe en varios blogs y no funciona, o por favor especifica como se hace
    Citar Citar  

  8. #8
    Registro
    04-enero-2017
    Ubicación
    República Dominicana
    Mensajes
    27
    Hola, idumaya.
    Recuerda que debes sustituir los datos de color rojo y que el código va en un gadget HTML/Javascript.
    El código funciona en casi todas las posiciones del blog, pero naturalmente se utiliza debajo de algún menú horizontal o de la cabecera del blog.
    Intentalo con esas instrucciones y me dices qué tal te va.
    ¡Saludos!
    Citar Citar  

  9. #9
    Registro
    13-enero-2017
    Ubicación
    Venezuela
    Edad
    19
    Mensajes
    13
    Muy bueno esto era lo que estaba buscando! Al fin muchas gracias por el aporte
    Citar Citar  

  10. #10
    Registro
    04-enero-2017
    Ubicación
    República Dominicana
    Mensajes
    27
    Sí, castpvp, yo también lo busqué por mucho tiempo. Pero hace poco lo encontré y lo paso para que no busquen tanto como yo tuve que buscar.
    Citar Citar  

Página 1 de 2 12 ÚltimoÚltimo

Temas similares

  1. Tutorial: Pop up caja de like facebook con temporizador estilo minimalista-blogger
    Les comparto esta buena herramienta para blogger, un pop up con estilo minimalista muy atractivo, ademas cuenta con temporizador para que tu decidas...
    Respuestas: 14
    Último mensaje: 13-feb-2016
  2. Tutorial: Añadir caja de comentarios Facebook en Blogger
    He decidido poner comentarios de Facebook en mis blogger por dos motivos 1)Cuando alguien comenta aparece en su muro 2)Los visitantes suelen estar...
    Respuestas: 57
    Último mensaje: 05-oct-2015
  3. Caja de comentarios facebook para blogger en las entradas
    Hola por mas que haya visto miles de tutos como poneer caja de comentarios de facebook solo en las "Entradas" no puedo encontrar como se hace.. solo...
    Respuestas: 3
    Último mensaje: 23-sep-2014
  4. Errores en los gatgets de entradas recientes y comentarios de blogger!
    Desde hace varios dias sucede esto y por eso los quite de mi blog, hoy intente colocarlos pero en la misma ventana de google anunciaba su error y...
    Respuestas: 0
    Último mensaje: 21-nov-2012
  5. Algun plugin para Widget para comentarios recientes, entradas recientes y tags??
    Yo se que algunos theme lo traen por defecto pero el que yo tengo no lo tiene y lo quiero implementar.. algo que quede asi...
    Respuestas: 0
    Último mensaje: 24-dic-2010

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •