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