Buenas!! Como te va tanto tiempo. La verdad que en estos tiempos de brindis, reposo, meditación, propicio para repasar proyectos y otras cositas uno descuida algunas cosas, como este blog.
Asi que me voy poniendo al día con ustedes.
Esta vez vamos a hacer otro cartelito bonito. Siempre nos pasa en el blog que queremos decir algo y que se note, una cita, un mensaje o saludo y le buscamos la vuelta para que se note.
Creo que con este cartel vamos a poder cumplir ese objetivo.
Se trata de estos tres:
►Paso 1:
En edición HTML busca en la plantilla <head> y después pega lo siguiente.
►Paso 2:
Guardar plantilla y vas a elementos de página y añadís un elemento HTML/Javascript pegando lo siguiente:
Hay tres motivos de cartel, blanco, celeste y negro.
Blanco:
Celeste:
Negro.
Mirá bien estos códigos que no es difícil usarlos.
Dos aclaraciones que espero le prestes atención:
1) No lo pongas en una entrada que no funciona.
2) Si estas usando blockquote en tu hoja de estilo no funca.
►Demo
Cartel para mensajes II
Agregar franja arriba del blog
Te dejo dos modelos de franja. Truquito feliz que le da buen diseño al blog y te sirve para resaltar algo que te interese.
Va en lugar de la barra blogger.
►Busca <head> y justo abajo pone lo siguiente:
[Amarillo]
[Negro]
►Detalle:
background-color: Fondo
color: Color de texto
border-bottom: Borde de abajo
border-top: Borde de arriba
Generar reflejo online
Podes crear reflejo de una imagen desde la web, sin necesidad de tocar tu plantilla.
Tenes que entrar:
►Manos a la obra:
Es muy simple, podes elegir la URL de una imagen o simplemente subirla de tu compu, el tamaño no debe superar los 200 kb, asi que usa las que son JPG.
Abajo elegís tamaño y color del reflejo. Le das generate y una vez que se cargo descargas con download.
Saludos!
Textarea con imagen de fondo.
Esta forma de subir texto al blog es muy practica. podes poner listas dentro de la caja entre otras cosas.
Lleva como fondo una imagen o simplemente podés ponerle color.
Primero tenes que ubicar en tu plantilla <head> y a continuación pega:
Guardas plantilla y vas a añadir elemento de página / HTML/Javascript y pegas el contenido:
►Configuración:
background-image: Va la imagen de fondo
height: 150px; La altura
width: 190px; El ancho
►Demo: Miralo en [Acción]
Contenido deslizante
Solo tenes que pegar dos códigos en la plantilla y después desde añadir elemento de página subís este bonito slider.
►Comenzamos
Primero busca esto ]]></b:skin> y antes pega el siguiente código:
Mira que en el código te digo lo más importante para configurar sus formas.
►Paso 2
Ahora busca </head> y antes pega:
►Ahora lo mejor: subirlo.
Después de guardar plantilla vas a elemento de página, añadir, HTML/Javascript y usa lo siguiente:
Te lo dejo con las fotos para que te sea fácil armarlo.
►Consideraciones de configuración:
- En este último código verás donde puse las fotos:
<img src="http://img143.imageshack.us/img143/1935/79866964ng9.jpg"/>
</div>
Podes poner todas las que te de la caja, no hay problemas.
Si lo usas para poner texto va asi:
<div class="contentdiv">
Tu texto bonito...
</div>
- Cuando pones fotos en lo único que te tenes que esmerar es en su tamaño.
width: 350px;/*ancho*/
height: 200px;/*alto*/
Entonces las fotos que pongas dentro de la caja deberán ser del mismo tamaño.
Queres programas gratis para configurar fotos? Listo, busca [ACA]
- La numeración se va dando sola, de eso no te preocupés.
Dale, proba que no es complicado y queda bien.
Bordes. [Siete formas]
Nota: Esta es otra manera de escribir y hacer que nuestro blog, además de las ideas que le ponemos, las historias propias y ajenas, etc., se vea lo más bonito posible. Esa es la idea nada más y nada menos. Nota: Esta es otra manera de escribir y hacer que nuestro blog, ademas de las ideas que le ponemos, las historias propias y ajenas, se vea lo más bonito posible. Esa es la idea nada más y nada menos.
Viste la nota simple de arriba. Pero si le agregamos bordes vos haces que resalte mejor.
Te dejo siete maneras de hacer que una cita, nota o mensaje se vea mejor con bordes.
Siempre el primer código va después de <head>.
[+/-]Abrir código
<style type='text/css'>
p.one
{
border-style: solid;
border-top-width: 15px
}
</style>
El texto va entre: <p class="one">.............</p>
Nota: Esta es otra manera de escribir y hacer que nuestro blog, ademas de las ideas que le ponemos, las historias propias y ajenas, se vea lo más bonito posible. Esa es la idea nada más y nada menos.
[+/-]Abrir código
<style type='text/css'>
p.linea
{
border-left: medium solid #ff0000
}
</style>
El texto va entre: <p class="linea">............</p>
Nota: Esta es otra manera de escribir y hacer que nuestro blog, ademas de las ideas que le ponemos, las historias propias y ajenas, se vea lo más bonito posible. Esa es la idea nada más y nada menos.
[+/-]Abrir código
<style type="text/css">
p.s
{
border-bottom: medium solid #ff0000
}
</style>
El texto va entre: <p class="s">.................</p>
Nota: Esta es otra manera de escribir y hacer que nuestro blog, ademas de las ideas que le ponemos, las historias propias y ajenas, se vea lo más bonito posible. Esa es la idea nada más y nada menos.
[+/-]Abrir código
<style type="text/css">
p.l
{
border-style: solid;
border-left-width: 15px
}
</style>
El texto va entre:<p class="l">...............</p>
Nota: Esta es otra manera de escribir y hacer que nuestro blog, ademas de las ideas que le ponemos, las historias propias y ajenas, se vea lo más bonito posible. Esa es la idea nada más y nada menos.
[+/-]Abrir código
<style type="text/css">
p.three
{
border-style: solid;
border-color: #800000 #008000 #3366FF
}
</style>
El texto va entre:<p class="three">..........</p>
Nota: Esta es otra manera de escribir y hacer que nuestro blog, ademas de las ideas que le ponemos, las historias propias y ajenas, se vea lo más bonito posible. Esa es la idea nada más y nada menos.
[+/-]Abrir código
<style type="text/css">
p.uno
{
border-style: solid;
border-left-color: #ff0000
}
</style>
El texto va entre:<p class="uno">..........</p>
Nota: Esta es otra manera de escribir y hacer que nuestro blog, ademas de las ideas que le ponemos, las historias propias y ajenas, se vea lo más bonito posible. Esa es la idea nada más y nada menos.
[+/-]Abrir código
<style type="text/css">
p.dotted {border-bottom-style: dotted}
</style>
El texto va entre:<p class="dotted">..........</p>
Buena suerte!!!
Problemas con el "siga leyendo"
Muchos usuarios de blogger en estos días tuvimos problemas con el truco "siga leyendo".
Cuando hacíamos clic no nos hacia caso el muy turro jaja.
O cuando entramos al panel nos aparecía un cartel que blogger nos avisaba de algo:
Pero no se hagan problemas amigas y amigos. Gem@ nos da la solución:
Tenemos que reemplazar este código:
Por este:
Muchas gracias gem@!!! brillante..
Pasen y vean....
Música al abrir el blog
Esta es una página para cargar temas que te gusten y subirlos a tu blog.
Podemos subir los temas que tengamos en nuestra compu para que se escuchen al abrir el blog.
Veamos paso a paso:
1) Debemos registrarnos en Sign in
2) Después elegimos Jukebox para la música.
Verán que hay dos opciones más. Una para Fotos y otra para videos.
3) Cargamos el tema que tengamos en examinar y hacemos clic en Get It.
Hay lugar para subir cuatro temas.
4) Cuando se cargo verán que aparece el tema a un lado. Luego van a continue
5) Eligen el Skin, tienen 27 modelos. También pueden configurar el tamaño. Arriba tienen la vista previa. Una vez hecho van a continue
Mientras suban el volumen que ya pueden escuchar la musiquita que subiste.
6) A continuación podemos darle un titulo al álbum que creamos, luego tenemos el código para pegar en nuestro querido blog.
Buena suerte!!!
Nube de etiquetas
Si bien hay muchos colegas que lo han explicado, y muy bien, nunca había podido porque no tenia el último código.
Paso a Paso:
En edición HTML. Descargamos plantilla completa por las dudas.
Marcamos: Expandir plantillas de artilugios.
Buscamos:
]]></b:skin>
Y antes pegamos este código:
[+/-]Abrir código 1
/* Etiquetas
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
[+/-]Abrir código 2
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
<b:widget id='Label1' locked='false' title='Etiqueta' type='Label'>
<b:includable id='main'>
<div id='menu4'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>
Si tu plantilla no coincide vos tenes que ver que este "widget" que te marqué en rojo.Lo reemplazas por este:
[+/-]Abrir código 3
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Ahora en vista previa, y si tenemos habilitada las etiquetas, ya tendríamos que estar viéndolo.
Lo vas a ver de un color que por allí no pega con tu plantilla pero a no desesperar que se puede configurar cambiando los colores y tamaño de letra desde aca:
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
El color está en formato RGB [188,138,104]que lo podes tener ACA:
Una bella entrada con "pullquote"..
Puse como ejemplo esta canción.
Luis Eduardo Aute
La belleza !!!
Míralos como reptiles,
al acecho de la presa,
negociando en cada mesa
ideologías de ocasión;
siguen todos los raíles
que conduzcan a la cumbre
locos porque nos deslumbre
su parásita ambición.
Antes iban de profetas
y ahora el éxito es su meta...
Antes iban de profetas
y ahora el éxito es su meta;
mercaderes, traficantes,
más que náusea dan tristeza,
no rozaron ni un instante
la belleza...
Y me hablaron de futuros
fraternales, solidarios,
donde todo lo falsario
acabaría en el pilón.
Y ahora que se cae el muro
ya no somos tan iguales
tanto tienes, tanto vales
¡viva la revolución!
Reivindico el espejismo
de intentar ser uno mismo,
ese viaje hacia la nada
que consiste en la certeza
de encontrar en tu mirada
la belleza...
Se hace asi:
Agregá esto a la hoja de estilo de tu plantilla:
/* Para resaltar texto */
.pullquote
{width: 150px;
background:#EBE4C9;
font-size: 13px;
color:black;
float: right;
border:3px Ridge #5D2E14;
font-weight:bold;
line-height:100%;
padding:10px;
margin-top:10px;
margin-left:10px;
}
Como veras lo podes ir configurando a gusto.
Y en la entrada trabajas con el texto a resaltar.
Usas esto:
<p class="pullquote">
Aca va el texto que sale en el recuadro
</p>
Si algo no se entiende preguntá nomas.
Generar imagen animada
Una cosa que se consulta mucho es en relación a la creación de banner.
Una imagen con la que nos puedan enlazar o con la que podamos presentar nuestro querido blog.
Encontré una página que nos ayuda a crear imágenes animadas
Mirá
Para generarlas entra aca:
Acordate de una cosa:
Podes achicar la imagen
Agregandole alto y ancho
<img src="url de la imagen" height="40" width="200" />
Darle forma a la linda etiqueta !!!
Se acuerdan de está etiqueta bonita, que nos sirve para adornar nuestros post, entre otras cositas.
Vamos a agregarle algunas cosas:
Centrar el titulo o poner a la derecha.
Hacer que el recuadro sea más vistoso.
Para darle ubicación al titulo debemos agregarle este código que está en rojo:
<fieldset>
<legend align=center>Que bueno seria</legend>
Que seamos cada día mejores y mucho menos egoistas.
</fieldset>
si queres que el titulo quede a la derecha pone: right
Para que la linea sea más bonita pongamos entre <head> ........</head>esto:
fieldset {
border: 3px double #FF6600;
}
Lo que está en rojo es para darle color y forma a la linea
Entonces queda asi:
Agregar noticias Google al blog !!!!
Mirá abajo. Vas a ver la barra de noticias de Google.
Se puede configurar sobre que queres recibir noticias.
Para tenerla tenes que ingresar aquí:
Configuración:
Primero definís la orientación: Horizontal o vertical.
Después especificas los temas que te interesan tener. Se separan con comas.
Mirá en vista previa como va quedando
Ingresas la dirección del blog
Y por último generas el código. Hay que estar registrado a google.
El código (en verde) lo pegas en tu plantilla o lo añadis como elemento de página en la nueva versión de blogger.
Poner un traductor en el blog !!!!
Con este traductor de google podes traducir tu blog a nueve (9) idiomas.
Si, viste bien, nueve idiomas. Si alguno te parece que está de más lo sacas y listo.
Aca te dejo el código:
Se instala desde añadir elemento de página, HTML/javascript
Enlaces en la misma página !!!
Abran visto el "mapa del blog" que está alli arriba.
Son enlaces que se pueden hacer en la misma página. Los que pasan con poco tiempo tienen a mano este detalle que pueden navegar mejor dentro del blog si a eso le sumamos el boton "subir" tu blog en más cómodo.
Un dato bueno es que anda en los navegadores Firefox y Explorer.
Como te decia son enlaces que se hacen asi:
Primero pones el enlace de referencia
<a href="#1">Ir a mi casa</a>
Después el de destino
<a id="1"/>Mi casa</a>
El carácter numeral (#) no puede faltar y luego le das un nombre que tiene que ser igual en los dos lados. Yo puse números para que me sea más fácil.
Nota: "Ir a mi casa y Mi casa" lo puse como ejemplo, vos pones lo que quieras.
El Youtube de la Música !!!
Otra herramienta muy útil para poder agregar música a nuestro blog.
Se trata de GoEar:
Aca vas a poder subir tus canciones a gusto y publicarlas con el código html que te da.
Primero hay que registrarse con un formulario muy sencillo:
Completado este tramite hacemos clic en upload para subir el tema que nos guste. Completamos Titulo, etc y en examinar nos metemos en nuestra compu para buscar el temita:
Y listo, nos da el resultado y un vinculo para escuchar lo que cargamos:
música y código a la vista: (Tuyo siempre)
Caja de contenidos muy útil !!!!
Como abran visto en mi blog principal hay una cajita muy buena, donde muestro el contenido de mi blog, que se corre con solo posar el mause sobre una flechita.
Les comento que es muy simple subirla al blog y configurarla.
Como siempre pongo el código primero y luego como se configura.
Código:
<script type="text/javascript">
iens6=document.all||document.getElementById
ns4=document.layers
//specify speed of scroll (greater=faster)
var speed=5
if (iens6){
document.write('<div id="container" style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:170px;left:0;top:0">')
}
</script>
<ilayer name="nscontainer" width=175 height=160 clip="0,0,175,160">
<layer name="nscontent" width=175 height=160 visibility=hidden>
<!--aca va el contenido-->
<h4><b>Contra el maltrato</b></h4>
<P ALIGN="left">El Congreso empieza la discusión de la ley para Prevenir, Sancionar y Erradicar la Violencia contra las Mujeres. El proyecto amplía los posibles denunciados a novios y ex novios, además de cónyuges, e incorpora los daños psicológicos, penando los tratos humillantes, los celos excesivos, la intimidación y el chantaje<br>
<a style="color: rgb(255, 0, 0);" href="http://www.pagina12.com.ar/diario/elpais/1-77594-2006-12-12.html" target="_blank">Siga Leyendo</a></P>
<!--fin de contenido-->
</layer>
</ilayer>
<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>
<table width="175px"><td><p align="right">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)">[Bajar]</a>
<a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)">[Subir]</a></p></td>
</table>
<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}
function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}
function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}
function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>
document.write('<div id="container" style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:160px;left:9;top:1">')
Aqui se puese configurar el color de fondo, tamaño y color del borde, entre otras cosas.
Donde dice, en el código, subir y bajar lo pueden suplantar por la imagen de una flechita.
A modo de ejemplo en el contenido puse una nota de actualidad, que ojala se le de algo de pelota a este tema.
Imagenes o texto que pasa !!!!
Como verán en "la cajita feliz" esta la muestra.
Es un recurso muy útil para poner link o imágenes.
No es difícil hacerlo.
Tenes que pegar los códigos que te doy a continuación.
Este código lo pegas despues de <head>
<style type="text/css">
#marqueecontainer{position: relative;width: 175px; /*marquee width */height: 170px; /*marquee height */background-color: Sienna4;overflow: hidden;border: 3px solid Red;padding: 2px;padding-left: 4px;}
</style>
<script type="text/javascript">
var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
////NO TOCAR A CONTINUACIÓN////////////
var copyspeed=marqueespeedvar pausespeed=(pauseit==0)? copyspeed: 0var actualheight=''
function scrollmarquee(){if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"elsecross_marquee.style.top=parseInt(marqueeheight)+8+"px"}
function initializemarquee(){cross_marquee=document.getElementById("vmarquee")cross_marquee.style.top=0marqueeheight=document.getElementById("marqueecontainer").offsetHeightactualheight=cross_marquee.offsetHeightif (window.opera navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exitcross_marquee.style.height=marqueeheight+"px"cross_marquee.style.overflow="scroll"return}setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)}
if (window.addEventListener)window.addEventListener("load", initializemarquee, false)else if (window.attachEvent)window.attachEvent("onload", initializemarquee)else if (document.getElementById)window.onload=initializemarquee
</script>
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"><div id="vmarquee" style="position: absolute; width: 98%;">
<!--Contenido-->
Aca pone lo que te plazca....<!--Fué contenido-->
</div></div>
Como hacer un cartel llamativo!!!
Este cartel está bueno, no hay manera que la gente que visite tu blog no lo vea.
Código:<script type="text/javascript">
/***********************************************
* http://webjcp.blogspot.com/
***********************************************/
var delay = 2000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)
var fcontent=new Array();
begintag='<div style="font: normal 14px Arial; padding: 15px;">'; //set opening tag, such as font declarations
fcontent[0]="Aca va el texto 1";
fcontent[1]="Aca va el texto 2";
fcontent[2]="Aca va el texto 3";
closetag='</div>';
var fwidth='150px'; //set scroller width
var fheight='75px'; //set scroller height
var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.
///No metas mano aca /////////////////
var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}
// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com
function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj[i].style.color=getstepcolor(step);
}
}
/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);
}
}
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}
if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>');
if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent
</script>
Manos a la obra:
var delay = 2000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
*SE CONFIGURA LA VELOCIDAD E INTENSIDAD DE LAS LETRAS
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)
*SE CONFIRGURA EL COLOR (COLORES RGB)
var fcontent=new Array();
begintag='<div style="font: normal 14px Arial; padding: 15px;">'; //set opening tag, such as font declarations
fcontent[0]="Aca va el texto 1";
fcontent[1]="Aca va el texto 2";
fcontent[2]="Aca va el texto 3";
closetag='</div>';
*PARA PONER EL TEXTO, DONDE PODES CONFIGURAR TAMAÑO, DISTANCIA. SE PUEDEN PONER VÍNCULOS.
var fwidth='150px'; //set scroller width
var fheight='75px'; //set scroller height
*PARA DARLE TAMAÑO A LA CAJA.
CUALQUIER COSA YA SABES, CHIFLA!!!!
Podes mirar, copiar, sugerir y/o desechar, todo es gratis, lo único que te pido
no borrés los créditos de las plantillas y me linkees si podes.
Abrazos, buena suerte y más que suerte!