lunes, 12 de octubre de 2015

Poner Ticker o marquesina diseñada para mostrar últimos post de forma automática en Blogger

Tomado gentilmente de CiudadBlogger
Hoy pasándome por un blog amigo me topé con un post bastante interesante y aunque es muy sencillo es un truco muy útil para aquellos que escriben mucho en sus blogs.
 
Se trata de un Ticker o marquesina diseñada especialmente para mostrar las últimas publicaciones en el blog que se víncule desde el código, pero explicando de mejor forma este Ticker su función es rotar las publicaciones por el mismo espacio que se le da; mostrare un ejemplo de este truco:

http://bloggin-prueba.blogspot.com/

Si ven el Ticker es muy elegante y preciso para un sitio que muestra las últimas noticias, para añadirlo iremos a Diseño>añadir un Gadget>HTML/JavaScript y pegar 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> <!--script1-->
<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>Lo Último</h3>
<div class='right_arrow'></div>
<script>
var blog_url = "http://nombre-de-mi-blog.blogspot.com";
var numero_post = 10; // Número de entradas a mostrar
</script>
<script type="text/javascript" src="http://yourjavascript.com/946415552/ticker.js"></script></div> <!--script2-->
<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 queda editar lo que está en color naranja por el link de nuestro blog y guardar el color verde se resalta el comentario que da la indicación de lo que altera en el Ticker fácil, sobre la ubicación del ticker se recomienda en un lugar al pie de la cabecera y que ocupe un buen ancho para que se muestre perfectamente.

En color azul, tenemos el script que controla todo este truco de la marquesina, te recomendamos que lo descargues y lo cargues luego en tu propio servidor, nube o que lo alojes localmente en la plantilla de tu blog para descargarlo:

-script1      -script2

Es todo en este post muy sencillo.

Hasta la próxima BloggeRs,

20 comentarios:

  1. Respuestas
    1. Hola Zheyn Castle Cuéntamos que te sale o que te pasa tienes Jquery puesto en la plantilla de tu blog (?)

      Eliminar
  2. si lo tengo puesto en mi blog amigo y nos me funciona ??

    ResponderEliminar
    Respuestas
    1. Qué raro, podrías por favor dejarme el link de tu sitio para verificar que pasa...

      Saludos,

      Eliminar
  3. Tengo una pregunta: ¿Cómo puedo lograr colocar la imagen?

    ResponderEliminar
    Respuestas
    1. Hola JoHaNnA a qué imagen te refieres (?), exactamente..

      Saludos,

      Eliminar
    2. Es que estoy tratando de hacer algo parecido a esto y no me sale :( [IMG]http://i60.tinypic.com/2hoixb5.png[/IMG]

      Eliminar
    3. Hola JoHaNnA Comprendo para adaptar este ticker y poder ponerle imágenes tendríamos que modificar el SCRIPT:

      http://yourjavascript.com/946415552/ticker.js

      Para que coincida todo y no existan problemas es difícil y podría llevar tiempo si quieres dime de donde sacaste el que colocaste en la imagen y te podré ayudar mejor.

      Saludos,

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
    5. Hola Andrés,
      Gracias por estar pendiente de mis comentarios. Mira aquí está el link donde lo saqué lo he intentado hacer pero nada :( http://newsly-pbt.blogspot.com/
      http://mkrflat-mkrdezign.blogspot.com/

      Saludos,

      Eliminar
    6. Hola JoHaNnA Investigué un poco vi los que me enviaste verás el ticker es básicamente el mismo que aquí presento en este artículo, sólo tiene como añadidura lo de la imagen pero esta es leída por JavaScript para ejecutarla en el navegador y se vea como los que enviaste, así que para modificarlo tendrías que saber un poco de JS yo con gusto podría hacerlo, pero, distintas ocupaciones no me dan tiempo sin embargo lo trabajaré poco a poco..

      Espero te sirva y fue un gusto ayudarte.

      Saludos,

      Eliminar
  4. Hola me pasa que se me rompe el color de fondo, o se me desplaza todo de lugar. ¿Porque pasa?

    ResponderEliminar
    Respuestas
    1. Hola Gonza En que parte estás ubicando la marquesina o el ticker en blogger directamente en el código de la plantilla ? o en un gadget en la sección diseño ya que eso puede afectar la selección.

      Saludos,

      Eliminar
  5. Hola e puesto el ticket o marquesina pero no me sale nada,públique algo en mi blog a ver si salia reflejado en el ticket o marquesina y nada,me puedes ayudar por favor.

    ResponderEliminar
    Respuestas
    1. Hola guayre16 Mira pueser que tengas conflictos con JQUERY, jqeury es una línea de código mostrada en el código anterior es esta:

      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

      Cómo ves aquí se trabaja la versión 2.1.1 , ahora lo que puedes hacer:

      Mira si tienes otras líneas similares a la de JQUERY si la tienes borrala (si es que es una versión antigua) lo correcto es que dejes una sóla librería JQUERY por ejemplo la de este post con esa no sólo te servirá para el TICKER sino para cualquier otro complementos o efecto que requiera de JQUERY es lago que debes tener en cuenta.

      Saludos,

      Eliminar
  6. otra cosa amigo como puedo poner la barrita que tienes a bajo de contáctenos es mu chula

    ResponderEliminar
    Respuestas
    1. Aquí sigue este enlace explico como agregar ese formulario de contáctanos:

      http://www.blogginred.com/2013/12/poner-formulario-de-contacto-en-blogger.html

      Allí hay múltiples formas de agregar el formulario puede ser por link, o por la ventanita que tengo abajo a la que te refieres.

      Saludos,

      Eliminar
  7. Este blog ha sido eliminado por un administrador de blog.

    ResponderEliminar
  8. Buenas, apliqué esto a una plantilla descargada (pero no comprada) y no hubo ninguna modificación :(

    ResponderEliminar
    Respuestas
    1. Déjma el link de tu blog para observarlo.
      saludos,

      Eliminar

SÍGUENOS EN: