Añade a tu sitio web un rotulo de noticias animado con JQuery informa a tus visitantes (Blogger)

Hace unosdíasme pidieron que publique elcódigofuente del rotulo de noticias que tengo en la cabecera del blog ,bastante bueno yfácilde instarla y de personalizar si lo ven un poco simple ya queda a gusto de ustedes.

Dirigase a Plantilla--Editar HTML--clic dentro del editor de blogger y luego realice lacombinaciónde teclas CTRL-F ,esto es para abrir el buscador dentro del editor y no afuera en el navegador ,una vez abierto busque la etiqueta de cierre/b:skin y arriba de esta etiqueta pegue el siguientecódigocss.

.contenedor{
width:800px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
#conte_noticia { 
width:auto; 
height:120px; 
margin:20px auto; color:#000;
-webkit-box-shadow:0 0 5px #fff; 
-moz-box-shadow:0 0 5px #fff; 
box-shadow:0 0 5px #fff; 
}
.noticia { 
display:none; 
float:left;
height:69px;
background-color:#ffffff; 
margin-left:-10px;
margin-top:14px; 
padding:7px; 
box-shadow: 0px 0px 5px #000;
}
.noticia:after{
content:"";
position:absolute;
margin-left:-7px;
margin-top:32px; 
float:left;
border-top:10px solid #1067dd;
border-right:20px solid transparent;
width:0px;
height:0line-height:0;
} 
.noticia p { 
font-size:18px; 
font-family: "wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", 
"wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana,sans-serif;     
color:#0a0a0a;
text-align:left;
} 
.noticia .author { 
margin:5px 0px;
font:13px Georgia,serif,Times; 
color:#1572e4;
padding-top:1px; 
text-align:left;
}
.noticiamark { 
display:none; 
float:left; 
letter-spacing:-35px; 
line-height:300px; 
color:#0a0a0a;
}
.rightnoticia {
margin-right:auto;
margin-left:auto;
}
.rightnoticia img{
margin-bottom:80px;
width:55px;
height:55px;
border:solid 2px #ffffff; 
border-radius: 50%;
background-color:#cccaca; 
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7);
box-shadow: 0 0 3px rgba(0, 0, 0, .7);
margin-left:auto;
margin-right:auto;
}  

Paso 2) Añadir el Codigo JavaScript
terminado el paso 1, busque la etiqueta de cierre/head justo arriba de esta etiqueta pegue el siguiente codigo JS.

  
var noticiaSpeed = 500;
// Velocidad del recipiente noticia para ampliar
var noticiaContainerSpeed = 1000;
// Tiempo de la noticia que será visible
var shownoticiaSpeed = 5000;
// Tiempo de la pantalla estará vacía
var cleanScreenSpeed = 500;
// Ancho de la caja noticia
// Sería genial para crecer automáticamente al tamaño del texto que contiene en el futuro.
var conte_noticiaWidth = "600px";
// La noticias que nos va a mostrar
var noticias = [ {
  "noticia" : "Para copiar cualquier contenido,utiliza CTRL-C.",
  "author" : "by- Hannibal T"
 }, {
  "noticia" : "Esta Website funciona mejor con,Navegadores Actualizados.",
  "author" : "by- Hannibal T"
 }, {
  "noticia" : "Casi todos los enlaces de descarga, estan actualizados :D",
  "author" : "by- Hannibal T"
 }, {
  "noticia" : "Si existe un enlace que no funciona,avisame..!!",
  "author" : "by- Hannibal T"
 }, {
  "noticia" : "Comparte las entradas,con tus amigos..!!",
  "author" : "- Hannibal T"
 }, {
  "noticia" : "Muy pronto cuenta premiun en MEGA",
  "author" : "- Hannibal T"
 }, {
  "noticia" : "Nueva Plantilla ModernFace 3D ,mejor interactividad",
  "author" : "- Hannibal T"
 }
 
];
var currentnoticiaIndex=0;jQuery.noConflict();jQuery(document).ready(function(){if(jQuery.browser.webkit){jQuery(".noticiamark").css({"margin-top":"-22px"});jQuery(".rightnoticia").css({"margin-top":"-24px"})}startAnimation()});var startAnimation=function(){setTimeout(function(){showLeftnoticia()},noticiaSpeed)};var showLeftnoticia=function(){jQuery(".leftnoticia").show();setTimeout(function(){showRightnoticia()},noticiaSpeed)};var showRightnoticia=function(){jQuery(".rightnoticia").show();setTimeout(function(){shownoticiaContainer()},noticiaSpeed)};var shownoticiaContainer=function(){jQuery(".rightnoticia").css({"margin-left":"-10px"});jQuery("").html(noticias[currentnoticiaIndex].noticia).css({display:"none"}).appendTo(jQuery(".noticia"));jQuery("

").addClass("author").html(noticias[currentnoticiaIndex].author).css({display:"none"}).appendTo(jQuery(".noticia"));jQuery(".noticia").show().animate({width:conte_noticiaWidth},noticiaContainerSpeed,function(){shownoticia()})};var shownoticia=function(){jQuery(".noticia").children().fadeIn();setTimeout(function(){clearnoticia()},shownoticiaSpeed)};var clearnoticia=function(){if(currentnoticiaIndex==noticias.length-1){currentnoticiaIndex=0}else{currentnoticiaIndex++}jQuery(".noticiamark").fadeOut();jQuery(".noticia").fadeOut(function(){jQuery(".rightnoticia").css({"margin-left":"0px"});jQuery(".noticia").empty().css({width:"0px"});setTimeout(function(){startAnimation()},cleanScreenSpeed)})};
  

por el momento usted vera 7 noticias escritas que puede reemplazar y si quiere agregar mas noticias debera de tener en cuenta lo siguiente: al ser una matriz tenga mucho cuidado con las llaves ,para agregar otra notifica deberá de colocar la coma "," en el cierra de la ultima "}" noticia es decir:

var noticias = [
           {
  "noticia" : "Nueva Plantilla ModernFace 3D ,mejor interactividad",
  "author" : "- Hannibal T"
 }, {
  "noticia" : "Nueva Plantilla ModernFace 3D ,mejor interactividad",
  "author" : "- Hannibal T"
 }
];

Paso 3) Añadir la estructura o Html
terminado el paso 1 y 2 guarde los cambios , le recuerdo que este script funciona con el plugin de jQuery debera de tenerlo instalado.
Dirigase a Diseño--Añadir un Gadget -- escoja laopciónHTML/JavaScript y pegue el siguiente codigo HTML.

div class='contenedor'
!--ROTULO NOTICIAS--
       div id="conte_noticia"
   p class="noticiamark leftnoticia"/p
   div class="noticia"
            /div
   p class="noticiamark rightnoticia"
             img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjp-wSGz5Z4x6Oct69od29rfw56T-TVRDPWTu1aYfWw8ovqfCgtiLhE5GTsnn9OHO1qy3MjG1pRNWqbxamDzYG7MfsDhjzdCk6-7gIaIBCdNT8A0-VzAc3H4CQVVRbIA4_bJ1Wi0eKhjE/s86/FACE.png'/
            /p
  /div
!--FIN--
/div