lunes, 24 de junio de 2013

Deslizador De Iconos Social Con Efecto Hover Para Blogger

By andante77 9:50 a.m. , , , , , 1 comment
Deslizador De Iconos Social

 Hoy les mostrare el truco como anadir un maravilloso Deslizador Iconos Social con efecto de Hover para tu blog de blogger. Estos botones tienen un atractivo efecto de animacion al poner el cursor sobre los mismos.

Estos lindos botones estan hechos con codigo de CSS sin tener que utilizar el codigo de JavaScript. Este codigo a la vez ha sido optimizado para que descargue mas rapido en la pagina.Estos botones son atractivos y sus efectos lo hacen mas asombroso.Cuando pases el cursor sobre los mismos podras ver como se deslizan y cambia la imagen de los botones. Para verlo en accion aqui abajo.





Una vez veas la demostracion del mismo seguimos con el tutorial para anadir este widget a tu blog de blogger .

1.Entra en tu cuenta de blogger selecciona el blog donde instalarlo

2.Ir a Diseno>>Añadir un Widget
3.Selecciona HTML/JavaScript y pega el siguiente codigo.

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="#" target="_blank">Facebook</a></li>
<li><a class="twitter" href="#" target="_blank">Twitter</a></li>
<li><a class="google-p" href="#" target="_blank">Google plus</a></li>
<li><a class="rss" href="#" target="_blank">Rss</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4e-xh0LoZCZ_7fqkpGXytYDRKu-hDd5xng-Upw_BxROiAPbA3gUXxtGUAADn2Z8De-QcO0VxFmm79dsSdi7r2SCtzELcwUgCDOtBdrg2qrhRJ_nkABFQ3zEX4sahtLVBLiFpi0d1xpQ/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4e-xh0LoZCZ_7fqkpGXytYDRKu-hDd5xng-Upw_BxROiAPbA3gUXxtGUAADn2Z8De-QcO0VxFmm79dsSdi7r2SCtzELcwUgCDOtBdrg2qrhRJ_nkABFQ3zEX4sahtLVBLiFpi0d1xpQ/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMIyaEbXI3K1LIWj-xf2tHDHIUnG7pKntx22aVwkDZUOzGZnArl9eq7-doWHmuRh26cnBo80Yp5M6pq_DgKO9GiFFqYieK5s_MDbPAy75C2eW_ohxQG7zDE0J6TkRC7cvdeojzw8DI2g/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMIyaEbXI3K1LIWj-xf2tHDHIUnG7pKntx22aVwkDZUOzGZnArl9eq7-doWHmuRh26cnBo80Yp5M6pq_DgKO9GiFFqYieK5s_MDbPAy75C2eW_ohxQG7zDE0J6TkRC7cvdeojzw8DI2g/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw69f6w-gnxAGlRkFaB3X5JuRUELnxxaR7bf36IBq-VOHEugkik2dEQ3jhpeBJ6dWvwpSkuZgZRpLD2BrXE8oo123VJOf9p0dtomLowTK-yJjm-ueRZk1sg80HXe_2syIAnp7E7wYkrw/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw69f6w-gnxAGlRkFaB3X5JuRUELnxxaR7bf36IBq-VOHEugkik2dEQ3jhpeBJ6dWvwpSkuZgZRpLD2BrXE8oo123VJOf9p0dtomLowTK-yJjm-ueRZk1sg80HXe_2syIAnp7E7wYkrw/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLYQmh8u7d0PlZvJznN-XXlNpXi0LvrS6GkQ_WxaqW0f3RNfGf2L_taevj-mRQwnGYqsHcJdAVKYMpdKQLJfyg9V37wGnlLq9Uz9-yce_A6MrbU9rTGNFkVLlBcveqO2b7YxC214Cvvg/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLYQmh8u7d0PlZvJznN-XXlNpXi0LvrS6GkQ_WxaqW0f3RNfGf2L_taevj-mRQwnGYqsHcJdAVKYMpdKQLJfyg9V37wGnlLq9Uz9-yce_A6MrbU9rTGNFkVLlBcveqO2b7YxC214Cvvg/s1600/twitter.png) no-repeat 0 0}
</style>
4.Despues de cambiar el codigo cambia # por tu URL deseada y guarda el widget. Finalmente guarda la plantilla.

Todo esta finalizado. Ahora usted y los visitantes podran ver este asombroso deslizador  iconos  social con efecto animado en tu blog de blogger.
If You Enjoyed This, Take 5 Seconds To Share It

1 comentario: