domingo, 11 de diciembre de 2011

script que calcula los dias horas minutos segundos, del dia final 2012

script que calcula el dia final 2012 en horas minutos y segundos
cuantos dias faltan para el fin del mundo
cuantas horas faltan para el dia final 2012
cuantos segundos faltan para el dia final 2012

,


el script quedaria asi:






1. para los usuarios en blogger se van a diseño--> añadir un gadget--> elemento javascritp y pegan el siguiente codigo:


<script type='text/javascript'>

//Por andres2288 - http://efectosparabloggerywebs.blogspot.com/

var ayo = 2012;

var mes = 12; //1 = Enero

var dia = 21;

var hora = 24;

var minuto = 00;

var segundo = 0;

var evento = "Fin Del Mundo";



var id;

if (!id) { id = 1; }

else { id++; }





document.write("<table border='0' width='100%'>");

document.write("<span><b>· Nombre del evento:</b></span><br>");

document.write("<span><font color='#FF0000'><b>"+evento+"</b></font></span><br>");

document.write("<span><b>· D&iacute;a del evento:</b></span><br>");

document.write("<span id='evento" + id + "'></span>");

document.write("<span><b>· Tiempo Restante:</b></span><br>");

document.write("<span id='contar" + id + "'></span>");

document.write("</table>");

//por andres2288

document.write("<p><small><b><a href='http://efectosparabloggerywebs.blogspot.com/2011/12/script-que-calcula-los-dias-horas.html' style='text-decoration: none'>.</a></b></small></p>");



setInterval('contar('+ayo+','+mes+','+dia+','+hora+','+minuto+','+segundo+',' + id + ')',1000);

</script>

<script type='text/javascript'>

function contar(ayo,mes,dia,hora,minuto,segundo,id) {

var dif = dia + ' del ' + mes + ' de ' + ayo + ', a las ' + hora + ':';

if (minuto < 10) { dif+='0'; }

dif+=minuto + '<br>';

document.getElementById('evento' + id).innerHTML=dif

var a = new Date();

dif = new Date(ayo,mes - 1,dia,hora,minuto,segundo);

dif = (dif.getTime() - a.getTime())/1000;

if (dif < 0) { document.getElementById('contar' + id).innerHTML="<font color='#FF0000'>Lleg&oacute; el evento!!</font>"; }

else {

dia= Math.floor(dif/60/60/24);

hora= Math.floor((dif - dia*60*60*24)/60/60);

minuto= Math.floor((dif - dia*60*60*24 - hora*60*60)/60);

segundo= Math.floor(dif - dia*60*60*24 - hora*60*60 - minuto*60);

var txt = '';

if (dia > 0) {

txt=dia+' d&iacute;a';

if (dia != 1) { txt+='s'; }

txt+= '<br />';

}

if (hora > 0 || dia > 0) {

txt+=hora+' hora';

if (hora != 1) { txt+='s'; }

txt+= '<br />';

}

if (minuto > 0 || hora > 0 || dia > 0) {

txt+=minuto+' minuto';

if (minuto != 1) { txt+='s'; }

txt+= '<br />';

}

txt+=segundo+' segundo';

if (segundo != 1) { txt+='s'; }

document.getElementById('contar' + id).innerHTML=txt;

}

}

</script>



guardan y listo eso es todo.





domingo, 20 de noviembre de 2011

cambiar el color del blog ò pagina web con un click

cambiar el color del blog con javascript con un click

bueno he mirado en otro blog como cambia el color del blog con un script pero ese script lo tiene muy largo o con fallas yo lo edite borrandole algunos codigos inecesarios

bueno para ver como funciona miren











solo den click en cualquier color y cambia el blog de color.

para instalarlo en su blog hacen lo siguiente:

para instalarlo en un gadget
vamos a

Diseño > Elementos de la página > Añadir gadget > HTML/Javascript, y ahí pega esto:

<center>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TTX4H60I/AAAAAAAAAJU/qYc4BYZclgg/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TK7730eI/AAAAAAAAAIs/3v5O2GDrs1s/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TTyfDggI/AAAAAAAAAJk/9x17-Ec7Dnw/s200/body-verde.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TLXeztWI/AAAAAAAAAI0/7hWfrfWsdKU/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMB5SOXI/AAAAAAAAAJE/PRMfKVBj6fM/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE';"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/S32TTl7vW9I/AAAAAAAAAJc/GHdXgYyF4Ro/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMY3FA9I/AAAAAAAAAJM/6Hx0CAagVOQ/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TLuZ0f1I/AAAAAAAAAI8/r1AHB4GpoPQ/s200/body-blanco.png" /></a>
</center>


y listo guardan y miran como quedo.

ahora si quieren este codigo en las entradas de los post , que aparesca la opcion de cambiar el color del blog en las entradas de los post con este javascript debemos hacer lo siguiente:

vamos diseño --> edicion html--> y buscamos la siguiente etiqueta:

<data:post.body/>


justo despues de esta etiqueta agregan este codigo:

<center>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TTX4H60I/AAAAAAAAAJU/qYc4BYZclgg/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TK7730eI/AAAAAAAAAIs/3v5O2GDrs1s/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TTyfDggI/AAAAAAAAAJk/9x17-Ec7Dnw/s200/body-verde.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TLXeztWI/AAAAAAAAAI0/7hWfrfWsdKU/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMB5SOXI/AAAAAAAAAJE/PRMfKVBj6fM/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE';"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/S32TTl7vW9I/AAAAAAAAAJc/GHdXgYyF4Ro/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMY3FA9I/AAAAAAAAAJM/6Hx0CAagVOQ/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TLuZ0f1I/AAAAAAAAAI8/r1AHB4GpoPQ/s200/body-blanco.png" /></a>
</center>


y listo eso es todo

domingo, 13 de noviembre de 2011

poner el menu de google en blogger o mi web

bueno esto es para poner el menu de google en el blog o en una pagina web


bueno primero en blogger debes ir a diseño edicion html y buscas la etiqueta </head>

antes de esta etiqueta agregas este codigo

<link type="text/css" rel="stylesheet" href="http://ensayandopopup.webcindario.com/css/menugoogle.css"/>



luego guardas

2. luego de guardar te vas a diseño -- agregar un gadget--html/javascript- y pones el siguiente codigo


<ul class="googleTab">

<li class="active"><a href="#">Home link 1</a></li>

<li><a href="#">About us link 2</a></li>

<li><a href="#">Our Services link3</a></li>


<li><a href="#">Our Technologies link 4</a></li>

<li><a href="http://efectosparabloggerywebs.blogspot.com/">andres2288 link 5</a></li>

</ul>


donde dice link 1 link 2 agregas el nombre del link y donde dice # la url del link puedes ver al ultimo link andres2288 y el enlace a mi sitio

eso es todo

martes, 8 de noviembre de 2011

cambiar el color de la letra de los comentarios de facebook incrustado en mi blog o web

cambiar el color de la letra de la caja de comentarios de facebook incrustado en mi blog o web

cambiar el color de la letra de la caja de comentarios de facebook en mi blog de color negro

no cambia el color de la letra solo le pone un fondo claro a la caja de comentarios
para que se vea la letra

A.bueno esto es para los usuarios que tienen un blog de color negro y hallan añadido la caja de comentarios de facebook en su blog y los comentarios casi no se ven por el color negro del blog como la siguiente imagen



al modificarlo que dara como la siguiente siguiente imagen






1. bueno lo primero que tienes que hacer es ir a Diseño edicion html y buscas con control +f la siguiente etiqueta: ]]></b:skin>

justo antes de esa etiqueta pones el siguiente codigo:

<link href='http://ensayandopopup.webcindario.com/css/1.css' rel='stylesheet' type='text/css'/>


le dan guardar.

2. ahora digamos que ustedes tienen el codigo que les dio facebook o los desarrolladores de facebook para incrustalo en tu blog como por ejemplo este:


<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js#appId=APP_ID&amp;xfbml=1"></script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><br/><fb:comments expr:href='data:post.url'/></div></b:if>


lo que tienen que hacer es agregar las etiquetas pre y code antes y despues tomando un ejemplo del codigo anterior entonces que daria asi:


<pre><code>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js#appId=APP_ID&amp;xfbml=1"></script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><br/><fb:comments expr:href='data:post.url'/></div></b:if>
</code></pre>



es facil solo agregan esas dos etiquetas , entonces si tienen el codigo que les da facebook agregan antes estas 2 <pre><code>

y despues del codigo que les da facebook agregan estas 2 </code></pre>


y finalmente podra verse la letra de los comentarios asi:





y listo eso es todo




ay otra forma de cambiarle el color ustedes eligiran cual de las 2 quieren la 2da opcion es la siguiente:

B.digamos que ustedes tienen el codigo que les genero facebook de comentarios por ejemplo:


<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js#appId=APP_ID&amp;xfbml=1"></script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><br/><fb:comments expr:href='data:post.url'/></div></b:if>



bueno justo antes de este codigo agregan el siguiente codigo :

<div class='likeboxwrap'>


y despues de ese codigo agregan esta etiqueta



</div>



osea que el codigo quedaria asi


<div class='likeboxwrap'>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js#appId=APP_ID&amp;xfbml=1"></script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><br/><fb:comments expr:href='data:post.url'/></div></b:if>

</div>



y despues de este codigo agregamos el estilo o color con este codigo este codigo lo colocan despues del anterior


<style type='text/css'>
div.likeboxwrap {
width:500px; /* Quitar 2px al ancho del gadget */
height:auto; /* Quitar 25px al alto del gadget */
background-color:#8A084B; /* Color de fondo del gadget */
overflow:hidden;
}
div.likeboxwrap iframe {margin:-1px}
</style>



le dan guardar y listo

si ven el numero 500 es el ancho lo pueden ajustar a su manera si el codigo de facebook dice width ustedes miran el tamaño y lo ponen en el estilo de arriba que queden iguales si no no y donde dice background-color:#8A084B ponen el color hexadecimal que quieran

los colores hexadecimales los puden conseguir en esta pagina

http://html-color-codes.info/codigos-de-colores-hexadecimales

para ver una imagen de como queda miren la siguiente imagen





domingo, 11 de septiembre de 2011

poner un boton de ver codigo fuente en blogger o web en otra ventana o popup con estilo bonito

bueno esta es una forma de poner un boton en tu pagina web para ver el codigo fuente de su pagina web o de un blog con la opcion de no salirse de la pagina o blog o si ustedes quieren con la opcion de salirse de su pagina

1..primero que todo en blogger se van para Diseño-edicion html- teclean control +f a la ves y buscan la etiqueta </head>

antes de esa etiqueta colocan el siguiente codigo:

<!--ver codigo fuente andres2288 cabeza-->
 <link rel='stylesheet' href='http://css-tricks.com/examples/ViewSourceButton/css/style.css' />
 <link rel='stylesheet' href='http://css-tricks.com/examples/ViewSourceButton/css/prettify.css' />
    
    
 <style>
  #source-code { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); }
  #source-code:target { display: block; }
  #source-code pre { padding: 20px; font: 14px/1.6 Monaco, Courier, MonoSpace; margin: 50px auto; background: rgba(0,0,0,0.8); color: white; width: 80%; height: 80%; overflow: auto; }
  #source-code pre a, #source-code pre a span { text-decoration: none; color: #00ccff !important; }
  #x { position: absolute; top: 30px; left: 10%; margin-left: -41px; }
  .button { background: #00ccff; padding: 10px 20px; color: white; text-decoration: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
 </style>
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script src="http://css-tricks.com/examples/ViewSourceButton/prettify/prettify.js"></script>
    
 <script src="http://ensayandopopup.webcindario.com/misarchivos/twiter/twiterandres2288/andres2288codigofuente.js" >
 
 </script>
    <!--ver codigo fuente andres2288 cabeza--> 



le dan guardar


2.. luego lo vamos a colocar en un gadget para eso nos vamos a Diseño- añadir un gadget-html o script
en ese gadget si quieren que al ver el codigo fuente no salga de su pagina el usuario que de click si no que salga una ventana emergente y muestre el codigo fuente ponen el siguiente codigo:

  <!--ver codigo fuente andres2288 body-->
 <div id="page-wrap">
 
  

  

  <a class="button" href="#source-code" id="view-source">ver codigo fuente</a>
  
  
  
  
  
  <div id="source-code">
   <a href="#" id="x"><img src="http://css-tricks.com/examples/ViewSourceButton/images/x.png" alt="close"></a>
  </div>
 
 </div>
 
 <script src="http://ensayandopopup.webcindario.com/misarchivos/twiter/twiterandres2288/andres2288codigofuente2.js">
 
 </script> 
 <!--ver codigo fuente andres2288 body-->



y si no quieren que muestre el codigo fuente en una ventana popup o ventana emergente si no que se vaya directamente al codigo fuente ponen el siguiente codigo:



<!--ver codigo fuente andres2288 body-->
 <div id="page-wrap">
 
  <a class="button" onClick='window.location="view-source:" + window.location.href'>ver codigo fuente</a>
  
  <div id="source-code">
   <a href="#" id="x"><img src="http://css-tricks.com/examples/ViewSourceButton/images/x.png" alt="close"></a>
  </div>
 
 </div>
 
 <script src="http://ensayandopopup.webcindario.com/misarchivos/twiter/twiterandres2288/andres2288codigofuente2.js">
 
 </script> 
 <!--ver codigo fuente andres2288 body-->



y listo eso es todo

poner o incorporar mis tweets en un gadget de blogger o en mi pagina web

aqui pueden ver una imagen


1..bueno es facil lo unico que tienen que hacer es ir a Diseño - edicion html - y buscamos con control +  f  la etiqueta  </head>   y ponemos antes de esta etiqueta este codigo:

<!--twitter 2 head andres8822-->
  <link href="http://ensayandopopup.webcindario.com/misarchivos/twitter%202/tweet/jquery.tweet.css" rel="stylesheet"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script src="http://ensayandopopup.webcindario.com/misarchivos/twitter%202/tweet/jquery.tweet.js" charset="utf-8"></script>
  
   <script src="http://ensayandophp2288.webcindario.com/twiter%202/tweet/andres8822.js"  charset="utf-8"></script>

   
  <!--twitter 2 head andres8822-->

le damos guardar

2.. ahora nos vamos a diseño y en agregar un gadget-html o script -ponemos el siguiente codigo:


<!--twitter 2 body andres8822-->
<pre class="example">
jQuery(function($){
$(".tweet").tweet({
join_text: "auto",
username: "tu id de twitter",
avatar_size: 48,
count: 4,
auto_join_text_default: "nos dijo,",
auto_join_text_ed: "nosotros",
auto_join_text_ing: "nos",
auto_join_text_reply: "que respondió a",
auto_join_text_url: "nos marchábamos a",
loading_text: "Cargando tweets..."
});
});
</pre>
<div class='tweet query'></div>
<script type="text/javascript">
jQuery(function($){ $(".example").each(function(i, e){ eval($(e).text()); }); });
</script>
<!--twitter 2 body andres8822-->



ahora para aclarar donde dice tu id de twitter ponen su id de twitter o su nombre de twitter y donde dice count: 4, yo le puse un valor de 4 tweets pero le pueden poner mas si quieren que aparescan mas tweets


eso es todo



miércoles, 7 de septiembre de 2011

cajita de mis twitters o comentarios en twitters para insertarlo en blogger o webs con estilo bonito

bueno esta es una cajita en el cual la podemos poner en un gadget en nuestro blog de nuestros twitters, para eso nesesitamos ser twitteros para que aparescan por asi decirlo nuestros comentarios de twitter en la cajita, yo por lo menos no soy twittero pero algunos si.




aqui puedes ver un ejemplo

clic aqui para ver ejemplo

1. lo que nesesitamos primero es subir este archivo a un hosting el cual sera llamado script.js osea ponemos este codigo y lo nombramos script.jsy lo subimos al hosting miremos el codigo:



var tweetUsers = ['id twitter 1'];
var buildString = "";

$(document).ready(function(){

 $('#twitter-ticker').slideDown('slow');
 
 for(var i=0;i<tweetUsers.length;i++)
 {
  if(i!=0) buildString+='+OR+';
  buildString+='from:'+tweetUsers[i];
 }
 
 var fileref = document.createElement('script');
 
 fileref.setAttribute("type","text/javascript");
 fileref.setAttribute("src", "http://search.twitter.com/search.json?q="+buildString+"&callback=TweetTick&rpp=50");
 
 document.getElementsByTagName("head")[0].appendChild(fileref);
 
});

function TweetTick(ob)
{
 var container=$('#tweet-container');
 container.html('');
 
 $(ob.results).each(function(el){
 
  var str = ' <div class="tweet">
     <div class="avatar"><a href="http://twitter.com/'+this.from_user+'" target="_blank"><img src="'+this.profile_image_url+'" alt="'+this.from_user+'" /></a></div>
     <div class="user"><a href="http://twitter.com/'+this.from_user+'" target="_blank">'+this.from_user+'</a></div>
     <div class="time">'+relativeTime(this.created_at)+'</div>
     <div class="txt">'+formatTwitString(this.text)+'</div>
     </div>';
  
  container.append(str);
 
 });
 
 container.jScrollPane();
}

function formatTwitString(str)
{
 str=' '+str;
 str = str.replace(/((ftp|https?)://([-w.]+)+(:d+)?(/([w/_.]*(?S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
 str = str.replace(/([^w])@([w-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
 str = str.replace(/([^w])#([w-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
 return str;
}

function relativeTime(pastTime)
{ 
 var origStamp = Date.parse(pastTime);
 var curDate = new Date();
 var currentStamp = curDate.getTime();
 
 var difference = parseInt((currentStamp - origStamp)/1000);

 if(difference < 0) return false;

 if(difference <= 5)    return "Just now";
 if(difference <= 20)   return "Seconds ago";
 if(difference <= 60)   return "A minute ago";
 if(difference < 3600)   return parseInt(difference/60)+" minutes ago";
 if(difference <= 1.5*3600)   return "One hour ago";
 if(difference < 23.5*3600)  return Math.round(difference/3600)+" hours ago";
 if(difference < 1.5*24*3600) return "One day ago";
 
 var dateArr = pastTime.split(' ');
 return dateArr[4].replace(/:d+$/,'')+' '+dateArr[2]+' '+dateArr[1]+(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:'');
}


aclaracion donde dice    var tweetUsers = ['id twitter 1']; ustedes en  id twitter 1 van a poner su identificacion de twitter osea que por ejemplo mi identificacion es andres8822 lo se por que mi url o id de twitter es  http://twitter.com/#!/andres8822   entonces en ese campo ponen la id de twitter suya en caso de que quieran agregar 2 identificaciones o mas por algun motivo agregan asi 


var tweetUsers = ['id twitter 1','id twitter 2']; ya serian 2 identificaciones quieren agregar otra entonces ,'id twitter 3' asi sucesivamente solo para los que quieran agregar mas cuentas.


 del resto para una cuenta osea la suya dejenla como esta arriba var tweetUsers = ['id twitter 1'];
luego de modificar var tweetUsers = ['id twitter 1']; poniendo su id de twitter le ponen el nombre de script.js  y lo suben al hosting. y copiamos la url donde quedo guardado el script.js 

2. luego de esto nos vamos para blogger y en diseño, edicion html y buscamos con control +f la siguiente palabra  </head>

antes de esa palabra ponen el siguiente codigo:


<!--twitter andres2288-->
<style type="text/css" rel="stylesheet" media="screen">
  @import "http://ensayandopopup.webcindario.com/misarchivos/twiter/twiterandres2288/demo.css";
  </style>

<link rel="stylesheet" type="text/css" href="http://ensayandopopup.webcindario.com/misarchivos/twiter/twiterandres2288/jScrollPane/jScrollPane.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ensayandopopup.webcindario.com/misarchivos/twiter/twiterandres2288/jScrollPane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://ensayandopopup.webcindario.com/misarchivos/twiter/twiterandres2288/jScrollPane/jScrollPane-1.2.3.min.js"></script>
<script type="text/javascript" src="url del script.js subido al hosting"></script>

<!--twitter andres2288-->






en donde esta el codigo <script type="text/javascript" src="url del script.js subido al hosting"></script> en donde dice   url del script.js subido al hosting ponen la url del archivo subido  luego de esto le dan guardar entonces en blogger ya queda guardado




3. por ultimo en blogger vayan a diseño , Añadir un gadget , escogen html/javascript y pegan el siguiente codigo:


<div id="main">



  <div id="twitter-ticker">
    <div id="top-bar">
      
      <div id="twitIcon"><img src="http://ensayandopopup.webcindario.com/misarchivos/twiter/twiterandres2288/img/twitter_64.png" width="64" height="64" alt="Twitter icon" /></div>
  
        <h2 class="tut">My tweets</h2>
        </div>
      
        <div id="tweet-container"><img id="loading" src="http://ensayandopopup.webcindario.com/misarchivos/twiter/twiterandres2288/img/loading.gif" width="16" height="11" alt="Loading.." /></div>
      
        <div id="scroll"></div>
    </div>
  
  
</div>

le dan guardar y listo eso es todo


luego les enseño a crear un arbol que crece con los comentarios de twitter y en las hojas ay comentarios de alguna identificacion de twitter que uno desea lo pueden ver en este ejemplo

arbolito con twitter por andres2288







sábado, 3 de septiembre de 2011

subir o enviar archivos a una carpeta en el hosting mediante un formulario en php

bueno esto sirve para los que tengan un hosting y nesesitan que algun usuario le mande un archivo y este quede guardado en el hosting en una carpeta en el hosting (voy a utilizar miarroba.com)

1. lo primero vamos a crear una carpeta llamada envios dentro de esa carpeta crearemos una carpeta llamada files en files nos llegan los archivos que nos manda el usuario.

2.el segundo paso es facil solo deben agregar el siguiente codigo que es el formulario para enviar el archivo el cual lo llamaremos index.php el que no tenga una plataforma para poner este codigo entonces lo hacen en un bloc de notas para mayor facilidad entonces ponen en el bloc  de notas ponen el siguiente codigo y lo llaman index solamente y lo guardan luego le enseño a cambiarle .txt a .php este codigo lo metemos en la carpeta envios codigo:
<form action="2.php" method="post" enctype="multipart/form-data">
  <input name="archivo" type="file" size="35" />
  <input name="enviar" type="submit" value="subir archivo" />
  <input name="action" type="hidden" value="upload" />     
</form>

3. ya con el index.php creado para personas con conocimientos en php ( o con el index.txt ò bloc de notas para usuarios principiantes) vamos a crear el codigo para que reciba los archivos y lo mande a la carpeta files 
el siguiente codigo para usuarios expertos sera llamado 2.php para usuarios principiantes crean otro bloc de notas y lo llaman 2 quedaria 2.txt y ponen el siguiente codigo y lo guardan :
<?php
$status = "";
if ($_POST["action"] == "upload") {
    // obtenemos los datos del archivo
    $tamano = $_FILES["archivo"]['size'];
    $tipo = $_FILES["archivo"]['type'];
    $archivo = $_FILES["archivo"]['name'];
    $prefijo = substr(md5(uniqid(rand())),0,6);
   
    if ($archivo != "") {
        // guardamos el archivo a la carpeta files
        $destino =  "files/".$prefijo."_".$archivo;
        if (copy($_FILES['archivo']['tmp_name'],$destino)) {
            $status = "Archivo subido: <b>".$archivo."</b>";   
   echo "el archivo llamado ".$archivo."de tamano".$tamano."de tipo ".$tipo." fue subido con exito gracias andres2288";   
        } else {
            $status = "Error al subir el archivo";
        }
    } else {
        $status = "Error al subir archivo";
    }
}  
?>



bueno para los que no saben como cambiar el archivo .txt a .php les voy a enseñar como:
1.dentro de la carpeta envios aparece la carpeta files y los archivos index.txt y 2.txt(para los principiantes que quede entendido) entonces presionan la tecla Alt + A  luego se van a herramientas y luego a Opciones de carpeta , luego en ver y buscan Ocultar las extenciones de archivo para tipos de archivos conocidos desmarcan esa opcion

y le dan aceptar 
luego de esto se van a los archivos index y 2 y les dan cambiar nombre apareceran asi index.txt a este le cambian el nombre por index.php que queden asi le dan aceptar y aceptar y listo hacen lo mismo con el otro archivo el 2

4. luego de tener la carpeta envios y dentro de esta la carpeta files y los archivos index.php y 2.php
procedemos a subirla al hosting en mi caso miarroba , (yo en miarroba comprimo la carpeta envios en .zip y en el hosting le digo subir en modo zip) lo importante es subir la carpeta files y los otros 2 archivos 2.php y index.php

eso es todo.

MOSTRAR UN VIDEO TUTORIAL

domingo, 5 de junio de 2011

menu deslizante para blogger 1 con jquery

bueno este es un menu muy bonito para agregarlo a blogger o a su pagina web
clic aqui para ver ejemplo


lo primero que deben hacer es en edicion html buscan la etiqueta

<head>

justo despues de esa etiqueta ponen el siguiente codigo

<!-- menu por andres2288 cabeza --> 

        <script type="text/javascript" src="http://www.tutorialjquery.com/scripts/menu/demo/jquery-1.4.2.min.js"></script>

        <script type="text/javascript" src="http://www.tutorialjquery.com/scripts/menu/demo/jquery.lksMenu.js"></script>

        <link rel="stylesheet" type="text/css" href="http://www.tutorialjquery.com/scripts/menu/demo/lksMenuSkin2.css" />

        <script>

        $('document').ready(function(){

            $('.menu').lksMenu();

        });

        </script>
 <!-- menu por andres2288 cabeza -->

luego elegimos donde queremos poner el menu puden ser en un gadget
ponemos el siguiente codigo para el menu

<!-- menu por andres2288 body --> 
<div class="menu">

        <div></div>

            <br/>



  <ul>

            <li>

                <a href="#">parte 1</a>

                <ul>

                    <li><a href="http://www.andresfelipe2288.blogspot.comI">mi blog</a></li>

                    <li><a href="#">Flash</a></li>

                    <li><a href="#">Prototype</a></li>

                    <li><a href="#">Mootools</a></li>

                </ul>

      </li>

            <li>

                <a href="#">parte 2</a>

                <ul>

                    <li><a href="#">Flickr</a></li>

                    <li><a href="#">Twitter</a></li>

                    <li><a href="#">Rating</a></li>

              </ul>

          </li>

            <li>

                <a href="#">parte 3</a>

                <ul>

                    <li><a href="#">Tutorial jQuery</a></li>

                    <li><a href="#">jsonp Examples</a></li>

                    <li><a href="#">Codigo Gratis</a></li>

                    <li><a href="#">Bug Base</a></li>

                </ul>

            </li>

            <li>

                <a href="#">parte 4</a>

                <ul>

                    <li><a href="#">Resolver Matrices</a></li>

                    <li><a href="#">Letras de Canciones</a></li>

                    <li><a href="#">Cheats Code</a></li>

                    <li><a href="#">Solving equations</a></li>

                </ul>

            </li>
 <li>

<a href="#">parte 5</a>

                <ul>

                    <li><a href="#">Resolver Matrices</a></li>

                    <li><a href="#">Letras de Canciones</a></li>

                    <li><a href="#">Cheats Code</a></li>

                    <li><a href="#">Solving equations</a></li>

                </ul>

            </li>
        </ul>

    </div>

<!-- menu por andres2288 body -->
y listo eso es todo cambian donde esta # por la url que quieran, si quieren agregar mas al menu solo deben agregar el siguiente codigo antes de las etiquetas</ul>

</div> finales
y despues de las etiquetas </ul>

</li> que son las del anterior menu

codigo

<li>

<a href="#">aqui ponagn el nombre que quieran</a>

                <ul>

                    <li><a href="#">Resolver Matrices</a></li>

                    <li><a href="#">Letras de Canciones</a></li>

                    <li><a href="#">Cheats Code</a></li>

                    <li><a href="#">Solving equations</a></li>

                </ul>

            </li>

y eso es todo

descargar el menu para implementarlo en su pagina web
clic aqui para descargarlo


jueves, 7 de abril de 2011

comentarios de facebook en blogger

bueno en realidad es facil solo sigan estos pasos


Paso 1.
Inicien sesión en Facebook.
Paso 2.
Ingresen a esta dirección: http://developers.facebook.com/docs/reference/plugins/comments/
Paso 3.
Una vez allí encontrarán una caja de configuración en la parte inferior donde pueden modificar 3 puntos:

  • URL de la página de comentarios,
  • cantidad de comentarios, y
  • ancho de la caja de comentarios.
como se muestra en la imagen





Paso 4.
Hace clic en el botón Get code. Eso les generará el código que deberán insertar en su página web o blog. Tengan en cuenta que podrá ser insertado en cualquier sitio web que permita edición de código: Página estática html, construida con PHP, Blogger, WordPress, etc.

en blogger deben ir al menú Diseño / Edición de HTML. Asegúrense expandiendo la plantilla de artilugios. Una vez aquí, deben buscar el código:




<data:post.body/>

Justo después de este código deben añadir en la línea siguiente: este codigo es para la caja de comentarios en ingles


<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script><fb:comments expr:href='data:post.url' num_posts="3" width="500"></fb:comments>

para los comentarios en español agreguen el siguiente codigo

<div id="fb-root"></div><script src="http://connect.facebook.net/es_LA/all.js#appId=APP_ID&amp;xfbml=1"></script><fb:comments expr:href='data:post.url' num_posts="3" width="500"></fb:comments>

Eso hará que luego de cada post se pueda ver la caja de comentarios de Facebook, pero incluso en la portada será visible y tal vez ustedes no deseen eso, de modo que en lugar de usar el código anterior, deberán usar este:


para ingles


<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script><b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><br/><fb:comments expr:href='data:post.url'/></div></b:if>

para español

<div id="fb-root"></div><script src="http://connect.facebook.net/es_LA/all.js#appId=APP_ID&amp;xfbml=1"></script><b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><br/><fb:comments expr:href='data:post.url'/></div></b:if>


y listo



si alguno tiene un blog de color negro y la letra de los comentarios no se ve tal ves le interese lo siguiente

http://efectosparabloggerywebs.blogspot.com/2011/11/cambiar-el-color-de-los-comentarios-de.html






martes, 5 de abril de 2011

desactivar clic derecho y el control c en mi web o blog , evitar que copien tu blog o web


solo es facil agreguen este codigo  despues de la etiqueta <body>


<!-- Deshabilitar el control c en Blogger -->
<script language='JavaScript1.2'>

function disabletext(e){

return false

}

function reEnable(){

return true

}

//if the browser is IE4+

document.onselectstart=new Function (&quot;return false&quot;)

//if the browser is NS6

if (window.sidebar){

document.onmousedown=disabletext

document.onclick=reEnable

}

</script>
<!-- fin Deshabilitar el control c en Blogger -->


<!-- Deshabilitar el Click Derecho en Blogger -->

<!-- Pegar despues de la etiqueta <body> -->

<script language='Javascript'>
document.oncontextmenu = function(){return false}
</script>

<!-- Fin Deshabilitar el Click Derecho en Blogger -->

y listo eso es todo

lunes, 7 de marzo de 2011

chat estilo facebook para blogger

bueno solo es facil solo tienen que agregar este codigo
antes de la etiqueta </body>

<!-- MI Chat --><script type="text/javascript">var envoSn=18898;var envProtoType = (("https:" == document.location.protocol) ? "https://" : "http://");document.write(unescape("%3Cscript src='" + envProtoType + "d.envolve.com/env.nocache.js' type'text/javascript'%3E%3C/script%3E"));</script><!-- MI Chat -->
y listo lo pueden ver en la parte de abajo de este blog este codigo es nuevo me gusto mucho por que le puedo agregar colores como en la parte de abajo antes tenia este codigo
<!--mi chat --><script type='text/javascript'>envoSn=11395;</script><script src='http://d.envolve.com/env.nocache.js' type='text/javascript'/><!--mi chat -->
este codigo lo tenia hace tiempo veran que algunas personas comentaban en el pero no me gusto la interfaz
este mismo codigo lo utilizaba  en mis paginas web o blogs si quieren aqui abajo otro codigo que no utilizo

<!-- mi chat personal --><script type="text/javascript">envoSn=13488;</script><script type="text/javascript" src="http://d.envolve.com/env.nocache.js"></script><!-- mi chat personal -->
y si quieren otro codigo creados por ustedes mismos entren a envolve alli les daran su propio codigo donde podran cambiarle los colores, y ciertas caracteristicas

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