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.
¿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:
- Ir a la plantilla de Blogger>
- Copia de seguridad de su plantilla
- Haga clic en "Editar HTML"
- Justo debajo de la etiqueta <head> pegue los siguientes vínculos de fuente JS y CSS:
<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.
- Ahora vaya a Blogger> Disposición
- Seleccione "Añadir un gadget"
- Elegir gadget "HTML / JavaScript"
- Mantenga el campo de título vacío y luego pegue el código siguiente dentro de él:
<!-- ######### 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! :)
No hay comentarios:
Publicar un comentario