En este tutorial te mostare el truco de insertar una barra de Noticias .Está se ha convertido en el requisito básico de cada blog. Para que nuestra comunidad de blogs sea mas confiable es esencial que mantengamos nuestros lectores al día y barra de noticias es la mejor manera de hacer eso.
Podemos utilizar el News Ticker para brindar actualizaciones frecuentes para nuestro lector con sólo unos clics. Todos hemos visto muchos tickers de noticias en los blogs, que son hospedados por WordPress pero Blogger, no es conocido por tener plugins y esta es la razón por la que utilizamos los widgets de fuente externa en blogger.
Chequea Reloj Acrobatico para Blogger
Y hoy vamos a seguir la misma tendencia para agregar un desplazamiento Animado con jQuery titulado Widget de Barra de Noticias para Blogs de Blogger Blogspot.Para verlo en vivo da clic Aqui
Nombremos las Caracteristicas de este News Ticker.
1.Fácil de integrar en un documento HTML2.Compatible con Internet Explorer, Firefox, Chrome y etc
3.Completo JavaScript: ninguna plugin, no Java, ActiveX no
4.Soporta HTML, incluyendo imágenes, links y demás etiquetas
5.Desplazamiento suave
6.Muy pequeño script - rápido para descargar
7.Fácil de personalizar
8.Detiene el desplazamiento cuando el ratón está sobre ella
Como Añadir este News Ticker en Blogger
Para insertar Desplazamiento con jQuery deNews Ticker en Blogger solo Sigue estos pasos.Paso # 1: Ir a Blogger.com >> Tu Blog
Paso # 2: Diseno >> Añadir un gadget
Paso 3: Selecciona Html / Javascript y pega el siguiente codigo.
<div id="TICKER" style="display:none; border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; overflow:hidden; background-color:#FFFFFF; width:520px" onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false"><span style='background-color:#7FB51A;'> <a href="Url-De-Tu-Primer-Titular"> <font color=#ffffff> <b>Tu-Primer-Titulo-Titular-Aqui</b></font> </a></span> <b>Tu-Primera-Descripcion-Titular</b> <span style='background-color:#FFAA00;'> <a href="Url-De-Tu-Segundo-Titular"> <font color=#ffffff> <b>Tu-Segundo-Titulo-Titular-Aqui</b></font> </a></span> <b>Tu-Segunda-Descripcion-Titular</b> <span style='background-color:#0088FF;'> <b><a href="Url-De-Tu-Tercer-Titular"><font color=#ffffff>Tu-Tercer-Titulo-Titular-Aqui</font></a></b> </span> <b>Tu-Tercer-Descripcion-Titular</b>
<script type="text/javascript" src="https://googledrive.com/host/0B0DJgT4v15seSHBpOVViRFRmYUE" language="javascript"></script></b></span></div></b:if></b:if>
Instrucciones para personalizar este widget.
Para el Primer Titular:
Reemplace Url-De-Tu-Primer-Titular con la direccion URL de tu primer titular.
Reemplace Tu-Primer-Titulo-Titular-Aqui con el titulo de entrada titular
Reemplace Tu-Primera-Descripcion-Titular con una pequena descripcion del titular
Para cambiar colores simplemente reemplace #7FB51A y #ffffff
Para El Segundo Titular:
Reemplace Url-De-Tu-Segundo-Titular con la direccion URL de tu segundo titular de entrada.
Reemplace Tu-Segundo-Titulo-Titular-Aqui con el titulo del titular de entrada.
Reemplace Tu-Segunda-Descripcion-Titular con una pequena descripcion de tu titular.
Para cambiar colores simplemente reemplace #7FB51A y #ffffff
Para el Tercer Titular:
Reemplace Url-De-Tu-Tercer-Titular con la direccion URL de tu tercer entrda titular.
Reemplace Tu-Tercer-Titulo-Titular-Aqui con el titulo titular de la entrada
Reemplace Tu-Tercera-Descripcion-Titular con una pequena descripcion de tu titular
Para cambiar colores simplemente reemplace #7FB51A y #ffffff
Para cambiar el ancho de este ticker reemplace 520px
Recuerda: Si quiere añadir más Titulares en tu ticker luego justo antes de <script type = "text / javascript" Agregue el siguiente código y esto se sumará un titular mas en su ticker.
<span style='background-color:#7FB51A;'> <a href="Url-De-Tu-Titular"> <font color=#ffffff> <b>Tu-Titulo-Titular-Aqui</b></font> </a></span> <b>Tu-Descripcion-Titular</b>
Paso # 4: Ahora, después de la personalización de su ticker Pulse el botón Guardar y ahora ir a su blog y disfrutar de Desplazamiento Jquery News Ticker.
Chequea Articulo Como Añadir Zoom Efect a Imagenes en Blogger
0 comentarios:
Publicar un comentario