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/AVvXsEhvHNgfWW-YS9c-AuKeWR7PdeKX-dPjfQjD_kyJHGGDu8SFuAjEc6HaYUlRHY8Adc5XVTyKcUt1lyf207vpeeNaxRy1q9bPKHisZR-upNsF4StSj2Y0X1sOMOU5TBk0ayPqOgGFd2QAHc4/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/AVvXsEixdzU9FvcrzYLf15bntpLINk3Jm5SXqcwu5UjIBns3-3_cA_G5QCPuqxy71s7_crUj0nAvDpFnYJY2TUCnPUcfbM9GXFFYN4dpNUMds9QFEQm02I1cnIKpGeg9nqPNNwsa2RZ2qsPOTn8/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/AVvXsEgf95bRfpPkiWJUjtMLjPoOGoEjEdOR1aD4HUyJxtR4JLuvo3_R3OFp5k6752THog0reYyE6DRGk8b3b32kRAi_jjvsxtlyp0nNxh0r9DWftAPWiQNwp_CayCOvadL3iNUEV1bVfipTMNY/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/AVvXsEg5QJzAC-RK7X7rvaFvOtTT2Q1D11roQKRhQVd-VTi6i-Efu_7AVO1Jj609CrGnT5_PLCqPJyRNsoLUWjUbfnjD5fITET49HKkKhamVspM5KXuyuOaoEM_17xlKz9k6-ddwOh302yYhuZc/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/AVvXsEglvYYe6VdTcrYw8ilLseR2aKlmgj5AqxhYbZFJ_IDp_lrLHp97LswEGys5OwuAQySmPMzZBC4cdmU8h49itCCZFCngll1SjIcdH4BbJELtLLJadKXeR8AurrUNIqH67GodBiKiL_o0Qj0/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/AVvXsEhU7ml5GYWLokulAPLKwtxbbnfacPHzsojNz7V7QPi-Ii5nAzZui-1bjQz0Y936dPpLhJbBnbjQaHutox2pYjJeoPvi_q102OsfRPAVtoEnAlM4o2fliKqZ5BJFxiLAkeVfCg-TOIdbMHQ/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.