sábado, 30 de marzo de 2013

BOTÓN compartir entrada en PINTEREST

    He probado muchos botones y códigos y al final he dado con un método que funciona. 
Lo encontré en el blog que os referencio al fanal, está tan perfectamente explicado, que yo no podría hacerlo mejor, así que hacer click  en la imagen y comprobareis lo sencillo que resulta:

Texto de la entrada en dos columnas

Es un resultado chulo verdad, a dos columnas como en los periódicos. Mi fuente esta:

Mi aportación en el código justificar el texto y colocar un link con imagen.
Conseguirlo es muy fácil, el código que obra el milagro os lo dejo a continuación, utilízarlo en vuestras entradas y listo:
<div style="float: left; width: 45%;text-align:justify"><h3>TEXTO DE LA COLUMNA DE LA IZQUIERDA</br><a href=" URL DEL LINK" target="blank"><img src=" URL DE LA IMAGEN" width="180" height="115"/></a><br/>TEXTO DE DEBAJO DE LA IMAGEN.</h3></div><div style="float: right; width: 45%;text-align:justify"><h3>TEXTO DE LA COLUMNA DE LA DERECHA</div></h3> <div style="clear: both"></div>

jueves, 21 de marzo de 2013

UNA IMAGEN COMO TÍTULO DE UN GADGET


   Lo primero que haremos sera añadir el gadget a personalizar en tu barra lateral o en cualquier sección del blog.
Para ello, accede al apartado Diseño>Elementos de la página>Añadir un gadget.
Seguidamente, atribúyele el título que quieras.
Guárdalo y sigue estos pasos: 
1º) Busca en tu plantilla el gadget en cuestión (Control+f, para acceder al buscador) hasta que aparezca un código similar este, unas veces puede ser mas largo o más corto, resulta indiferente para lo queremos cambiar:

<b:widget id='HTML1' locked='false' title='EL NOMBRE DE TU GADGET ' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

2º) Reemplaza la línea resaltada en color verde por esto:
<img src="URL DE TU IMAGEN"/> (podría estar alojada en Picasa>

3º) Guarda la plantilla para terminar.

martes, 19 de marzo de 2013

VISTO Y NO VISTO
(ocultar textos)

Estoy de un simple que me salgo, voy a referiros un truco muy sencillo pero muy util que nos servira para esconder aquello que solo a voluntad del usuario, el sufrido usuario, se mostrará


CLIK AQUÍ


EL ESCRIPT QUE OBRA EL MILAGRO


<script type='text/JavaScript'>
function blmostrocult(blconted) {
var c=blconted.nextSibling;
if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none';
}
return false;
}
</script>

Tenéis dos opciones para introducir este script en vuestros blog, si lo vais a utilizar a menudo seria conveniente implementarlo en vuestra plantilla: presionáis la casilla de artilugios y buscáis </head> justo entes lo pegáis.
Si por el contrario lo vais a utilizar en contadas ocasiones, lo agregáis antes del código html que os proporciono, allí donde lo usareis, bien sea en una entrada o en un gadget.

El código html que hará que funcione el script

<a onclick="return blmostrocult(this);" style="cursor: hand; cursor: pointer;">TITULO</a><div style="display: none;"> CONTENIDO OCULTO </div>




lunes, 18 de marzo de 2013

ENLAZAR A VUESTRO BLOG (EL CÓDIGO)

   Este es el código que deberéis pegar en un gadget html/java... ( aquí lo tienes amiga puede variar el tamaño modificando los valores de width = anchura y height = largo )

<center><a href="URL DEL BLOG"><img alt="" src="URL DE LA IMAGEN" width="135" height="125" /></a></center>
<center><textarea rows="3" cols="15" onclick="this.select();"><a href="URL DEL BLOG"><img alt="" src="URL DE LA IMAGEN" height="135" width="125" /></a></textarea></center>

jueves, 14 de marzo de 2013

UN MENÚ FÁCIL DE HACER Y COLOCAR


  Lo primero de todo comentar con agrado que he localizado un excelente blog del que precisamente proviene este menú,  cargado de contenidos útiles para nuestros propósitos estéticos y mucho más, tanto es así que he decidido incluirlo en mi lista de imprescindibles, no dejéis de pasaros por el .
Ahora, lo prometido es deuda aquí va el código de este magnifico menú balanceante
tan solo tendréis que cortar y pegar el codigo en una gadget html/java... sustituyendo la parte  resaltada en rojo por los enlaces deseados. 
Dentro del div están las entrada propiamente dichas del MENÚ, para aumentar o disminuir tan solo habréis de añadir o quitar  este bloque tal cual :

<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
El ancho del menú se encuentra en la zona de Style:
#containerbalanceo {
  position: relative;
  width: 96%;   Este es el valor que deberéis cambiar.
}
Hay otros muchos valores que se pueden cambiar en esta zona ir probando.
 EL CÓDIGO COMPLETO:

<div id="containerbalanceo">
<ul id="menubalanceo">
<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>
<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>

<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>


<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>


<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>

</ul>
</div>


<style>

#containerbalanceo {
  position: relative;
  width: 96%; 
}

#containerbalanceo:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

#menubalanceo {
  position: relative;
  float: left;
  width: 100%;
  padding: 0 20px;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);

  background: #cccccc;
background: -moz-linear-gradient(top,  #cccccc 0%, #9e9e9e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#9e9e9e));
background: -webkit-linear-gradient(top,  #cccccc 0%,#9e9e9e 100%);
background: -o-linear-gradient(top,  #cccccc 0%,#9e9e9e 100%);
background: -ms-linear-gradient(top,  #cccccc 0%,#9e9e9e 100%);
background: linear-gradient(to bottom,  #cccccc 0%,#9e9e9e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#9e9e9e',GradientType=0 );


}

#menubalanceo, #menubalanceo ul {
  list-style: none;
}

#menubalanceo > li {
  float: left;
  position: relative;
  border-right: 1px solid rgba(0,0,0,.1);
  box-shadow: 1px 0 0 rgba(255,255,255,.25);

  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;

}

#menubalanceo > li:first-child {
  border-left: 1px solid rgba(255,255,255,.25);
  box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
}

#menubalanceo a {
                font-family:century gothic;
  display: block;
  position: relative;
  z-index: 10;
  padding: 13px 20px 13px 20px;
  text-decoration: none;
  color: rgba(75,75,75,1) !important;
  line-height: 1;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.05em;
  background: transparent; 
  text-shadow: 0 1px 1px rgba(255,255,255,.9);
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;

}
        #menubalanceo > li:hover > a {
                font-family:century gothic;
  background: #333;
  color: #00DFFC !important;
  text-shadow: none;
}

#menubalanceo li ul  {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 200px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: transparent;
  overflow: hidden;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}


#menubalanceo li:hover ul {

  padding: 15px 0;
  background: #333;
  opacity: 1;
  visibility: visible;
  box-shadow: 1px 1px 7px rgba(0,0,0,.5);

  -webkit-animation-name: swingdown;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;

  -moz-animation-name: swingdown;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: ease;

  -o-animation-name: swingdown;
  -o-animation-duration: 1s;
  -o-animation-timing-function: ease;

  -ms-animation-name: swingdown;
  -ms-animation-duration: 1s;
  -ms-animation-timing-function: ease;

  animation-name: swingdown;
  animation-duration: 1s;
  animation-timing-function: ease;

}

@-webkit-keyframes swingdown {
  0% {
   opacity: .99999;
   -webkit-transform: rotateX(90deg);
  }

  30% { 
   -webkit-transform: rotateX(-20deg) rotateY(5deg);
   -webkit-animation-timing-function: ease-in-out;
  }

  65% {
   -webkit-transform: rotateX(20deg) rotateY(-3deg);
   -webkit-animation-timing-function: ease-in-out;
  }

  100% {
   -webkit-transform: rotateX(0);
   -webkit-animation-timing-function: ease-in-out;
  }
}

@-moz-keyframes swingdown {
  0% {
   opacity: .99999;
   -moz-transform: rotateX(90deg);
  }

  30% { 
   -moz-transform: rotateX(-20deg) rotateY(5deg);
   -moz-animation-timing-function: ease-in-out;
  }

  65% {
   -moz-transform: rotateX(20deg) rotateY(-3deg);
   -moz-animation-timing-function: ease-in-out;
  }

  100% {
   -moz-transform: rotateX(0);
   -moz-animation-timing-function: ease-in-out;
  }
}

@-o-keyframes swingdown {
  0% {
   opacity: .99999;
   -o-transform: rotateX(90deg);
  }

  30% { 
   -o-transform: rotateX(-20deg) rotateY(5deg);
   -o-animation-timing-function: ease-in-out;
  }

  65% {
   -o-transform: rotateX(20deg) rotateY(-3deg);
   -o-animation-timing-function: ease-in-out;
  }

  100% {
   -o-transform: rotateX(0);
   -o-animation-timing-function: ease-in-out;
  }
}

@-ms-keyframes swingdown {
  0% {
   opacity: .99999;
   -ms-transform: rotateX(90deg);
  }

  30% { 
   -ms-transform: rotateX(-20deg) rotateY(5deg);
   -ms-animation-timing-function: ease-in-out;
  }

  65% {
   -ms-transform: rotateX(20deg) rotateY(-3deg);
   -ms-animation-timing-function: ease-in-out;
  }

  100% {
   -ms-transform: rotateX(0);
   -ms-animation-timing-function: ease-in-out;
  }
}

@keyframes swingdown {
  0% {
   opacity: .99999;
   transform: rotateX(90deg);
  }

  30% { 
   transform: rotateX(-20deg) rotateY(5deg);
   animation-timing-function: ease-in-out;
  }

  65% {
   transform: rotateX(20deg) rotateY(-3deg);
   animation-timing-function: ease-in-out;
  }

  100% {
   transform: rotateX(0);
   animation-timing-function: ease-in-out;
  }
}

#menubalanceo li li a {
                font-family:century gothic;
  padding-left: 15px;
  font-weight: 400;
  color: #00DFFC !important;
  text-shadow: none;
  border-top: dotted 1px transparent;
  border-bottom: dotted 1px transparent;
  -webkit-transition: all .15s linear;
  -moz-transition: all .15s linear;
  -o-transition: all .15s linear;
  -ms-transition: all .15s linear;
  transition: all .15s linear;
}

#menubalanceo li li a:hover {
  color: rgba(0,223,252,1);
  border-top: dotted 1px rgba(255,255,255,.15);
  border-bottom: dotted 1px rgba(255,255,255,.15);
  background: rgba(0,223,252,.02);
}

</style>

¡VENGA! Echarle una ojeada a este blog:

lunes, 11 de marzo de 2013

FOTO, TEXTO, EFECTO CSS










EL CÓDIGO ES EL SIGUIENTE:

Este codigo cien por cien CSS, deberéis colocarlo en vuestra plantilla html  de vuestro blog justo antes de ]]></b:skin>.
Pueden hacerse algunas variaciones de estilo como por ejemplo variar el tamaño en anchura del triangulo asi como su color, justo en el apartado .info3 width: 200px;  probar a variar el numerito.
Pero lo mejor es ir probando valores y comprobar su efecto.

.caja3 {
position: relative;
width: 300px;
margin: 10px auto;
}
.caja3 img {
width: 300px;
border: 3px solid #333;
-moz-box-shadow: 1px 1px 4px #333;
-webkit-box-shadow: 1px 1px 4px #333;
box-shadow: 1px 1px 4px #333;
}
.info3 {
position: absolute;
top: 30%;
opacity: 0;
width: 200px; 
height: 110px;
padding: 5px;
text-align: left;
color: #eee;
background: #C14684; /*Para IE que no soporta RGBA*/
background: rgba(193,70,132,.8);
-moz-transform:rotate(180deg); /*Inicialmente boca abajo*/
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
-moz-transition:all linear 0.5s 0s;
-webkit-transition:all linear 0.5s 0s;
transition:all ease 0.5s 0s;
}
.info3:after {
position: absolute;
top: 0;
right: -120px;
content:&quot;&quot;;
display:block; /*Lo siguiente monta el triángulo*/
width:0;
height:0;
border-color:transparent transparent transparent #C14684;
border-color:transparent transparent transparent rgba(193,70,132,.8);
border-style:solid;
border-width:60px;
}
.imagen img {
position: absolute;
top:0;
border: 0;
height: 0; /*Segunda imagen no visible inicialmente*/
-moz-transition:all linear 0.5s 0s;
-webkit-transition:all linear 0.5s 0s;
transition:all ease 0.5s 0s;
}
.caja3:hover .info3 {
filter: alpha(opacity=100);
opacity: 1;
left:-100px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
.caja3:hover .imagen img {
top:0;
left:0;
height:450px !important;
border: 3px solid #333;
}
Después de realizar este sencillo paso ya estaremos preparados para crear algo paracido a lo que veis en este articulo; tan solo tendreis que colocor el siguiente codigo html, en un gadget HTML/Javascript :

<div class="caja"><a href="URL_ENLACE"><img src="URL_IMAGEN" /><span class="info">TEXTO</span></a></div>

Para colocar código CSS en vuestro blog bien sea en una gadget html/java... o en una entrada, sin tener que manipular vuestra plantilla, en código todo código justo aquí abajo, en  el apartado CSS os doy la solución.

AYUDA:CÓDIGO todo CÓDIGO