Tutorial: Cómo agregar últimas entradas como una marquesina estilo caja de noticias en Blogger

Michael Rosario Seguir

Alfa
Social Media
Verificación en dos pasos desactivada
Desde
4 Ene 2017
Mensajes
26
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.
:):):):):):rolleyes:



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:

idumaya

Eta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
7 Ene 2013
Mensajes
1.292
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
 

Jesustrz

Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
19 Sep 2015
Mensajes
857
Interesante la info probare a ver que tal, gracias :p7:
 

idumaya

Eta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
7 Ene 2013
Mensajes
1.292
[MENTION=174421]Michael Rosario[/MENTION] lamentablemente lo probe en varios blogs y no funciona, o por favor especifica como se hace:p7:
 

Michael Rosario

Alfa
Social Media
Verificación en dos pasos desactivada
Desde
4 Ene 2017
Mensajes
26
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! :welcoming::witless:
 

Michael Rosario

Alfa
Social Media
Verificación en dos pasos desactivada
Desde
4 Ene 2017
Mensajes
26
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.
 

Grimmjow

1
Sigma
Diseñador
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
Suscripción a IA
Desde
16 Ene 2016
Mensajes
11.053
Se te agradece por tan tremendo aporte :encouragement:
 

nuevecito

Alfa
Verificación en dos pasos desactivada
Desde
3 Ago 2016
Mensajes
15
[MENTION=174421]Michael Rosario[/MENTION], metí el código en mi blog antesaladelfin como gadget HTML/Javascript , pero no me funciona , nada más aparece PORTADA ( el título que le puse a la caja,) antes de eso edité también la url en la opciones en rojo, ¿sabes si se puede arreglar?
Gracias por compartir :rolleyes:
 
Última edición:

AuriazulCrew

Alfa
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
1 Ene 2016
Mensajes
15
Gracias por el Tuto :encouragement:
 

trevinho

Curioso
Verificación en dos pasos desactivada
Desde
15 May 2017
Mensajes
3
A mi no me funciona, sólo me sale el título de la caja...me queda así:
FireShot Capture 18 - WEB NO OFICIAL DE LA SD_ - https___sd-compostela.blogspot.com_b_layout-pre.png
 

Zoeba

Beta
Verificación en dos pasos desactivada
Desde
8 Ene 2016
Mensajes
37
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Muy buen aporte :)
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba