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