Hola nuevamente te ensenare el super truco de añadir imagenes con circulo con un lindo efecto de activacion al poner el cursor de tu raton sobre las mismas.Para asi darle una apariencia distinta y atractiva a tus imagenes ademas a tu pagina de blog.
Para que puedes utilizar este super truco de efecto de imagenes con circulo?
Puedes utilizarlo para enlace a su página o articulo,como ejemplo: Contacteme ,Pagina Sobre autor,etc.
Como se logra este efecto a las imagenes?
Este efecto se logra gracias al conjunto de codigo CSS y HTML.Para ver efecto en vivo da clic en la imagen siguente:
Como insertarlo en mi blog de blogger?Puedes insertarlo en tu blog de blogger siguiendo estos simples pasos.
1.Entrar a la cuenta de blogger y Click desplegable.
2.A continuación, seleccione "Plantilla", como ejemplo de abajo.
3. Ahora se puede ver en vivo en el blog, haga clic en el botón Editar HTML "
4. Ahora haga clic en el botón Continuar.
5.Encuentre el siguiente código ]]> </ b: skin> mediante el uso de Ctrl + F
6. Pegue el código de abajo antes del código ]]> </ b: skin>
/* Ciudadblogger */
.Btrix-item {
width: 150px;
height: 150px;
border-radius: 50%;
position: relative;
cursor: default;}
.Btrix-info-wrap,
.Btrix-info{
position: absolute;border: 1px solid #8D8D8D;margin-top: -1px;width: 150px;
height: 150px;
border-radius: 50%;}
.Btrix-info-wrap {
background: #07CFE0 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.Btrix-info > div {
display: block;position: absolute;width: 150px;height: 150px;
border-radius: 50%;
background-position: center center;
-webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}
.Btrix-info .Btrix-info-front {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.Btrix-info .Btrix-info-back {
opacity: 0;background: #07CFE0;pointer-events: none;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out 0.2s;
-moz-transition: all 0.4s ease-in-out 0.2s;
-o-transition: all 0.4s ease-in-out 0.2s;
-ms-transition: all 0.4s ease-in-out 0.2s;
transition: all 0.4s ease-in-out 0.2s;
}
.Btrix-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnhc0doiuRox6_v08dUxSpmmMQv9CXZhaRS8YdGtoeUCG-aqAzN37XiSMxSjYzRQrXXCfzb_DQxqEuo_O_K34vWXwkSeL0Nm3j9mtxkP08Yu3bk2TgLdxVLHGFXgdIVmd8YrokHwod0u4/s1600/bloggertrix-image+1.jpg);}
.Btrix-img-2 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikIqtoAi1mWv-7_dFIpxdkViwKYMTd9qJ7BGoh2R9ebtPXHVnsp02HNO1pG5hfSlEQ0Swm8ufXThZXqM7wHfx18KwhjZERSAGMQaJSlkFlzX6jnPFGOQK4miA10wuLZjZzv2_83vna7pM/s1600/bloggertrix-image+2.jpg);}
.Btrix-img-3 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ZMajxKqg_Wkaoqu_5EA34QNKZ_x9dJ8566b4DpWqwonvzx0wIjn5GrejV4-reINwdXRmI7NSeD4JpwUQm5sm7NE3xoOyTyEd64YNQknMTBnf94VdjKbxVpTZ3iz8X6SPg6thB1W_zRw/s1600/bloggertrix-image+3.jpg);}
.Btrix-info h3 {
color: #fff;
text-transform: uppercase;letter-spacing: 2px;font-size: 16px;margin: -20px 15px;
padding: 40px 0 0 0;
height: 80px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.Btrix-info p {
color: #fff;
padding: 10px 5px 0;
font-style: italic;
margin: -60px 30px;
font-size: 15px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.Btrix-info p a {
display: block;color: #e7615e;font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.Btrix-info p a:hover {
color: #fff;
}
.Btrix-item:hover .Btrix-info-front {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.Btrix-item:hover .Btrix-info-back {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
pointer-events: auto;}
.Btrix-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;}
.Btrix-grid:after,
.Btrix-item:before {
content: '';
display: table;}
.Btrix-grid:after {
clear: both;}
.Btrix-grid li {
width: 150px;
height: 150px;
display: inline-block;
margin: 4px;
}
* Usted puede cambiar la imagen a su gusto.Estoy usando imagenes de 180x180 pixeles.
7. Ir a blogger y haga clic desplegable como primera etapa y seleccione Diseno.
8. Haga clic en Agregar un Gadget y seleccione "HTML / Javascript"
9. Pegue el siguiente código.
<section class="main">
<ul class="Btrix-grid">
<li>
<div class="Btrix-item Btrix-img-1">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-1"></div>
<div class="Btrix-info-back">
<h3>
Moda</h3>
Por Ciudadblogger <a href="http://www.ciudadblogger.info""><br/>Enlace del Articulo</a><br />
</div></div></div></div></li>
<li>
<div class="Btrix-item Btrix-img-2">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-2"></div>
<div class="Btrix-info-back">
<h3>
Naturaleza</h3>
Por Ciudadblogger <a href="http://www.ciudadblogger.info"><br/>Enlace del Articulo/a><br />
</div></div></div></div></li>
<li>
<div class="Btrix-item Btrix-img-3">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-3"></div>
<div class="Btrix-info-back">
<h3>
Automovil</h3>
Por Ciudadblogger <a href="http://www.ciudadblogger.info"><br/>Enlace del Articulo</a><br />
</div></div></div></div></li></ul></section>
<ul class="Btrix-grid">
<li>
<div class="Btrix-item Btrix-img-1">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-1"></div>
<div class="Btrix-info-back">
<h3>
Moda</h3>
Por Ciudadblogger <a href="http://www.ciudadblogger.info""><br/>Enlace del Articulo</a><br />
</div></div></div></div></li>
<li>
<div class="Btrix-item Btrix-img-2">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-2"></div>
<div class="Btrix-info-back">
<h3>
Naturaleza</h3>
Por Ciudadblogger <a href="http://www.ciudadblogger.info"><br/>Enlace del Articulo/a><br />
</div></div></div></div></li>
<li>
<div class="Btrix-item Btrix-img-3">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-3"></div>
<div class="Btrix-info-back">
<h3>
Automovil</h3>
Por Ciudadblogger <a href="http://www.ciudadblogger.info"><br/>Enlace del Articulo</a><br />
</div></div></div></div></li></ul></section>
* Usted puede cambiar la cabecera de acuerdo a la imagen y la URLde la imagen.
10. Ahora guarde la plantilla.Listo..
0 comentarios:
Publicar un comentario