miércoles, 26 de enero de 2011

zoom para las fotos para blogger

copian este codigo

 <script type="text/javascript" src="http://valid.tjp.hu/tjpzoom/tjpzoom.js"></script>
<!-- <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>

  <script type="text/javascript" src="http://andresfelipe2288.blogspot.com/"></script>
  <script src="http://andresfelipe2288.blogspot.com/" type="text/javascript"></script>
  <script src="http://andresfelipe2288.blogspot.com/" type="text/javascript"></script>

  <link href="booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
                 http://andresfelipe2288.blogspot.com/
  <script src="cufon/cufon-yui.js" type="text/javascript"></script>
  <script src="http://andresfelipe2288.blogspot.com/" type="text/javascript"></script>
  <script src="http://andresfelipe2288.blogspot.com/" type="text/javascript"></script>
  <script type="text/javascript">
   Cufon.replace('h1,p,.b-counter');
   Cufon.replace('.book_wrapper a', {hover:true});
   Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
   Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
   Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});
  </script>
  -->
 
<script type="text/javascript"><!--
 var TJPzoomoffset='smart';
//--></script>

luego de esto guardan
y en las entradas ponen el siguiente codigo
 <p><a href="#" onclick="if(TJPzoomswitch(document.getElementById('unique113'))) {this.innerHTML='-'quitar zoom por andres2288'} else {this.innerHTML='+'encender zomm por andres2288'}; return false;">activar el zoom</a></p>
<div>
    <img src="url de tu imagen" style="width:640px; height: 480px;" onmouseover="TJPzoomif(this);" id="unique113"/>
</div>

guardan la entrada y listo

aqui un ejemplo

activar el zoom


martes, 25 de enero de 2011

ventana popup 1 para blogger

bueno este es un efecto bonito para poner en su blog nos ubicamos en diseño, edición html y buscamos la etiqueta </HEAD>  antes de esta ponemos este codigo



<!-- andres2288--> 

<script src='http://www.dolem.com/lib/lytebox/lytebox.js' type='text/javascript'></script> 
<link href='http://www.dolem.com/lib/lytebox/lytebox.css' media='screen' class='stylesheet' type='text/css'/> 
<!-- andres2288-->
 
le dan guardar y listo

en las entradas ponen el siguiente codigo

1. si quieren poner una imagen ponen el siguiente codigo
 
<a href="url de tu imagen" class="lytebox" title="Image Description">Image #1</a>
 

aqui un ejemplo de una imagen

2.si quieren un grupo de imagenes enlazadas escriben el siguiente codigo
 
<a href="url imagen 1" class="lytebox[vacation]" title="Mom and Dad">Mom and Dad</a>
<a href="url imagen 2" class="lytebox[vacation]" title="My Sister">My Sister</a>
 

3.si quieren incrustar una pagina web pegan el siguiente codigo
 
<a href="http://www.google.com" class="lyteframe" title="Search Google" 
   data-lyte-options="width:1000 height:550 scrolling:no">Google Search</a>


aqui el ejemplo de pagina web

donde el ancho osea horizontal es donde dice width:1000 lo puden cambiar por el valor que gusten, y donde dice height:550 es el vertical de la pagina delen el valor que quieran




5. si quieren un pdf ponen el siguiente codigo


<a href="url del pdf" class="lyteframe" 
title="SETI Certificate" data-lyte-options="height:95%">titulo del pdf</a>


un ejemplo de pdf aqui
PDF Documents



6. si quieren un archivo flash osea un .swf una animacion ponen el sigueinte codigo

<a href="tu animacion en flash aqui o la url del flash osea un .swf" class="lyteframe" data-lyte-options="width:420px height:320px" title="titulo del flash">Flash</a>

aqui un ejemplo de una animacion animacion Flash



7. si quieren un video de youtube ponen el siguiente codigo
<a href="url de tu video con el codigo embed" 
   class="lyteframe" data-lyte-options="width:560 height:349">descripcion del video</a>

url de tu video con el codigo embed = quiere decir busquen el video en youtube cuando entren al video le dan click en compartir y luego en insertar ahy le saldra un codigo parecido a este
<iframe width="420" height="345" src="http://www.youtube.com/embed/e16uobGL2U8" frameborder="0" allowfullscreen>

http://www.youtube.com/embed/e16uobGL2U8 este codigo es el que deben poner en la url de arriba donde dice
url de tu video con el codigo embed
si quieren ver como queda click aqui abajo


YouTube video




bueno y si lo quieren para pagina web
descarguen este archivo para subir las imagenes

descargar archivo


gracias a lytebox