Hola Amigos hoy te mostrare como añadir la tecnica de vuelta que crea una serie de botones CSS que giran en sentido horizontal sobre sí mismos cuando el ratón pasa sobre ellos, creando un elegante efecto de captura, ojo. Emplea la transformacion y tansicion conCSS3 para hacer el trabajo. Este menú funciona en IE10 +, y todas las versiones modernas de FireFox, Chrome, Safari y Opera. Seejecuta ademas a la perfección con los navegadores más antiguos, a IE7.Podras anadir estos iconos de redes sociales a tu blog de blogger en columna de lado.
Ejemplo:
Te mostrare como instalarlos en tu lado derecho de tu pagina de blog de blogger,solo sigue estos simples pasos.
1. Entra en Blogger
2.Entra Plantilla>>Editar Html busca el siguiente codigo ]]<b:skin>
3.Copia y pega el siguiente codigo arriba/encima de ]]<b:skin>
<style>
ul.flipboard{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard li{
display: inline-block;
width: 80px; /* dimensions of buttons. Do not add padding/margins inside this rule */
height: 80px;
margin-right: 10px; /* spacing between buttons */
background: white;
font: bold 36px Arial; /* font size */
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 15px; /* Add top padding to "center" content */
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard li a img{
border-width: 0;
}
ul.flipboard li:hover a{
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff; /* background color of button onmouseover */
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard li:hover a span{
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
ul.flipboard{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard li{
display: inline-block;
width: 80px; /* dimensions of buttons. Do not add padding/margins inside this rule */
height: 80px;
margin-right: 10px; /* spacing between buttons */
background: white;
font: bold 36px Arial; /* font size */
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 15px; /* Add top padding to "center" content */
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard li a img{
border-width: 0;
}
ul.flipboard li:hover a{
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff; /* background color of button onmouseover */
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard li:hover a span{
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
4.Entra en Diseño>>Añadir un Gadget>>Selecciona Html/Javascript y pega el siguiente codigo.
<ul class="flipboard">
<li><a href="http://www.ciudadblogger.info/rss"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVTDVzNyzV1DsdoZBDj1Ual5Q_Ez5-lFGEwDT66lqrUhtvrwcNmx_xGwDTquabonxEJ4RF1edXpcdeBHSkil394K2nUH-pktOpqOWXBOfLUaSc4TeKwfaVKtJVdbo7gSBp3Il_1MtN_ewl/s320/rss-heart.png" /></a></li>
<li><a href="http://www.ciudadblogger.info/twitter"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO8rmn6kS0O7TX423fzU5R5rNlUAYon7xFuxPYJJtVwxXQIp9ktSF7YtC16gXyGTbW2WadK67hZtdoxvNajQemVqhYaaYL4xity2icAD7M0QYa9Dz0QFO5PMZ19eLgyHX1ocW1x_THmps1/s320/twitter-heart.png" /></a></li>
<li><a href="http://www.ciudadblogger.info/facebook"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXNrDWfNUeOIjaRvi_fgZE05u0gkGxoNA3UJH5vS8hbF0PSGbkz0g7uivs4hz1SvA3S3mDi5apGjeS_Rhxh8o3dRym1_fGrhxH9bsaJDNzsLU_WGbFgN-LIMYFPWXXl-iSIayg0o4KpDj3/s320/facebook-heart.png" /></a></li>
<li><a href="http://www.ciudadblogger.info/google"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKfwFp0Bxez7DXuR-VymkTyAZXZ34_jwtDbamT5UZc_T8aEzgnwfsCjqmytCZV9Gr3WEPG7h0PjX0ogUmbN68GTGaWhxxKmnhyphenhyphend5ynIbktr7LQsq8MRG2PGUtdtrzQSQHHgh_nNC_AH56/s320/google-heart.png" /></a></li>
<li><a href="http://www.ciudadblogger.info/stumble"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ58Hh3LYQhIx7dB6l2nj5LG16vZyD7uKzAY5E-a7J-O3uDrKQSouDS2AxGzjfFckVuRtBf5QdHXjnUQ0iv6-me2vBteXWdaHpzSKeGq_324QuNx88EL0BOGKRUrcZullu8AGRHYoTF3N7/s320/stumble-heart.png" /></a></li>
<li><a href="http://www.ciudadblogger.info/yahoo"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr9WCWGxIj8qEiqm-ALxqif3ZYDCyhmW7Nib0DvO6UzMFECq5a1yAGI105-6B2_bUSn2faLa53lgxwI82fvNxvcccpafa4euxIf8cIEfi1sj2UEnbI-0B2BdgXbsxfq1-rwq1K39LV8bfx/s320/yahoo-heart.png" /></a></li>
</ul>
<li><a href="http://www.ciudadblogger.info/rss"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVTDVzNyzV1DsdoZBDj1Ual5Q_Ez5-lFGEwDT66lqrUhtvrwcNmx_xGwDTquabonxEJ4RF1edXpcdeBHSkil394K2nUH-pktOpqOWXBOfLUaSc4TeKwfaVKtJVdbo7gSBp3Il_1MtN_ewl/s320/rss-heart.png" /></a></li>
<li><a href="http://www.ciudadblogger.info/twitter"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO8rmn6kS0O7TX423fzU5R5rNlUAYon7xFuxPYJJtVwxXQIp9ktSF7YtC16gXyGTbW2WadK67hZtdoxvNajQemVqhYaaYL4xity2icAD7M0QYa9Dz0QFO5PMZ19eLgyHX1ocW1x_THmps1/s320/twitter-heart.png" /></a></li>
<li><a href="http://www.ciudadblogger.info/facebook"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXNrDWfNUeOIjaRvi_fgZE05u0gkGxoNA3UJH5vS8hbF0PSGbkz0g7uivs4hz1SvA3S3mDi5apGjeS_Rhxh8o3dRym1_fGrhxH9bsaJDNzsLU_WGbFgN-LIMYFPWXXl-iSIayg0o4KpDj3/s320/facebook-heart.png" /></a></li>
<li><a href="http://www.ciudadblogger.info/google"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKfwFp0Bxez7DXuR-VymkTyAZXZ34_jwtDbamT5UZc_T8aEzgnwfsCjqmytCZV9Gr3WEPG7h0PjX0ogUmbN68GTGaWhxxKmnhyphenhyphend5ynIbktr7LQsq8MRG2PGUtdtrzQSQHHgh_nNC_AH56/s320/google-heart.png" /></a></li>
<li><a href="http://www.ciudadblogger.info/stumble"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ58Hh3LYQhIx7dB6l2nj5LG16vZyD7uKzAY5E-a7J-O3uDrKQSouDS2AxGzjfFckVuRtBf5QdHXjnUQ0iv6-me2vBteXWdaHpzSKeGq_324QuNx88EL0BOGKRUrcZullu8AGRHYoTF3N7/s320/stumble-heart.png" /></a></li>
<li><a href="http://www.ciudadblogger.info/yahoo"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr9WCWGxIj8qEiqm-ALxqif3ZYDCyhmW7Nib0DvO6UzMFECq5a1yAGI105-6B2_bUSn2faLa53lgxwI82fvNxvcccpafa4euxIf8cIEfi1sj2UEnbI-0B2BdgXbsxfq1-rwq1K39LV8bfx/s320/yahoo-heart.png" /></a></li>
</ul>
Nota:Cambia www.ciudadblogger.info/ por direccion de tu redes sociales tales como las que muestran los iconos.
5.Guarda Anadir un Gadget.Listo tendras integrado este lindo gadget a tu blog de blogger que dara un estilo especial a tu pagina,que los visitantes disfrutaran.
0 comentarios:
Publicar un comentario