Ventanas POP con medidas establecidas

Cuando colocamos enlaces o links en nuestro blog, y queremos que el mismo se abra en una ventana aparte y no el la misma página acudimos al atributo  target = "_blank" , pero si aún queremos más como establecerle a dicha ventana unos parámetros de ancho y alto, los mismos debemos colocarlos dentro de código que utilizaremos para implementar ese link. Vamos entonces a colocarles un ejemplo de lo explicado en éste   enlace.
El código a continuación:

<a href="URL de la imágen o archivo a mostrar en la nueva ventana" target="_blank" onClick="window.open(this.href, this.target, 'width=Ancho de la ventana,height=Alto de la ventana'); return false;">Título relacionado</a>

Hacer enlaces con efecto onMouseOver

Creo que a estas alturas todos sabemos como hacer un enlace. Es uno de los códigos esenciales que todo blogger debe conocer y que, generalmente, consiste en hacer click sobre una frase que nos lo indica o sobre una imágen. En ésta entrada les presentaré la forma de hacerlo pasando, solamente, el cursor sobre lo que nos indique la existencia del enlace. De seguidas el ejemplo con el código para implementarlo:

El Escaparate

Este es el código:

<a href="Doesn't matter" onMouseOver="parent.location='URL del sitio a enlazar'">NOMBRE DEL SITIO</a>

Boton "Ir Arriba"

Podemos catalogar la implementación de éste botón como una "urgente utilidad" en aquellos blog cuyas páginas posean una gran cantidad de entradas , siendo ésta una manera de volver hasta el tope del blog de un sólo envión.

Para implementarlo accedemos a nuestra plantilla de la manera acostumbrada, y utilizando nuestro buscador de códigos ubicamos  </body>, y sin expandir artilugios, colocamos el siguiente código sobre él:

<a href='#'><img src=' URL de la imágen' style='position: fixed; bottom: 10px; right: 1%;' title='Ir Arriba '/></a>

Luego le damos a VISTA PREVIA, y si todo está bién guardamos nuestros cambios y entonces veremos aparecer, en el ángulo inferior derecho de nuestro blog, el ícono, que al pulsarlo nos hará volver al tope de nuestro blog.

Efecto multicolor en los enlaces

Este efecto tiene cierta similitud con el efecto Rainbow. Para implementarlo accedemos a nuestra plantilla de la manera acostumbrada, y ayudados por nuestro buscador de códigos (CTRL+F) ubicamos  </head> y sobre el mismo colocamos el siguiente código:

<script type='text/javascript'>



 //<![CDATA[



 var rate = 20;



 if (document.getElementById)

  window.onerror=new Function("return true")



 var objActive;  // The object which event occured in

  var act = 0;    // Flag during the action

  var elmH = 0;   // Hue

  var elmS = 128; // Saturation

  var elmV = 255; // Value

  var clrOrg;     // A color before the change

  var TimerID;    // Timer ID



 if (document.all) {

  document.onmouseover = doRainbowAnchor;

  document.onmouseout = stopRainbowAnchor;

  }

  else if (document.getElementById) {

  document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);

  document.onmouseover = Mozilla_doRainbowAnchor;

  document.onmouseout = Mozilla_stopRainbowAnchor;

  }



 function doRainbow(obj)

  {

  if (act == 0) {

  act = 1;

  if (obj)

  objActive = obj;

  else

  objActive = event.srcElement;

  clrOrg = objActive.style.color;

  TimerID = setInterval("ChangeColor()",100);

  }

  }





 function stopRainbow()

  {

  if (act) {

  objActive.style.color = clrOrg;

  clearInterval(TimerID);

  act = 0;

  }

  }





 function doRainbowAnchor()

  {

  if (act == 0) {

  var obj = event.srcElement;

  while (obj.tagName != 'A' && obj.tagName != 'BODY') {

  obj = obj.parentElement;

  if (obj.tagName == 'A' || obj.tagName == 'BODY')

  break;

  }



 if (obj.tagName == 'A' && obj.href != '') {

  objActive = obj;

  act = 1;

  clrOrg = objActive.style.color;

  TimerID = setInterval("ChangeColor()",100);

  }

  }

  }





 function stopRainbowAnchor()

  {

  if (act) {

  if (objActive.tagName == 'A') {

  objActive.style.color = clrOrg;

  clearInterval(TimerID);

  act = 0;

  }

  }

  }





 function Mozilla_doRainbowAnchor(e)

  {

  if (act == 0) {

  obj = e.target;

  while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {

  obj = obj.parentNode;

  if (obj.nodeName == 'A' || obj.nodeName == 'BODY')

  break;

  }



 if (obj.nodeName == 'A' && obj.href != '') {

  objActive = obj;

  act = 1;

  clrOrg = obj.style.color;

  TimerID = setInterval("ChangeColor()",100);

  }

  }

  }





 function Mozilla_stopRainbowAnchor(e)

  {

  if (act) {

  if (objActive.nodeName == 'A') {

  objActive.style.color = clrOrg;

  clearInterval(TimerID);

  act = 0;

  }

  }

  }





 function ChangeColor()

  {

  objActive.style.color = makeColor();

  }





 function makeColor()

  {

  // Don't you think Color Gamut to look like Rainbow?



 // HSVtoRGB

  if (elmS == 0) {

  elmR = elmV;    elmG = elmV;    elmB = elmV;

  }

  else {

  t1 = elmV;

  t2 = (255 - elmS) * elmV / 255;

  t3 = elmH % 60;

  t3 = (t1 - t2) * t3 / 60;



 if (elmH < 60) {

  elmR = t1;  elmB = t2;  elmG = t2 + t3;

  }

  else if (elmH < 120) {

  elmG = t1;  elmB = t2;  elmR = t1 - t3;

  }

  else if (elmH < 180) {

  elmG = t1;  elmR = t2;  elmB = t2 + t3;

  }

  else if (elmH < 240) {

  elmB = t1;  elmR = t2;  elmG = t1 - t3;

  }

  else if (elmH < 300) {

  elmB = t1;  elmG = t2;  elmR = t2 + t3;

  }

  else if (elmH < 360) {

  elmR = t1;  elmG = t2;  elmB = t1 - t3;

  }

  else {

  elmR = 0;   elmG = 0;   elmB = 0;

  }

  }



 elmR = Math.floor(elmR).toString(16);

  elmG = Math.floor(elmG).toString(16);

  elmB = Math.floor(elmB).toString(16);

  if (elmR.length == 1)    elmR = "0" + elmR;

  if (elmG.length == 1)    elmG = "0" + elmG;

  if (elmB.length == 1)    elmB = "0" + elmB;



 elmH = elmH + rate;

  if (elmH >= 360)

  elmH = 0;



 return '#' + elmR + elmG + elmB;

  }



 //]]>



 </script>

Posterior a esto guardamos cambios, y para ver el efecto sólo tenemos que pasar el cursor sobre cualquier enlace o link y allí aparecerá el efecto.


Fuente:  AllBlogTools