add

Trucos para blogger Noticias en movimiento


Hoy revelare un truco para blogger muy fácil de implementarlo en su blog de blogger, en algunas plantillas para blogger que regale se podía ver este truco, llevaba el nombre de Headline o Noticias, y en otras plantillas no, en vista que me han llego cientos de emails pidiéndome que publicara este truco para blogger, lo voy hacer. La inserción del código es muy simple y fácil de realizar. Lo que hará este código es mostrar las últimas publicaciones en texto en movimiento incluyendo la fecha de publicación, el cual se mostrara en la cabecera principal de su blog de blogger. Bueno no voy hacer tan largo este post, a continuación mire su demostración en mi blog de demos, la barra de noticias tiene como nombre Noticias y se encuentra en la cabecera principal de mi blog de demos:

Trucos para blogger


Te gusto!

Ahora nos dirigimos a trabajar

1 Ir a Blogger

2 Da un clic en “Plantilla

3 Presiona “Editar HTML

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Trucos para blogger Noticias en movimiento

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Trucos para blogger Noticias en movimiento

4 Busca este código

</head>

Inserta las siguientes líneas de código arriba del código que encontraste

<style>
.headline-wrapper{background:#fff;width:950px;height:22px;border-bottom:1px solid #ffffff;margin:0 auto;padding:0 auto}
.headline{width:950px;line-height:1.4em;text-align:left;font-family:Arial;font-size:13px;color:#000;overflow:hidden;clear:both;margin:0 auto;padding:0 auto}
.headline a:hover{color:#1A13EB;text-decoration:underline}
</style> 
 <script src='https://www.google.com/jsapi?key=ABQIAAAAlQIoliUVPjZwD8UDgw_U3RTUhB4JyH-ajz-fA9t4yePPPdGAfRTC_mtuh6Iq1MLEipD0I2rCi30Png' type='text/javascript'/>
<script src='http://yourjavascript.com/1532494522/btt_newsticker.txt.js' type='text/javascript'/>

5 Busca cualquiera de estos dos códigos

<div id='header-wrapper'>

<div id='content-wrapper'>

Una vez que hayas encontrado cualquiera de esos dos códigos tendrás que insertar el siguiente código abajo del código que encontraste

<div class='headline-wrapper'>
<div class='headline'>
<div style='float:left;padding:2px 5px 5px 10px;font:bold 14px Arial;color:#000;text-transform:none;'>
Noticias :
</div>
<div style='float:left;width:800px;padding:2px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 3000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Headline News&quot;, &quot;http://ayudadeblogger.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style='clear:both;'/>
</div>

Realiza este cambio:

Borra el texto que esta marcado de color azul ayudadeblogger  y pon ahí solo el nombre de tu blog de blogger, por ejemplo si tu blog se llama así: ejemplo.blogspot.com, copia solo lo que dice ejemplo.blogspot y nada mas.

Es momento de dar un clic en “Guardar plantilla

Felicidades ahora tienes una barra de noticias de tus ultimas 10 publicaciones de tu blog de blogger

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos


emailEnviar por correo

7 comentarios:

  1. hola amigo no encuentro ninguno de las dos lineas del paso 5 " Busca cualquiera de estos dos códigos"

    ResponderEliminar
    Respuestas
    1. Hola, si no los encuentras entonces, da un clic en "Ir al widget" y se te desprendera una ventana en el cual da un clic en Header1 y se te ira a la linea de codigo con eso, inserta esas lineas de codigo que te faltava desde pues del termnio del < /div>
      eso es todo.
      Saludos..

      Eliminar
  2. Hola Luis, Felicitaciones por esta excelente página de ayuda a los bloggers. Son geniales tus consejos, pero este no he podido insertarlo en el blog. Estoy empezando en esto de los blogs y páginas web, y ando construyendo una página en Wix.com para una revista. Quisiera me ayudaras a poner en mi sitio web una barra como la de la parte superior de tu página, a la que titulas headlines está mucho mejor que la de este tutorial.
    Te agradezco.
    Sigue así.

    ResponderEliminar
  3. Amigo me aparece encima del titulo de mi pagina como hago para que aparezca debajo de la misma

    ResponderEliminar
  4. Buenas amigo, qué otra animación se le puede colocar? y cómo? así como el que tienes colocado en este blog, muchas gracias!

    ResponderEliminar
  5. Pero no dices como ubicarlo bien. Queda encima del título

    ResponderEliminar
    Respuestas
    1. Hola, con respecto a su pregunta pruebe ubicandolo donde mejor le parezca puede ser debajo del < Body >

      Saludos

      Eliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios