lunes, 26 de diciembre de 2011

ツ Links que abren en la misma ventana o en una nueva




Cuando quieras poner un nuevo link y quieras elegir entre que se abra en una nueva ventana, o en la misma: 
Pon atención en las letras en ROSA


Para abrir en la misma ventana:
<a taget=_self href="Mi pagina">Link</a>



Para abrir en una nueva ventana:
<a taget=_blank href="Mi Pagina">Link</a>





---------------------------------------------------------------------------------

0 ♥ Crazy ♥

ツ Como poner imagen a los enlace,titulos,...al pasar el mousse




Hay en algunos blogs, donde los botones cambian cuando pasa el cursor por encima y es muy fácil!!! 
Primero debes ir a DISEÑO, luego a EDICIÓN DE HTML

Cuando estés ahí, busca con CONTROL+F esto; ]]></b:skin> 

Y justo arriba pega esto:


/* Menu nav
----------------------------------------------- */

#nav,#nav li {

margin: 0;

padding: 0;

list-style: none;

}


#nav a {

width: 140px;
height: 27px;
background: url(la imagen del botón que quieras poner) no-repeat;
color: #666;
display: block;
font: bold 12px/22px Arial, sans-serif;
text-decoration: none;
text-indent: 14px;
}

#nav a:hover {
background-position: 0 -27px;
color: #900;
text-decoration: none;
}



Lo que está en rosa es la url de la imagen del botón, esta puede ser de cualquier forma o color, pero siempre del mismo tañamo.
Luego vas a diseño -> elementos de página -> añadir un gadget -> HTML javascript y pega lo siguiente:


<ul id="nav">

<li><a href="#">Título</a></li>

<li><a href="#">Título</a></li>

<li><a href="#">Título</a></li>

<li><a href="#">Título</a></li>

<li><a href="#">Título</a></li>

</ul>


# es el enlace de la página 

Para cada vez que quieras añadir un boton, solo agrega debajo de la misma lista un

 <li><a href="#">Título</a></li>



---------------------------------------------------------------------------------
0 ♥ Crazy ♥

domingo, 25 de diciembre de 2011

ツ Tutorial favicon





Si queremos que en nuestro blog o web no aparezca más el icono o favicon de Blogger y que en cambio aparezca nuestro propio favicon, deberemos hacer lo siguiente:


- Vamos a la web de dynamicdrive y seguimos los siguientes pasos de la fotografía. Deberemos cargar la fotografía que queramos y esta web se encargará de darle el tamaño preciso y convertirla en formato .ico, que es el formato que necesitaremos.




- Una vez tengamos guardado nuestro logo en formato .ico deberemos subirlo a un servidor que acepte este tipo de archivo. El icono debe llamarse favicon.ico

 visitaremos la web de psmc.free si no conoces ninguna.

- Seguimos los pasos de la siguiente foto:

 y tan solo deberemos copiar el link que nos aparecerá en:

-  Ahora vamos a nuestro panel de blogger -> Diseño -> Edición HTML



-  Buscamos la parte de código* llamada <head> (tecleamos Ctrl + F para buscar más rápido)




-  Una vez localizado pegaremos después el siguiente código:



<link href='http://URLfavicon/favicon.ico' rel='shortcut icon' type='image/x-icon'/>

<link href='http://URLfavicon/favicon.ico' rel='icon' type='image/x-icon'/>



En donde pone http://URLfavicon/favicon.ico deberemos colocar la URL que obtuvimos en el paso 



Si está bien guardamos la plantilla.



Recuerda que en  algunas plantillas, si no funcionan los pasos anteriores, hay que pegar el código después de:

<b:include data='blog' name='all-head-content'/>


y en otra plantillas antes de <b:skin><![CDATA[/*





---------------------------------------------------------------------------------

0 ♥ Crazy ♥

viernes, 23 de diciembre de 2011

ツ Boton para que te afilien y enlazar





Normalmente los botones suelen ser de 88x31 pixeles.
Subimos nuestra imagen/botón a internet para eso utilizaremos un hosting de imagenes aqui varias páginas:
*Imageshakc
*Photobucket
*Servimg


En las 2 últimas te tienes que registrar.





Siempre hemos de escoger el que comienza por 
<a href=''...
En otras palabras hemos cogido un código HTML estos códigos se utilizan para muchas otras cosas.


Luego creamos un elemento de página HTML/JavaScript y pegamos el codigo cambiando 
<a href="http://imageshack.us">
por la dirección de la web sin quitar el 
http://


Con el recuadro la cuestión es esta:
Tengo la imagen sin link alguno pero dentro del recuadro ya la tengo con link lo que yo eh hecho es a la imagen le eh quitado el 
<a href="http://imageshack.us"> y luego para tener el recuadro


Para poner el codigo dentro del cuadro hay que poner esto:

<textarea>AQUI TU CODIGO</textarea>




---------------------------------------------------------------------------------
3 ♥ Crazy ♥

domingo, 18 de diciembre de 2011

ツ Codigo Textarea * cajita de texto*


Textarea sirve para colocar codigos o textos muy largos dentro de un recuadro, usualmente lo utilizo para codigos ya que si lo colocas en tu entrada  no aparece o tira error 

ejemplo con borde:



ejemplo sin borde:







Codigo textarea ♥


<textarea cols="30" rows="5" style="border: none;">Aqui colocas el texto</textarea>


cols : "ancho" de la caja de texto.
rows : "alto" de la caja de texto
style: "border: none;" (lo puse de ejemplo por si quieres que tu textarea aparezca sin borde; en style puedes colocar background,font,tipo letra... ejmstyle="background-color: #FA8072"




---------------------------------------------------------------------------------
0 ♥ Crazy ♥

ツ Marquee [animación HTML] 2


2 tutorial del marco "marquee"...puedes escoger el que te sea más sencillo y fácil de hacer,lo dejo a tu gusto.

Este código sirve para hacer presentaciones en tu blog, por ejm:

Con imagenes ------------->






Con texto ---------->



Este es un ejemplo en forma de texto :)



Código ♥



 


width : "ancho" del marquee.

height : "alto" del marque.

direction: "left", "right", "up", "down".
scrollamount: "velocidad" del texto o imagen.
bgcolor:con este le puedes cambiar el color al fondo del marquee.
onmouseover: stop(),esta sirve para que pare la animación, sirve mucho si pones afiliados,o links ^^. si no quieres que se detengan al poner encima la flecha solo eliminas la linea.



---------------------------------------------------------------------------------
0 ♥ Crazy ♥

ツ Eliminar lightbox de blooger




si no te gusta la nueva actualización de mostrar las imagenes que impuso blogger entonces esta entradita es para ti.

Copialo antes de </head>

<script type='text/javascript'>
//<![CDATA[
  function killLightbox() {
    var images = document.getElementsByTagName('img');
    for (var i = 0 ; i < images.length ; ++i) {
      images[i].onmouseover=function() { 
        var html = this.parentNode.innerHTML;  
        this.parentNode.innerHTML = html;
        this.onmouseover = null;
      }
    }
  }
  if (window.addEventListener) {
    window.addEventListener('load',killLightbox,undefined);
  } else {
    window.attachEvent('onload',killLightbox);
  }
//]]>
</script>



0 ♥ Crazy ♥

ツ Gadget del pajaro Twitter



Te gustaría tener el pájarito de twitter volando por todo el blog? es muy sencillo hacerlo! Simplemente debes agregar el Gadgets del pajaro de Twitter y lo tendrás volando por todo tu blogger como el que aparece en este blog...
http://elblogdeeldena.blogspot.com/


 

Simplemente copia el código del pajaro de twitter volando y pegalo en tu Blogger o web añadiendo un gadget nuevo. 

Si quieres vincularlo con tu página en twitter debes cambiar la siguiente url del código: http://pczeros.blogspot.com/2011/06/gadget-pajaro-twitter-volando-blogger.html 
por la url de tu twitter. 
0 ♥ Crazy ♥

viernes, 2 de diciembre de 2011

ツ Tutorial para esconder el Chat Box


El tutorial es bien sencillo -------->  


van a...  


Diseño >> Elementos de la pagina >> Añadir un gadget Htlm/javascript


copia el siguiente codigo y guarda:


<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:400px;
width:150px;
float:left;
cursor:pointer;
background:url('URL DE LA IMAGEN') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

pega el codigo de tu cbox

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>


Donde dice URL DE LA IMAGEN pon la url de la imagen que te guste.Pega el codigo de tu cbox donde dice CODIGO DE CBOX.
1 ♥ Crazy ♥

ツ Como colocar un fondo en Blogger


Para colocar  fondos para Blogger  en  blog es realmente sencilla.
A continuación ote explico los pasos:

  • Entra en Diseño, y elige Elementos de Página.
  • Pincha sobre cualquiera de los elementos que pone Gadget y elige el de Html/Javascript.
  • Introduce en la ventana el código que aparece debajo del Fondo que te haya gustado.
  • Y listo!! Ya tienes tu fondo.
En algunos Fondos, sobre todo los estáticos, no podrás personalizarlo. Pero puedes hacer un buen diseño variando las demás características.
Sin embargo, los dinámicos, podrás variar el color a tu gusto, además de cambiar las demás opciones.
0 ♥ Crazy ♥

jueves, 1 de diciembre de 2011

ツ Cartas















0 ♥ Crazy ♥

ツ Lindos fondos









 

Fondos animados ---------->











0 ♥ Crazy ♥

ツ Kits de escritorio

Para que planifiques tus notas ------->





0 ♥ Crazy ♥

ツ Gifs pequeñitos cutes



















































4 ♥ Crazy ♥
Suscribirse a: Entradas (Atom)