Breaking News Ticker Widget para Blogger - BloggerS Look
Legal Web
home32x32

Legalidad Web
contact32x32

Contacto
web32x32

Cookies
layout_content32x32

Encuesta
Copyrigh32x32

Copyright ©
BloggerS Look professional-blogger-blog%255B5%255D
Blogger0
INSPITATION AND CREATIVITY IN SOCIAL NETWORKS
  • Home
    • demo-image
    Home Slideshows Tickers Breaking News Ticker Widget para Blogger

    Breaking News Ticker Widget para Blogger

    Share This
    El widget Breaking News para los blogs de Blogger es un ticker de noticias jQuery de Blogger gratuito, plano, elegante, moderno, fácil de usar y sensible. Muestra automáticamente los títulos basados en texto de sus últimas publicaciones en una forma de desplazamiento. Es la mejor manera de mostrar su contenido más caliente a los visitantes de su sitio web en su página de inicio de cómo BBC o CNN lo hace! Lo hemos codificado utilizando la API de Feeds de JSON de Blogger y el complemento de jQuery News Ticker.
    ACTUALIZACIÓN: ¡Compruebe el Ticker de Noticias de Headline con ToolTips!
    Algunos sitios como codecanyon están vendiendo News Ticker Plugins a $ 5, pero no solo lo conseguirás gratis en MBT, sino que también aprenderás cómo se codifican estos widgets si lees nuestra serie de JSON Feeds.

    En lugar de usar RSS Feeds para crear un mensaje de desplazamiento, utilizaremos JSON Feeds para crear un News Ticker más avanzado, ligero y dinámico que no sólo mostrará títulos, sino que también mostrará casi todas las informaciones (es decir, Avatar / Comments / Fecha de publicación) Acerca de tu entrada en el blog.
    DEMO
    ¿Qué es un Ticker de noticias?
    Un ticker de noticias es principalmente una presentación horizontal basada en texto. La mayoría de los tickers se muestran tradicionalmente en forma de desplazamiento de texto que se ejecuta de derecha a izquierda en la pantalla. Este término se refiere originalmente a los telediarios de Noticias de Televisión, desplazándose cerca de la parte inferior de la pantalla del televisor. El ticker de noticias de TV permite que se muestren noticias de última hora para el espectador sin interrumpir la emisión actual. Del mismo modo webmasters han adoptado un método similar de mostrar las últimas noticias en su página web. Los últimos titulares de sus sitios web o blog se muestra desplazándose de izquierda a derecha en todo el ancho del sitio para mantener a los visitantes informados sobre la mayoría de contenido actualizado.
    En resumen, es un widget sencillo y práctico que te ayuda a mostrar los últimos titulares de tu sitio web, las últimas actualizaciones o el contenido destacado de una categoría específica.

    Características de Breaking News Ticker Widget:

    Blogger News Ticker es un widget avanzado equipado con estas características:

    • Autor Avatar - Único!
    • Muestra los últimos mensajes de forma dinámica. - ¡Único!
    • Muestra publicaciones recientes de una categoría / etiqueta específica.
    • Desplazamiento de texto con dos animaciones: revelar y desvanecerse
    • Cuenta de comentarios con clics
    • ¡Formato de fecha de encargo - único!
    • La longitud del título es ajustable
    • ¡Completamente adaptable - colores múltiples!
    • Receptivo y móvil amigable.
    • Controla la navegación. Reproducir / Pausa, Siguiente / Anterior
    • Soporta todos los navegadores: Firefox, Chrome, IE, Safari, etc.

    ¡Mucho mas!

    Cómo agregar Widget Ticker Noticias en Blogger?

    Para agregar widget de ticker de noticias en sus plantillas de blogger, siga estos sencillos pasos:

    1. Ir a la plantilla de Blogger>
    2. Copia de seguridad de su plantilla
    3. Haga clic en "Editar HTML"
    4. Justo debajo de la etiqueta <head> pegue los siguientes vínculos de fuente JS y CSS:

    1. <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
      <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
    Siguiente búsqueda]]> </ b: skin> y justo encima de ella pega el siguiente código ::
    /*########Default Newsticker Styles#########*/
    .ticker-wrapper.has-js{margin:20px 0;padding:0 20px;width:780px;height:32px;display:block;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;background-color:#f8f0db;font-size:.75em}
    .ticker{width:710px;height:23px;display:block;position:relative;overflow:hidden;background-color:#f8f0db}
    .ticker-title{padding-top:9px;color:#900;font-weight:700;background-color:#f8f0db;text-transform:uppercase}
    .ticker-content{margin:0;padding-top:9px;position:absolute;color:#1F527B;font-weight:700;background-color:#f8f0db;overflow:hidden;white-space:nowrap;line-height:1.2em}
    .ticker-content a{text-decoration:none;color:#1F527B}
    .ticker-content a:hover{text-decoration:underline;color:#0D3059}
    .ticker-swipe{padding-top:9px;position:absolute;top:0;background-color:#f8f0db;display:block;width:800px;height:23px}
    .ticker-swipe span{margin-left:1px;background-color:#f8f0db;border-bottom:1px solid #1F527B;height:12px;width:7px;display:block}
    .ticker-controls{padding:8px 0 0;list-style-type:none;float:left}
    .ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}
    .ticker-controls li.jnt-play-pause{background-image:url(../images/controls.png);background-position:32px 16px}
    .ticker-controls li.jnt-play-pause.over{background-position:32px 32px}
    .ticker-controls li.jnt-play-pause.down{background-position:32px 0}
    .ticker-controls li.jnt-play-pause.paused{background-image:url(../images/controls.png);background-position:48px 16px}
    .ticker-controls li.jnt-play-pause.paused.over{background-position:48px 32px}
    .ticker-controls li.jnt-play-pause.paused.down{background-position:48px 0}
    .ticker-controls li.jnt-prev{background-image:url(../images/controls.png);background-position:0 16px}
    .ticker-controls li.jnt-prev.over{background-position:0 32px}
    .ticker-controls li.jnt-prev.down{background-position:0 0}
    .ticker-controls li.jnt-next{background-image:url(../images/controls.png);background-position:16px 16px}
    .ticker-controls li.jnt-next.over{background-position:16px 32px}
    .ticker-controls li.jnt-next.down{background-position:16px 0}
    .js-hidden{display:none}
    .no-js-news{padding:10px 0 0 45px;color:#F8F0DB}
    .left .ticker-controls,.left .ticker-content,.left .ticker-title,.left .ticker{float:left}
    .left .ticker-controls{padding-left:6px}
    .right .ticker-controls,.right .ticker-content,.right .ticker-title,.right .ticker{float:right}
    .right .ticker-controls{padding-right:6px}
    /*########Blogger Newsticker by MBT#########*/
    .ticker-wrapper.has-js{margin:0;padding:0;width:98%;height:42px;display:block;border-radius:0;background-color:#fff;border:1px solid #eee;font-size:12px}
    .ticker{width:80%;height:42px;display:block;position:relative;overflow:hidden;background-color:#fff}
    .ticker-title{background:#71db00;padding:10px;color:#FFF;font-size:16px;font-family:oswald;text-transform:uppercase;text-shadow:1px 1px 6px #666}
    .ticker-title:after{left:76px;top:10px;height:0;width:0;position:absolute;content:" ";pointer-events:none;margin-left:0;margin-top:1px;border-left:13px solid #71db00;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999)}
    .ticker-content{background-color:#fff;margin-left:15px;color:#444;margin-top:1px}
    .ticker-swipe{background-color:#fff;position:relative;top:5px;left:100px!important}
    .ticker-swipe span{margin-left:1px;background-color:#fff;border-bottom:1px solid #333;height:12px;width:7px}
    .ticker-controls{padding:0!important;margin:13px 0 0 10px !important;list-style-type:none;position:relative;right:-50px}
    .ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}
    .ticker-controls li a{border:0!important;padding:0!important}
    .ticker-controls li.jnt-play-pause,.ticker-controls li.jnt-play-pause.paused,.ticker-controls li.jnt-play-pause.paused.over,.ticker-controls li.jnt-prev,.ticker-controls li.jnt-play-pause.over,.ticker-controls li.jnt-next{position:absolute;background:none}
    .ticker-controls li.jnt-play-pause:after,.ticker-controls li.jnt-play-pause.over:after{content:"\f04c";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}
    .ticker-controls li.jnt-play-pause.paused:after,.ticker-controls li.jnt-play-pause.paused.over:after{content:"\f04b";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}
    .ticker-controls li.jnt-prev:after{content:"\f04a";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:0}
    .ticker-controls li.jnt-next:after{content:"\f04e";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:3.6em}
    .ticker .iauthor:before,.ticker .icomments:before,.ticker .idate:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}
    .ticker .iauthorpic{width:16px!important;height:16px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}
    .ticker span{padding-right:5px;font-family:Oswald;font-weight:400}
    .ticker .icomments a{color:#71db00;font-size:11px}
    .ticker .icomments a:hover{text-decoration:underline}
    .ticker .icomments:before{content:'\f086';padding:0 3px 0 0;color:#777;position:relative;top:-1px}
    .ticker .idate{font-size:11px;padding-right:7px}
    .ticker .idate:before{content:'\f073';padding:0 5px;color:#777;position:relative;top:-1px}
    .ticker .mbttitle{font-family:oswald;font-size:14px;color:#71db00!important;font-weight:400;text-decoration:none}
    .ticker .mbttitle:hover{text-decoration:underline}
    Realice estos cambios
    Para cambiar el tema de color verde del Ticker de noticias simplemente reemplace los códigos de color resaltados en verde con el color de su elección. El color puede estar en rgb o #hexadecimal, ambos trabajo. Utilice nuestro generador de códigos de colores.

     Guarde su plantilla.

    1. Ahora vaya a Blogger> Disposición
    2. Seleccione "Añadir un gadget"
    3. Elegir gadget "HTML / JavaScript"
    4. Mantenga el campo de título vacío y luego pegue el código siguiente dentro de él:

    1. <!-- ######### Breaking News Ticker By MBT ############# -->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><script src="http://www.jquerynewsticker.com/includes/jquery.ticker.js" type="text/javascript"></script>
      <script type="text/javascript">
      //----------------------------Defaults
      var ListBlogLink = "http://www.mybloggertricks.com";
      var ListCount = 5;
      var TitleCount = 70;
      var ListLabel = "Widgets";
      //----------------------------Function Start
      function mbtlist(json) {
      document.write('<ul id="js-news" class="js-hidden">');
      for (var i = 0; i < ListCount; i++)
      {
      //-----------------------------Variables Declared
      var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";
      //----------------------------- Title URL
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
      break;
      }
      }
      ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
      //----------------------------------- Title Stirng
      if (json.feed.entry[i].title!= null)
      {
      ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
      }
      if (json.feed.entry[i].thr$total)
      {
      ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
      }
      ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
      ListAuthor=ListAuthor.slice(0, 1).join(" ");
      AuthorPic = json.feed.entry[i].author[0].gd$image.src;
      //################### Date Format
      ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
      ListDate= json.feed.entry[i].published.$t.substring(0,10);
                               Y = ListDate.substring(0, 4);
                              m = ListDate.substring(5, 7);
                               D = ListDate.substring(8, 10);
                               M = ListMonth[parseInt(m - 1)];
      //----------------------------------- Printing List
      var listing = "<li class='news-item'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
      +ListAuthor+ "</span> <span class='icomments'>"
      +ListComments + "</span>  <span class='idate'>"
      + D + " " + M + "</span><i class='fa fa-chevron-right'></i> <a class='mbttitle' href="
      +ListUrl+
      "target='_blank'>"
      +ListTitle+
      "</a></li>";
      document.write(listing);
      }
      }
      document.write("</ul><script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");
      /*##########Breaking News Ticker Settings########*/
          $(function () {
              $('#js-news').ticker({
              speed: 0.20,
              controls: true, 
              titleText: 'Hottest',
              displayType: 'reveal',
              pauseOnItems: 2000,  
      });
      });
      </script> 
      Realice estos cambios:
      ListBlogLink: inserta la URL de tu blog aquí
      ListCount: Decida cuántos títulos de ruptura desea mostrar.
      TitleCount: elige el número de caracteres que se mostrarán en la longitud del título de la publicación.
      ListLabel: inserta tu etiqueta de blog aquí. Recuerde que las etiquetas distinguen entre mayúsculas y Por lo tanto, escríbalo exactamente como se muestra en la barra de direcciones del navegador. News Ticker no funcionará si el caso de la etiqueta no es correcto. Editar "Widgets"
      Velocidad: Edite este valor (0.20) para aumentar o disminuir la velocidad de desplazamiento.
      Controles: Establezca true a false si desea ocultar los botones de control, por ejemplo, Play / Pause, Next / Previous
      TitleText: Establecer el título de News Ticker aquí de Hottest a cualquier cosa que te gusta, como último, romper etc
      DisplayType: Hay dos tipos de desplazamiento de animación de texto, revelar o atenuarse. Configure según su preferencia.
      TitleCount: Elige el número de caracteres que se mostrarán en el título de la publicación.
      Si desea mostrar las últimas publicaciones de los titulares de su blog sin mencionar ninguna etiqueta / categoría específica, simplemente quite / - / "+ ListLabel +" del código anterior.
      Haga clic en el botón Guardar y ya está listo para empezar a mostrar animated más títulos de desplazamiento a sus lectores! :)

    ¿Necesitas alguna ayuda?


    Los pasos de instalación anteriores son muy sencillos. Sólo tienes que seguir con cuidado, especialmente teniendo cuidado de la etiqueta de la sensibilidad y también el archivo jQuery. Avísame si necesitas ayuda. Me encantaría ayudarte tan pronto como el tiempo lo permita.
    Realmente aprecio cuando compartes tus comentarios. Por favor, háganos saber lo útil que fue este tutorial para usted y cómo puede este widget de noticias de título genial para bloggerhelp a participar mejor a sus lectores y aumentar sus visitas de página. Estaría esperando para saber de usted.
    El siguiente tutorial se basará en la adición de una descripción de herramientas a este rollo de noticias para que muestre el fragmento de descripción de la imagen más fragmento de descripción, sería una mejora increíble para el diseño actual, así que estad atentos a las actualizaciones! :)
    Tags

    ¡QUE NO SE PIERDAN TUS AMIGOS NINGUNA PUBLICACION!

    MANDALES POR CORREO EL LINK DE ESTE BLOG PARA QUE NOS CONOZCAN

    facebook twitter mail reddit googleplus sticker-155179_1280
    Share This
    Picsart_22-05-30_08-05-35-408

    About G&C.Publicaciones
    Templatesyard is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of templatesyard is to provide the best quality blogger templates which are professionally designed and perfectlly seo optimized to deliver best result for your blog.

    Newer Article Geniales buscadores internos para Blogger Older Article Códigos de bloqueo TOTAL
    By �s icon18_email
    Marcadores: ,
    Suscribirse a: Enviar comentarios (Atom)
    Comment Using!!

    No hay comentarios:

    Publicar un comentario

    Author Details

    Vistas de página en total

    14181
    HOME
    tS9S8GF