Descripcion en imagenes con efecto deslizante usando css

Una forma de agregarle mas estilo a nuestras imágenes y hacer que nuestro blogs sea mas profesional, es poniendo una pequeña descripción de la imagen, Aunque en esta ocasión lo hacemos mas interesante.

¿como?

Simple haremos que la descripción aparezca cuando los usuarios coloque el cursor sobre la imagen, ademas le agregaremos un botón para que los usuarios puedan leer el articulo completo, puedes ver este blogs de pruevas

Para agregar imágenes de esta forma simplemente, ve a Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style>

.image-box {

  width:220px;height:220px;overflow:hidden;background-color:white;

  border:1px solid #ccc;float:left;margin:1px 1px;

  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;

  color:#333;

}

.image-container,

.image-details {height:280px;border:5px solid white;background-color:#ffc;

  transition:margin-top .4s ease-out .4s;

}

.image-container img {

  width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;

  max-height:none;

  background-color:black;

}

.image-details h4,

.image-details p {

  margin:0 0 .2em;padding:0 0;height:70px;

}

.image-details h4 {

  font-size:120%;height:auto;

}

.image-details .details {

  padding:10px 12px;overflow:hidden;

}

.image-details .more {

  color:white;text-decoration:none;display:block;

  text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;

}

.image-box:hover {border-color:#bbb; width:220px;

  height:220px;}

.image-box:hover .image-container {margin-top:-210px}

.image-details .more:hover {background-color:black}

</style>

<br />

<div class="image-box-wrapper" id="image-box-wrapper">

<div class="image-box">

<div class="image-container">

<img alt="Food" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL5rTO06Kvxpo-iv96HtOXG-htxIWM5uYJZ6WMywkUzlFrep5sTC7aqeoyT77jIkys2rKx-xgVIOh8pYg7YxTHlDmMGvT0yhK8PJF9W7QTVHpm1lx98keFEUoz1CPi47w2sqZhiBRR9KU/s1600/3.jpg" width="280" /></div>

<div class="image-details">

<div class="details">

<h4>

Descripccion deslizante </h4>

Una pequeña demostracion de una descripccion deslizante en una imagen en blogger

<a class="more" href="http://www.blogger.com/Post%20Link">Continuar Leyendo</a></div>

</div>

</div>

</div>

En color verde he dejado las opciones a editar.

En color rojo, el url de la imagen

Larry el pájaro de twitter volando por el blogs

Anterior mente  he publicado varios tutoriales sobre lo que podemos hacer con CSS, puedes verlos es esta Etiqueta,
en esta ocasion volveremos a jugar con CSS3, en esta ocasión para hacer animaciones usando la declaracion @keyframes,
con la cual jugaremos para poder hacer que Larry el pájaro de twitter volando por el blogs

El tutorial es muy simple y no es cosa del otro mundo, ademas nos da la ventaja de no sobrecagar el blogs y es muy facil de agregarlo al blogs,
para quienes son nuevos blogger, les recuedo que esto solo se vera en navegadores modernos y claro no funciona con IE.

Como Ejemplo pueden ver como larry flota por tutoblogger

Para agregar a larry flotando en tu blogs, ve a Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style type="text/css">
#twitter {
width: 125px;
height: 125px;
position: fixed;
background: url(https://lh6.googleusercontent.com/-lsTVVhpR3ME/UXmKPhM-_eI/AAAAAAAAAmA/OFGDPUi28yk/h120/sigueme.png);
animation: twitter 25s infinite;
-o-animation: twitter 25s infinite;
-moz-animation: twitter 25s infinite;
-webkit-animation: twitter 25s infinite;
}
@-webkit-keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
@keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
@-moz-keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
@-o-keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
</style>
<a href="http://twitter.com/NombUsuario" target="_blank" id="twitter"></a>

En la parte de color rojo lo cambias por tu nombre de usuario.  Facil verdad....

Menu Vertical con Buscador usando CSS con Transiciones y Zoom

Anterior mente había publicado como crear un menu basado solamente en Css, es esta ocasión he creado un menu Vertical al cual le he agregado un Buscador usando únicamente CSS.

Además usando la declaración hover le he agregado otros efectos de transición, Zoom y movimiento esperando que les guste.

Este menu es uno de muchos ejemplos de como agregando le un poco de estilo css a un objeto,
podemos darle un estilo distinto y agradable.


Para agregar Este Menu Vertical tu blogs, ve a Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style>
#menuWrapper {
width:200px;/*ancho de menu*/
height:230px;/*alto de menu*/
padding-left:15px;
background:#F9F8F6;/*color de fondo de menu*/
box-shadow: 0 1px 5px #808080;
border-radius:3px;/*radio de menu*/
}

.menu {
margin-top: 5px;
width:100%;
float:left;
font-size:13px;/*tamaño de txto*/
font-weight:bold;
}

.menu li a{
display:block;
font-weight:bold;
line-height:35px;
margin:0px;
padding:0px 25px ;
text-align:left;
text-decoration:none;
border-radius: 0px 5px 0px 5px;
color:#000;/*color de texto*/
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}

.menu li a:hover{
font-size:14px;
padding:4px 0px 4px 50px;
background:#E51431;/*color de fondo de texto al pasar en cursor*/
color:#ffffff;
text-decoration:none;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
-o-transition: all 0.6s;
}

.menu ul {
height:0px;
list-style:none;
margin:0;
margin-left: -15px;
padding:0;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 1px 5px #808080;
}
#search {
width: 215px;
height:22px;
float: right;
text-align: center;
margin-top: 6px;
}

#search-box {
margin-top:-2px;
text-align:center;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAACXBIWXMAAA7BAAAOwQG4kWvtAAAAIGNIUk0AAG2YAABzjgAA+swAAIXsAABsVwAA49UAADE1AAAX2tF76rUAAAEESURBVHjalNJLM0NBEIbhJzkhRxIEJRaoYuH//x8UG5uIRSIljsjFpk+ZipGiNz2X7ne+7umGb+viDH004qzCC0ZYyVgdeIKrWC/wjh2UcTbFHdabgAId3MR+iIfk1VncdwM42QQ0MUiSn7BM7id4TFR2coCjkDaStxmeo9zDHKAZzfr0u30k8T8Aa7TR2gLYDb/KAV7DH29JPo31OAeoaz9PAmsrcR1xi5yCeg4GuIz1POagiO9rJPEVbtN+FeHfImkvXi1Deg1rR1wLB1H20ga93peRsAzwChcx5umv3KMqMk1bhNR5Mrp1o3uJkj7Ghb/bNEruJeVX/wHUSmA/lA6/BgCJ0z3LSqvQSQAAAABJRU5ErkJggg==);
background-repeat:no-repeat;
background-position:98% 50%;
padding: 6px 6px 6px 8px;
width: 202px;
height:32px;
border: solid 1px #bcbbbb;
outline: none;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

</style>
<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href='http://mdtutoriales.blogspot.com'>Inicio</a></li>
<li><a href='http://mdtutoriales.blogspot.com/p/mapa-de-sitio.html'>Mapa del Blogs</a></li>
<li><a href='http://mdtutoriales.blogspot.com/p/contacto.html'>Contacto</a></li>
<li><a href='http://mdtutoriales.blogspot.com/p/mapa-de-sitio.html'>Mapa del Blogs</a></li>
<li><a href='http://mdtutoriales.blogspot.com/p/contacto.html'>Contacto</a></li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>
</ul></div></div>

 Las partes que estan de Color puedes editar Tanto los Url como los nombres. tambien he dejado señalado la parte del codigo a editar para cualquier gusto.

Galeria de imagenes en miniatura con efecto zoom usando css

Usando CSS y con un poco de creatividad podemos hacer una pequeña Galeria de Imagenes en miniatura, que con solo pasar en cursor sobre la imagen aumenta su tamaño (efecto zoom) sobreponiedoce sebre las demas. esto lo hacemos usardo en comado hover, ademas podemos agregarle estilos de bordes con diferentes propiedades (yo le he colocado una por defecto).
puedes ver un  pequeño en jemplo en este:

blogs pruevas

Por lo regular las Galerias se agregar ya sea en una paguina o en una entrada por lo que podemos agregar es siguiente codigo es la seccion de HTML de las estradas o paguinas.

<style>
/* Galeria de imagenes*/
.galeri{
background:#0000;
margin-top:5px;
margin-left:5px;
}
.galeri img {
-o-border-radius: 5px;/* radio de borde*/
-ms-border-radius: 55px;/* radio de borde*/
-webkit-border-radius: 5px;/* radio de borde*/
-moz-border-radius: 5px;/* radio de borde*/
border-radius: 5px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
padding: 5px;
position:static;
}
.galeri img:hover {
-o-border-radius: 5px;/* radio de borde*/
-ms-border-radius: 5px;/* radio de borde*/
-webkit-border-radius: 5px;/* radio de borde*/
-moz-border-radius: 5px;/* radio de borde*/
border-radius: 5px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
-webkit-transition:all .8s ease;
-o-transition:all .8s ease;
-moz-transition:all .8s ease;
-ms-transition:all .8s ease;
transition:all .8s ease;
width: 50%;/*tamaño de imagen al pasar en cursor*/
height:50%;/*tamaño de imagen al pasar en cursor*/
float:center;
position:absolute;
padding: 5px;
margin-top:-15%;/*posicion de arriba a abajo al pasar el cursor*/
margin-left:-25%;/*posicion de izquierda a derecha al pasar el cursor */
}

</style>

<div class="galeri">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>

</div>
<div class="galeri">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="h#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>

</div>
<div class="galeri">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
</div>

Si quieres agregar otra imagen en cualquier columna simplemente agregar:

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>

En cualquier parte dentro de: ( no tienes que agregar lo de negro de nuevo, simplemente agrega dentro de el codigo de la imagen nueva)

<div class="galeri"> Aqui codigo de arriba con el url de la nueva imagen </div>

 y si quieres agregar otra fila, simplemente pega todo el codigo:( incluyendo lo de azul)

<div class="galeri"> Aqui codigo de todas la imagenes de la nueva fila </div>

Como lo vez es Facil agregar esta Galeria, una de las desventajas es que no tendra en efecto Zoom en navegadores modernos y nucho menos en IE.

Menú horizontal flotante que se expande al pasar en cursor

En estos días he estado jugando un poco con CSS3, y bueno se me ocurrió hacer un menú horizontal usando únicamente CSS3, esto para no hace que nuestro blogs se cargue mucho de script, a diferencia de muchos menús que ya has visto, (espero no allás visto ya uno igual) este menú estará flotando y oculto momentaneamente en nuestro blogs de tal manera que con solo pasar en cursor sobre la en botón "menú"se expande mostrando todas las opciones de nuestro menú, como si fuera una armónica (al menos yo así lo veo), y por si fuera poco le he agregado un ángulo de rotación de -30 grados para darle mas elegancia, claro que todo esto lo puedes editar puedes ver el ejemplo: que flota en tutoblogger o en la imagen de arriba.

Para agregar este menú a nuestro blogs ve a la Edición HTML de tu blog y antes de ]]></b:skin> y pega lo siguiente:

ul.menuflotante {
position: relative;
width: 100%;
margin: 20px auto;
text-align: center;
list-style-type: none;
font-family: "Arial";
font-size: 13pt;/* tamaño de letras*/
color: white;
}
ul.menuflotante li {
display: inline;
margin: 0;
padding: 0;
}
ul.menuflotante li a {
-o-border-radius: 5px;/* radio de borde*/
-ms-border-radius: 5px;/* radio de borde*/
-webkit-border-radius: 5px;/* radio de borde*/
-moz-border-radius: 5px;/* radio de borde*/
border-radius: 5px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
padding: 5px;
position: absolute;
opacity: 0;
display: inline-block;
left: 50%;
margin-left: -50px;
text-decoration: none;
color: white;
background:#e51431;/* Color de botones*/
width:100px;/*ancho de botones */
height:70px;/* alto de botones*/
transition: all .8s ease;
}
ul.menuflotante li:last-of-type a {
opacity: 1;
}
ul.menuflotante a span {
position: relative;
top:40%;
padding: 5px;
text-align: center;
}
ul.menuflotante:hover li a {
color: white;
background:#e51431 ;
opacity: 1;
-webkit-transition:all .8s ease;
-o-transition:all .8s ease;
-moz-transition:all .8s ease;
-ms-transition:all .8s ease;
transition:all .8s ease;
}

ul.menuflotante:hover li:nth-of-type(1) a {
margin-left: -50px;/*posicion del boton 1*/
}
ul.menuflotante:hover li:nth-of-type(2) a {
margin-left: 50px;/*posicion del boton 2*/
}
ul.menuflotante:hover li:nth-of-type(3) a {
margin-left: 150px;/*posicion del boton 3*/
}
ul.menuflotante:hover li:nth-of-type(4) a {
margin-left: 250px;/* posicion del boton 4*/
}
ul.menuflotante:hover li:nth-of-type(5) a {
margin-left: 350px;/* posicion del boton 5*/
}
ul.menuflotante:hover li:last-of-type a {
opacity: 0;
top: -1000px;/* posicion del boton menu*/
}
ul.menuflotante a:hover {
transform: rotate(-30deg);/* angulo de rotacion*/
}
#flotador {
position:fixed;
bottom:100px;
left:60px;
}
/* menu flotante creado por tutoblogger*/

Ahora en Diseño,ve a Añadir Gadget,HTML/Javascript y pega lo siguiente:

<div id="flotador">
<ul class="menuflotante">
<li><a href="Url de Enlace">Inicio</a></li>
<li><a href="Url de Enlace">Mapa del blogs</a></li>
<li><a href="Url de Enlace">Contacto</a></li>
<li><a href="Url de Enlace">Enlazanos</a></li>
<li><a href="Url de Enlace">sobre nosotros</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div> 

guardas los cambios y listo. toma en cuanta que este menú se vera bien usando navegadores resientes, y claro no funciona con IE. Lo que se encuentra en rojo y azul pueden editar.

• Inicio
• Mapa del blogs
• Contacto
• Enlazanos
• sobre nosotros
• Menu

Efectos en todas las imagenes del blogs con CSS3

Para quienes se preguntaban como hacer que las imagenes de todas las entradas tengas bordes redondos,
bueno vamos a aprender a agregarles en efecto de bordes redondeados a las imagenes de nuestro blogs,

Para darle este toque somplemente usaremos CSS3, la cual nos permite hacer esto mediante la declaracion de border-radius
con agregaremos los bordes.

Esto sera sivible siempre y cuando quien vea la página use un navegador moderno

Los estilos los agregaremos a la declaracion

.post-body img {-----------
---------Aqui los estilos-------
----------------------------
}

.post-body img:hover {-----
------Aqui los estilos al pasar en cursor-------
-------------------------------
}

Nota: es por si quieres hacer tus propios estilos o simplemente modifica cualquiera de los ejemplos


Veamos los siguientes ajemplos:

Para agregarlo a sus imagenes simplemente copia copia el código, luego entra a la Edición HTML de la plantilla y pega dicho código antes de ]]></b:skin>

.post-body img {
border-radius: 10px 10px 10px 10px; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

o tambien podemos aplicar algunos efectos al pasar el cursor usando la declaracion "hover"
como por ejemplo

 

.post-body img {

border-radius:  10px 10px 10px 10px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img : hover {
border-radius:100px 300px 100px 300px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

  

.post-body img {
border-radius:  100px 10px 10px 100px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img: hover {
border-radius:10px 100px 100px 0px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

  

.post-body img {
border-radius:  10px 10px 10px 10px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:300px 300px 300px 300px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

  

.post-body img {
border-radius:  300px 300px 300px 300px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}.post-body img:hover {
border-radius:10px 10px 10px 10px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

Es cuestion de jugar con en radio de los bordes para tener un estilo perzonalizado por ejemplo

border-radius: 10px 50px 15px 80px;

Cada valor corresponde a una esquina de la image, en este ejemplo seria:

10px es el borde de la esquina superior izquierda.
50px el borde de la esquina superior derecha.
15px el borde de la esquina inferior derecha.
80px el borde de la esquina inferior izquierda.


En conclusion podemos conseguir que las imágenes de las entradas se vean más atractivas, que interactúen con el lector, y tan sólo ha sido añadiendo un poco de CSS.

Entradas Relacionadas para blogger con CSS

Hace ya mucho tiempo salio el script que nos permite ver las entradas relacionadas en nuestro blogs, es mas ya en varias planillas ya viene instalada.

En esta ocasión les explicare como colocar esta opción en nuestro blogs, por si te interesa y aun no lo tienes, a diferencia de los demás tutoriales que e visto, yo le agregare un toque personal con CSS, espero que te guste.

Primero entra a Diseño > Edición de HTML y haz un respaldo de tu plantilla por si no obtuvieras los resultados esperados.


Después pega antes de ]]></b:skin> los estilos:

/*Entradas Relacionadas por Tutoblogger*/
#related-posts {
float : left;
width :auto;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;

}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #069;
padding: 7px 30px 0 0;
text-align:center;
width: 475px;
font-size : 18px;
font-weight : normal;
margin : 5px -20px 0 0;
padding : 0 0 5px;
border-bottom: 3px solid #069;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : -25px 0 0 0;
padding : 30px 0 0 0;
border-left: 3px solid #069;
}
#related-posts li:hover {
margin-left: 40px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#related-posts ul li {
display : block;
background : #f0eeee;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

Luego con los artilugios expandidos busca la etiqueta ]]></b:skin> y justo debajo de ella pega lo siguiente:

<script type='text/javascript'>
//<![CDATA[

var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();

function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}

function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}

function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}

function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 5) {
break;
}
}
document.write('</ul>');
}

//]]>
</script>

Ahora busca esta línea:

<b:loop values='data:post.labels' var='label'>

Y justo antes del siguiente </b:loop> pega esto:

<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"'
type='text/javascript'/>
</b:if>

Ya sólo busca esta línea:

<div class='post-footer-line post-footer-line-3'

Y pega debajo de ella lo siguiente:

 <b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'>
<div class='post-footer-line post-footer-line-4' id='relpost'>
<h2>Entradas relacionadas:</h2>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if></div>
</div></b:if>

Guarda los cambios y listo. los cambios los podras ver unicamente en las entradas.

Muy Importante:

Cada entrada debe tener minimo una etiqueta y que las etiquetas se muestren en el post para que las entradas relacionadas funcionen.
 
Info: sacado de una planilla de johnytemplate

Personalizar bloques entrecomillados, bombilla intermitente para Blogger

Este tutorial realmente le permitirá crear bloques entrecomillados impresionante y atractivo para sus puestos de blogger o sitios web. Estos bloques entrecomillados cambiará de color cuando el cursor del ratón se asoma sobre ella.  Pero este efecto bloques entrecomillados es excepcional! Sólo echar un vistazo de un blockquote siguiente ejemplo.

 

Interesante, ¿no? Ahora vamos a aprender cómo añadir efectos similares como el efecto bombilla parpadea arriba.

Añadir El Blockquote bombilla intermitente para Blogger

Esta blockquote se puede añadir en la forma similar a como se explica en mis mensajes earliar. Si usted es nuevo a continuación, lea esta parte de mi post anterior -> Agregar y personalizar Blockquote En Blogger
El código CSS que se inserta justo por encima de ]]></b:skin> es esto,

blockquote {
background: #000 url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5enN3yNAiJ9rlZvGnqovwPEMix3B_3xgzFcXV5VhdNwmMtg7UBZpgGsW3C_9teA3QkoJpP8U3MLM3Rkezw73QnYY01bekJjA1dBRZkWBRo0FSrvr03JjnFti1mdacVEa7zTwd8I2mses/s1600/bulb-off.gif ) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif;
border:1px solid #DDD;
}

blockquote:hover {
background: #000 url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5chfEYPltUuXk0B81T118SXrou4jfa5O5nDpSQQ74Qu0hNMVs7K1ZDWhSlaPMeZe4HUUDrqbJahxQpIvehQkr3Up155f0ze02wJyNOJ5zGJvprxMlOByXpdmMNcGqozagCfuU-i0KWPs/s1600/bulb-on.gif ) no-repeat right bottom ;
color:#E0E089;
}


blockquote p {
margin: 0;
padding-top:10px;
}

La segunda imagen en el enlace rojo aparece al pasar el ratón estacionario y la segunda imagen de enlace verde aparece cuando el ratón se mueve fuera de los bloques entrecomillados

Etiquetas al Estilo Taringa en Blogger

 Bueno es este día les enseñare como colocarle mas estilo a nuestras etiquetas en blogger, esta ves tendrán el estilo de taringa, que ya todos conocemos. bueno empecemos

La etiquetas siempre se muestran con un código similar a este:

<span class='post-labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>
</b:if>
</span>

Eliminamos este código:

<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

Colocamos este Código antes de </b:skin>:

.post-labels {
margin: 0;
padding: 0;
}
.post-labels a {
float: left;
position: relative;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq6qAa1ntEZ7loC-pSJ_RD477JILW_HwKz5hrGEem6EtbNP2l9rR5Og_YFaUgnejiwP7EU7HfuYyxgxdwR2n0ugAtOYhD2bphMlndNkdo2UjZ8H_iqsieHFstIFt4A8jg9sJo7mdH3va4/s400/tag-taringa-ajmrdesign.com.png") no-repeat bottom right;
height: 24px;
line-height: 24px;
padding:0 10px 0 8px;
margin: 0 0 0 25px;
color: #333;
font-size:13px;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
text-decoration: none;
}
.post-labels a:before {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq6qAa1ntEZ7loC-pSJ_RD477JILW_HwKz5hrGEem6EtbNP2l9rR5Og_YFaUgnejiwP7EU7HfuYyxgxdwR2n0ugAtOYhD2bphMlndNkdo2UjZ8H_iqsieHFstIFt4A8jg9sJo7mdH3va4/s400/tag-taringa-ajmrdesign.com.png") no-repeat;
content: "";
width:15px;
height: 24px;
float: left;
position: absolute;
top: 0;
left: -15px;
}
.post-labels a:hover {
text-decoration: underline;
}

Y listo ya tenemos nuestras etiquetas a un mejor estilo

via: mil trucos blogger 

Manual de css3 en español gratis pdf

Bueno, ya hemos hablado de lo importante que es CSS3 para el diseño web. Antonio Navajas, autor del libro, es un desarrollador front-end, diseñador y formador ocasional. Ha colaborado activamente en varios proyectos relacionados con la web, la formación y el diseño en general. Como todo avanza muy deprisa en el mundo de diseño, hay que estar siempre muy bien informado sobre las novedades que ocurren en diseño web.

Antonio Navajas ha hecho una modificación de su curso de CSS3 en Cristalab. Aquí os dejo el manual de CSS3 en español para que podáis descargarlo gratis.

Manual Css3 gratis

Personaliza gadget de Entradas populares

En esta ocasión les enseñare como agregarle estilo al gadget de  Entradas populares con css,
lo único que tenemos que hacer es:


 Ve a la Edicion HTML de tu blog y antes de ]]></b:skin> y pega lo siguiente:

popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Kruk_lcKA4tVqmJ0dnnDzQAc67QUu_aaNirTNxStIn74Wt9ALLn9NIipin1GPZ7dBiFSdWA-yIiaNtF2RIy8i-C7Xta5kACr7oSOXh1Ysud6-08yxFa_1L6u-lrZsiSz83r4ghqk3Lo/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;/* radio del borde */
-moz-border-radius:10px;/* radio del borde */
-webkit-border-radius:10px;/*  radio del borde  */
}
.popular-posts ul li:hover {
border:1px solid #ff9900;/* color de borde al pasar en cursor */
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Enumerar comentarios animados con css

Para poder
enumerar nuestros comentarios animados solo tenemos que agregar lo siguiente

Agregar el CSS.

Usando la nueva interfaz, ve a Plantilla > Personalizar > Avanzado > Añadir CSS, y en el campo agrega el siguiente código CSS, y guardas los cambios en Aplicar al Blog:

.comment-thread ol { counter-reset: contarcomentarios; }
.comment-thread li .comment-header:after { content: counter(contarcomentarios,decimal); counter-increment: contarcomentarios; float:right; font-size: 20px; color: #E6E6E6;
margin-top: -4px;} .comment-thread ol ol { counter-reset: contarbis; } .comment-thread li li .comment-header:after { content:
counter(contarcomentarios,decimal) "." counter(contarbis,decimal);
counter-increment: contarbis; float: right; font-size: 16px;
color: #E6E6E6; margin-top: -4px; }

 le das clic en aplicar planilla y listo.