Hacker of the Web
Tus ideas en código!...y mas

Estas en: > > Como colocar codigo de Enlazame!

Como colocar codigo de Enlazame!

banner

El código de enlazame es indispensable para nuestros visitantes que quieres ayudar a nuestra causa promocionando un banner con la imagen mas representativa de nuestro blog, para lo cual es válido proporcionarles accesiblemente buenos banners de la mejor variedad para que puedan colocarlos en donde nuestros visitantes descidan.

Ya que si solo les proporcionamos una imagen grande estamos limitándoles, a estos pocos visitantes que nos tienen fe, los lugares donde pueden realizar la promoción. Es por eso que es muy necesario que les proporcionemos banner de buena calidad y de variedad.

Este es un listado de las mas populares herramientas para crear nuestros banners:
  1. BannerBreak.com
  2. CrearBanner.com
  3. BannerFans.com
  4. GifMake.com

Una vez listo nuestro banner podremos colocarlo en nuestro blog y mostrarlo a nuestros visitantes, para lo cual podemos hacerlo de varias maneras:


JQuery

Seguro ya eres un experto o habías oído hablar acerca de JQuery, bien, si eres un experto en este famosisimo framework puedes aplicar los siguientes pasos pero si no eres un experto no hay problema también puedes hacerlo:

Efecto ToggleSlide | Efecto FadeToggle | Efecto Toggle



Al seguir estos pasos obtendrás un bonito efecto con el cual podrás mostrar mas dinámicamente y atractivo los códigos para enlazar tu página web desde otra. Comencemos:

/!\ Si ya tienes instalado JQuery en tu blog, inicia en el paso [3].

/!\ Si tienes instalado Script.aculo.us No puedes instalar JQuery!!

[1] Entra a Diseño>Edicion HTML>Sin expandir las plantillas de artilugios.

[2] Después busca con 
Ctrl + F
: <head>

Justo despues de esa etiqueta necesitas colocar el siguiente código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
 [3] Una vez instalado podemos comenzar a utilizar JQuery, lo que haremos será agregar este código en CUALQUIER parte de nuestro blog, a excepción de los gadgets xD:

Completa este formulario para generar tu código, si son mas de un banner separa la URL con una coma ",":

URL del blog:
URL del banner:
ID del div:
Tipo de Efecto:
Este es el enlace, el que mostrará el código, puedes colocarlo donde quieras: 
<a href="javascript:void(0);" onclick="$('#ID_DEL_DIV').slideToggle('slow');">Banner</a>
 Y este es el código del contenedor de nuestro banner, que tambien puedes colocarlo en donde quieras: 
<div id='ID_DEL_DIV'>
 <a href="javascript:void(0);" onclick="$('#ID_DEL_DIV div').slideToggle('slow');">
  <img src='banner.gif' alt='banner'/>
 </a>
 <div style='display:none;'>
  <textarea cols='20' onclick='this.select();' readonly='readonly' rows='3'>
   <a href='URL_DE_TU_BLOG'>
    <img src='URL_DE_LA_IMAGEN' target='_blank'/>
   </a>
  </textarea>
 </div>
</div>
 [4]Despues de agregar lo anterior al blog, entra a Diseño>Edicion HTML>Sin expandir las plantillas de artilugios.

[5]Buscamos con 
Ctrl + F
: ]]></b:skin>
Y justo antes de esa etiqueta agregamos lo siguiente: 
#ID_DEL_DIV div{
  display:none;
  margin:auto;
}
 
#ID_DEL_DIV{
  font-family: Arial;
  font-size: 15px;
  text-shadow: 0 1px 2px rgba(255,255,255,0.7);
  color:white;
  text-decoration:none;
  padding:30px;
  background:rgba(0,0,0,.7);
  text-align:center;
  width:500px;
  color:white;
  font-weight:bold;
  font-family:'Trebuchet MS';
  bottom:25%;
  position:fixed;
  left:10px;
}

Script.aculo.us

Esta libreria tambien ofrece exelentes alternativas, que pueden implementarse en nuestros blog. Pero no es posible colocar ejemplos de sus funcionamientos en SantyWeb, pues tiene JQuery implementado. Por lo tanto aqui les dejo tambien como se instala y que les parece si lo prueban.

/!\ Si ya tienes instalado Script.aculo.us en tu blog, inicia en el paso [3].

/!\ Si tienes instalado JQuery No puedes instalar Script.aculo.us!!

[1] Entra a Diseño>Edicion HTML>Sin expandir las plantillas de artilugios.

[2] Después busca con 
Ctrl + F
: <head>

Justo despues de esa etiqueta necesitas colocar el siguiente código:
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js" type='text/javascript'></script>
<script src='https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js' type='text/javascript'></script>
 [3] Una vez instalado podemos comenzar a utilizar Script.aculo.us, lo que haremos será agregar este código en CUALQUIER parte de nuestro blog, a excepción de los gadgets :P :

Completa este formulario para generar tu código, si son mas de un banner separa la URL con una coma ",":

URL del blog:
URL del banner:
ID del div:
Tipo de Efecto:
Los tipos de efectos son:

slide | appear | blind


Este es el enlace que mostrará los banner de manera dinámica, colocalo donde prefieras:
<a href='javascript:void(0);' onclick='Effect.toggle("ID_DEL_DIV","TIPO_EFECTO"); return false;'>Banner</a>

Este código es el de los banners, puedes colocarlo en donde prefieras, no importa donde este se mostrará en el mismo lugar: 
<div style='display:none;' id='ID_DEL_DIV'>
 Haz sobre el banner para ver el código:<br/><br/>
 <a href='javascript:void(0);' onclick='Effect.toggle("banner0","TIPO_EFECTO"); return false;'>
  <img src='URL_BANNER' alt='banner'/>
 </a><br/>
 <div id='banner0' style='display:none;'>
  <textarea cols='20' onclick='this.select();' readonly='readonly' rows='3'>
   <a href='URL_BLOG'>
    <img src='URL_BANNER' alt='banner'/>
   </a>
  </textarea>
 </div>
 <a href='javascript:void(0);' onclick='Effect.toggle("ID_DEL_DIV","TIPO_EFECTO"); return false;'>Cerrar</a>
</div>
 [4]Despues de agregar lo anterior al blog, entra a Diseño>Edicion HTML>Sin expandir las plantillas de artilugios.

[5]Buscamos con 
Ctrl + F
: ]]></b:skin>
Y justo antes de esa etiqueta agregamos lo siguiente: 
#ID_DEL_DIV div{
  margin:auto;
}
 
#ID_DEL_DIV{
  font-family: Arial;
  font-size: 15px;
  text-shadow: 0 1px 2px rgba(255,255,255,0.7);
  color:white;
  text-decoration:none;
  padding:30px;
  background:rgba(0,0,0,.7);
  text-align:center;
  width:500px;
  color:white;
  font-weight:bold;
  font-family:'Trebuchet MS';
  bottom:25%;
  position:fixed;
  left:10px;
}

Función SantyToggle(sin Framework de Javascript)

Aqui estará como agregar la funcion para lograr buenos resultados.
Por: Unknown
En que se publicó
Etiquetas , , , ,
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

2 comentarios !

Diana Reyes dijo...

SäNTÿ, que excelente manera de presentar tus notas, los conceptos y los consejos que nos regalas.

Siempre que vengo a visitarte me llevo gratas sorpresas y buenos aprendizajes.
Mil gracias.

Unknown dijo...

Jubilada en Acción!, gracias a ti por el comentario xD!!

Se hace lo que se puede ;)


Página Principal
Arriba