Como estamos en época navideña he decidido hacer una serie de entradas con trucos navideños para que puedas decorar tu blog acorde a esta época, y en el día de hoy voy a compartir unos hermosos
iconos sociales navideños con efecto de zoom.El efecto zoom en los iconos es logrado gracias a CSS, mas exactamente por la propiedad
hovergallery.
Los iconos se ven de la siguiente manera:
Para agregar este truco a tu blog ve a
Diseño, Añadir Gadget, HTML/JavaScript y pega lo siguiente:
<div class="separator" style="clear: both; text-align: center;">
<a class="hovergallery" href="URL de tu cuenta de Google Plus" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc7vDLs7VYPWM2ZBEKl1V0VWiWktIkCX4jCeJ4HzRrylBgXe85pkQXGEqV211F1MrI6SjJakWHx_Vfq9orKkxQx67mYoqm6fYMUTp8uwpLHWlm9Byp272RvFUNy9p0LUicSgZiv9nsQFY/s1600/g+-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Facebook" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr3D_7RucYNiYnbfNNLs_igAMlnEE9kIZmDyf4A7WZ59q15q7Sbz0xGl4Rq0CHX7ceX7Da3g1HLwEA3ltz06YHfASM7wSyryuqjfkGtphRTkCcGsGRic928bn1RJKtI7HcgK74VQQ-skw/s1600/fb-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Linkedin" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF9dGFDAjRVrDdywcIJrZh8Jq2niL60WV0L3RClkoaDx4Ctb2mT2P9HugwdaxWFsA7-1yoxtD7ZN7k4FU1qRQ-gk_8CXsBXYnfL1MZpVa4eHht7KLakfFp7N8AjTjZML1QW_XFoHHYIMc/s1600/linkedin-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Pinterest" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjekSUNXa_jCdUVACZfdyZserJa7FAQS0l2QtiMXTJyyBgTparNaPozGOkcM6vSmFVQrPx9GhMfL9_yFnz0J4QqZDGF7saW9RuntLNxUy5rbWJucVUfksP7EwIKwVfmQdhzR75WWZWKbi4/s1600/pinter-ball-64.png" /></a>
<a class="hovergallery" href="URL de tu cuenta de Twitter" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGbvQS6o5B4wVWnzlkTfOK4uWstTtcZ9GuAjMOhDdIgi1bEZ_V-3A5OFNxxPWaO-CAV-UQSLbvSqjgwQpg5dlo5NhYUFSserVISHE-dvRA6XaTbzjYJVHnrbGcxEu9i07FkVlIQ5-spag/s1600/twitter-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Youtube" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOXxw_gW66yxHfJubnYIbynKTpIYSoW17Z4Tb5ODGjyqIZ6jmRUX9p170h4D5vv4Ko9X73Xo7an_iVvn0v_fFkEyLHJfLP8kqHMOEd92DObil9Ukhf5Y_wHSV3s_NYj-P8Tv_hb2hbuvQ/s1600/youtube-ball-64.png" /></a></div>
<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 1px 5px 0;
}
.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
</style>
Ahora reemplaza lo que esta resaltado en color azul por lo que se indica en cada caso y guarda los cambios.
Esperamos que te haya gustado este espectacular truco para tu blog y que nos sigas visitando.