Titulares Noticias Widget es un plugin impresionante, super ligero para los blogs de Blogger, que muestra los titulares de sus mensajes recientes como texto en movimiento, flotando de izquierda a derecha. Es un desplazamiento horizontal auto flash los últimos puestos de blogger que es sensible y automático. Está construido usando
Desplazamiento widget de noticias del título sin duda hace que su destacado textos de introducción y notables tan pronto como un usuario accede a su blog. Es la mejor manera de atraer a los visitantes atracción hacia el contenido que se presenta.
Demostración
¿Qué es una Titulares Noticias Widget para Blogger?
Widget de titulares de noticias es básicamente una barra de noticias plugin que muestra titulares más recientes de tu blog blogspot como un texto de desplazamiento horizontal. Es la primera barra de noticias de este tipo de blogs de Blogger que no sólo muestran sus enlaces de títulos como teletipos comunes que se encuentran en toda la web, pero también muestra información posterior, tales como:- Nombre del autor
- autor Avatar
- comentarios Enlace
- Cuenta de los comentarios
- Fecha de Publicación
- Thumbnail
- Descripción del poste / fragmento Resumen
Siga estos sencillos pasos:
- 1- Ir a Blogger> Plantilla
- 2- Copia de seguridad de su plantilla
- 3- Haga clic en " Editar HTML "
- 4- Justo debajo de <head>la etiqueta pegar los siguientes enlaces JS y CSS de fuente:
<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'/>- 5- Búsqueda siguiente ]]></b:skin> y justo encima de él pega el siguiente código
/*--------------Titulares Noticias Widget por bloguero-tutoriales.blogspot.com----------*/
.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:#FED000}
.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}
/*########Estilo por Defecto por bloguero-tutoriales.blogspot.com#########*/
.ticker-wrapper.has-js{margin:0 0 -200px;padding:0;width:100%;min-height:42px;display:block;border-radius:0;background-color:#292929;border:0 solid #eee;font-size:12px;}
.ticker{width:80%;height:42px;display:block;position:relative;overflow:visible;background-color:#292929}
.ticker-title{background:#000000;padding:9px 10px;color:#FFFFFF;font-size:16px;font-family:oswald;text-transform:uppercase;text-shadow:1px 1px 6px #666}
.ticker-title:after{left:70px;top:10px;height:0;width:0;position:absolute;content:" ";pointer-events:none;margin-left:0;margin-top:1px;border-left:13px solid #000000;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999)}
.ticker-content{background-color:#292929;margin-left:18px!important;color:#FFF;margin-top:1px!important;overflow:visible!important; padding-top: 2px!important;}
.ticker-controls{padding: 0px!important;margin: 17px 0 0 10px!important;list-style-type:none;position:relative;right:-100px}
.ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}
.ticker-controls li a{border:0px!important; padding:0px!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:#FED000;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:#FED000;font-family:fontAwesome;position:relative;left:1.8em}
.ticker-controls li.jnt-prev:after{content:"\f04a";font-size:13px;color:#FED000;font-family:fontAwesome;position:relative;left:0}
.ticker-controls li.jnt-next:after{content:"\f04e";font-size:13px;color:#FED000;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:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin-right:3px;position:relative;
top: 6px;border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
padding: 3px;
}
.ticker span {padding-right:5px; font-family:Oswald; font-weight:normal}
.ticker .icomments a{color:#FED000;font-size:11px}
.ticker .icomments a:hover{text-decoration:underline}
.ticker .icomments:before{content:'\f086';padding:0 3px 0 0px;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:#6aff21!important;font-weight:400;text-decoration:none;}
.ticker .mbttitle:hover{text-decoration:underline}
/*------ CSS3 Tooltip por bloguero-tutoriales.blogspot.com -------------*/
.ticker .tooltip{outline:none;text-decoration:none!important;position:relative}
.ticker .tooltip strong{line-height:30px}
.ticker .tooltip > span{width:290px; white-space: normal; padding:15px 15px 0px 15px;opacity:0;top:170%;visibility:hidden;z-index:10;position:absolute;font-family:Arial;font-size:12px;font-style:normal;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}
.ticker .tooltip > span img{float:right;width:130px;margin:0 0 30px 10px;padding: 0;border: none;}
.ticker .tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:0px}
.ticker .tooltip span b{width:15px;height:15px;margin-left:20px;bottom:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}
.ticker .tooltip > span{color:#FFFFFF; background:#292929;border:1px solid #000000}
.ticker .tooltip span b{margin-top:-19px;top:10px;background:#FED000;border-top:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000;border-left:1px solid #000000}
@media only screen and (max-width:480px) {
.ticker-content {margin-left: -5px!important;padding-top: 4px!important;}.ticker-title{font-size:10px!important;padding:5px!important;}
.ticker-controls, .ticker .icomments, .ticker .idate, .ticker .iauthor, .ticker .iauthorpic, .ticker-title:after {display:none;}} Hacer estos cambios personalizados:
Para cambiar el tema de color verde de la News Ticker simplemente sustituir el CÓDIGO #f8f0db, #0D3059 Y todos los códigos de color que inicien con este simbolo # destaco códigos con el color de su elección, en esta ocasión es de colores variados es según la personalización que tengas en mente. Utilizar este generador de código de color .
- 6- Guardar la plantilla.
- 7- Ahora ve a Blogger> Diseño
- 8- Seleccione " Añadir un gadget "
- 9- Seleccione la opción " HTML / Javascript " adminículo
- 10- Mantenga el campo título vacío y pegue el siguiente código en su interior:
<!-- ######### Noticias por bloguero-tutoriales.blogspot.com ############# -->
<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>
<!-- ######### Escritura de la función de devolución de llamada ############# -->
<script type="text/javascript">
//----------------------------Defaults
var ListBlogLink = "http://www.moviecoleccion.com";
var ListCount = 15;
var TitleCount = 70;
var ListLabel ="Widgets";
var ChrCount = 140;
var ImageSize = 200;
//----------------------------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;
//################### Chequeo de Contenido
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
//################### Datos del Formato Fechas
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)];
//################### Thumbnail Check
if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}
// YouTube scan
else if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{
var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
if (youtube_id.length == 11) {
var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
}
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
// Support For 3rd Party Images
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM1-DqJDSxtFIT6LnsLeOKttT9o1Q6L5kNn5tjk3HGqjSM1B8zOCiUwV9mN8b1gxx1J-CDlh5hMXlsmPIyG1A4XwVSYeRcObUea-RkCohYQh4Pr-Vkm6Sqj1iC8-gB1Do2ifKPWxGTrEY/s200/Icon.png'";
}
//----------------------------------- 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 tooltip' href="
+ListUrl+
"><span><b></b><img src="
+ListImage+
"/>"
+ListContent+
" →</span>"+ListTitle+"</a></li>";
document.write(listing);
}}
document.write("</ul><script src='"+ListBlogLink+"/feeds/posts/default?alt=json-in-script&callback=mbtlist'></"+"script>");
/*##########Configuración de las nuevas etiquetas########*/
$(function () {
$('#js-news').ticker({
speed: 0.10,
controls: true,
titleText: 'Movies',
displayType: 'reveal',
pauseOnItems: 2000});
});
</script>Hacer estos cambios:
- ListBlogLink : Introduzca la URL de su blog aquí? Cambiar wwwmoviecoleccion.com por su la URL de tu blog
- ListCount : decidir el número de titulares es lo que desea mostrar.
- TitleCount : Elija el número de caracteres que se mostrarán en la longitud título de la entrada.
- ListLabel : Insertar la etiqueta de su blog aquí. Recuerde que las etiquetas son sensibles a mayúsculas. Por lo tanto escribirla exactamente como se muestra en la barra de direcciones del navegador. News Ticker no funcionará si el caso de la etiqueta no es correcta. En este caso si Deseas que aparezca tu etiqueta definida en la parte: /feeds/posts/default Aumenta delante de el el siguiente código: /-/"+ListLabel+" Y donde dice ListLabel colocas tu etiqueta por ejemplo 2017
- ChrCount : Establecer la longitud de la descripción post aquí.
- ImageSize : resolución de imagen Set (relación de aspecto) aquí.
- velocidad: Editar este valor ( 0.20 ) para aumentar o disminuir la velocidad de desplazamiento.
- controles: Conjunto verdadero a falso si desea ocultar los botones de control, es decir, Reproducir / Pausa, Siguiente / Anterior
- TitleText: Establecer el título News Ticker aquí desde Titulares de que algo así como el más reciente, más caliente , etc.
- displayType: Hay dos tipos de animación de texto desplazable, reveal o fade . Configurarlo según sus preferencias. yo recomiendo reveal
- 11- Haga clic en Guardar botón y que está todo hecho.
Disfrutar mostrando más animada desplazamiento titulares de noticias a sus visitantes!
Author : Bloguero Tutorial
Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. ,
click aquí ?
Ticket de Noticias de última hora para bloguer con Tooltips.
Tu mensaje sera visible tras la aprobación del administrador