Deslizador De Iconos Social Con Efecto Hover Para Blogger

 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.

• Facebook
• Twitter
• Google plus
• Rss

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.

Read More

5 Set De Iconos Gratuitos Para Tu Blog o Pagina Web

En esta ocasion te brindare algunos de los iconos atractivos y gratuitos de la Internet. Los iconos son una de las características más importantes de cualquier proyecto relacionado con la web y buenos iconos son como un verdadero regalo del cielo para los diseñadores web.

Cada diseñador sabe que los iconos pueden hacer mucho cuando se necesitamos hacer una presentacion de diseño completo. Anteriormente, hemos compartido con nuestros lectores algunas buenas colecciones de iconos gratuitos y ahora es el momento de darles algunos nuevos juegos que pueden resultar útiles, e incluso para añadir algunos a su colección. Por lo tanto, hoy te presentamos nuevos y gratuitos sets de Icono .

1.Socialico
Socialico es un paquete de 74 iconos de redes sociales, combinados en una sola fuente wieght y diseñado por Jelio Dimitrov aka Arsek.

2.Mini Tarjetas: 15 Iconos de tarjetas de crédito / débito
 Como ya sabemos, Fabio es un píxel-perfeccionista e ingeniero de software con sede en el Reino Unido e Italia. Dado que ha sido tan amable de donar dos contribuciones ahora, usted debe definitivamente darle las gracias en Twitter (@ fffabs) Hazlo!

3.Social Media Icon Pack por Vector Open Stock

Este es un gran y brillante, paquete de iconos de medios sociales brillante detallado. Sólo se puede ver en ilustrador, ya que contiene algunos efectos agradables como desenfoque y sombras. Al igual que los botones.

4.Gratis Paquete de Iconos de Sweet Candy Social

El nuevo conjunto de iconos "Free Sweet Candy Mix Social Icon Pack" contiene 17 iconos gratis sociales disponibles en 4 colores: azul, naranja, rojo y púrpura. El "Free caramelo Mix Social Icon Pack" se compone de alta calidad, libre de 128 × 128 píxeles iconos, formato de archivo PNG para las siguientes redes sociales: delicioso, DesignBump, Design Float, devianart, Digg, Diigo, Facebook, Feedburner, Flickr, Gmail, LinkedIn, NewsWire, Reddit, RSS, StumbleUpon, Technorati y Twitter.

5.Nuevo Set de Iconos De Social Media

El social media icon set contiene 25 vectores escalables con sombras semi-transparentes para el uso en los distintos tipos de fondos.
 El social media icon set fue creado en Illustrator CS5 y contiene 25 vectores escalables con sombras semi-transparentes para el uso en los distintos tipos de fondos. La descarga contiene un archivo. Zip con el original. Archivo ai y una versión. EPS también. Los iconos están disponibles para su uso en proyectos personales y comerciales.

Read More

Añadir Iconos Sociales Rotables Usando CSS en Blogger

La Adición del llamativo widget de intercambio social a su blog o sitio aumenta las posibilidades de conseguir más suscriptores. La mayoría de los visitantes son la fuerza que hace clic en tu currículum de suscripción debido al widget de reparto increíble que les presento, por qué algunos hacen clic en él sólo para  pruebar y antes de que te des cuenta, se convierten en tus fieles suscriptores o seguidores.
Ahora voy a compartir con ustedes, un widget de intercambio social que rota, que giran al poner el ratón, según el grado ya establecido, y regresa a su posición original cuando se quita el mismo.

 Ejemplo:

Como Añadir Iconos de Rotacion Sociales a tu Blog

• Entre a la interface de tu blogger
• Da Click on Diseño > Elementos de Pagina > Añadir un Gadget(Vieja interface de blogger)
• Da Click en Plantilla > Añadir un Gadget (Nueva Interface de Blogger)
• Selecciona HTML/JavaScript  de la lista de opciones y pega el siguiente codigo en area de contenido

<style>

p#rb_socialicons img {
 /* Spinning Social Icons Widget por www.ciudadblogger.info */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

p#rb_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* Spinning Social Icons Widget por www.ciudadblogger.info */

</style>


<center><p id="rb_socialicons">
    <a href="http://www.facebook.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimKgl52fFWcmRAcawhKraEM0Ea1vGuI7RF4USH2_ZZmhyphenhyphen5DMd551L_po6jwYJSt1Ybg5GW10XUrZGpzejHwQKLGwiVDgHbjZL-T3L6x_xqBKYXMXNg0rqJMJTPBXGi0wOlSHmxhKLU-dw/s1600/rb+facebook+icon.png" /></a>
    <a href="http://www.twitter.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhovZLzUNatZSgj_gALt377ic90gr-itC3TFdIGzdx7JHlBDfyS3-icmCaLIqi33EwP274qKlkdEDeOs79Uu4kSSFdPmIRf28fLzfA_GJikkPa9ObIA5VDKolX4KkGfeAAVmPvdDuUl750/s1600/rb+twitter+icon.png" /></a>
    <a href="https://plus.google.com/u/0/110710740924167130289">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbp68jxTL5-GdD3GMRA8vyKiCadRio4gHv6ffhMmf98uNV0fJbXZtqqv8tuCCHZUArFykDbk-Fxt1dZ_P4xx03zFPevdyPWjx-xfQZOX1BCxxXGfqSs9F6Lobg-7iAJOWdC-22tTNu3g/s1600/rb+google+plus+icon.png" /></a>
    <a href="http://www.feeds.feedburner.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyMCodq5doGcz-UFNTPdPyX6hFq9-P-Mqgqb6c6zb_jZKs9G3y1_ZetqZB1LdnHKUQIuH4BmjtwaUENpBVrEyHkihFaH2EjxCQfXKTRXv3OTozD7ElZEdcRat_da6WEjBFI5WieuqDVYY/s1600/rb+rss+feed+icon.png" /></a>
    <a href="http://www.youtube.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaF_iiWzirHIJqRSKrWjOBIuxMbMS6pQTqK7cgrBN2sGFBHFEKoLZtr6_64wsR7rwXfakg6FHm1_AowcNBy25DyQ5vqxEoXNLnJ4w_w-yVH5ZMW1GLXJ99NYQkUZksGC4JobrggLeOM5g/s1600/rb+youtube+icon.png" /></a>
</p></center>

• Da Click en Boton de Guardar 

Customizar

Puedes facilmente personalizar tus  icons a tu gusto editando el codigo de abajo

• Para cambiar el rate (tiempo tomado) cuando rota el icono, simplemente edite 0.8s
• Puedes cambiar el grado que se hecha el icon en rotar,simplemente edite 360 grados.

Listo que lo disfrutes.

Read More

Paquete Gratis de Deslumbrantes de Iconos de Neon Para Tu Blog

Los Iconos de imagenes de las redes sociales ,simbolos en tipo neon hacen lucir y mejoran la apariencia de tu pagina web o blog de blogger y aqui te traigo un enlace para que los bajes gratis.

                             Da Click para  Bajar estos Iconos en Neon gratis para que los utilices en tu blog.

Read More