Gadget de Redes Sociales con efecto de Opacidad

By: Jonathan Lozano on 11:26

Hola amigos de bloggerFLV hoy les vengo a traer un gadget que es llamado "Nuestras Redes Sociales" bautizado así por su creador Hayder Juvinao. Modifiqué este gadget por la razón que el diseño no era tan perfecto, ya que tenían un fondo blanco que no se podía agregar a las plantillas de color negro.

Ahora,  con este gadget modificado en las plantillas negras quedarán así.

Lo bueno de estos iconos, es que obtienen un efecto de opacidad al pasar el cursor sobre ellos.

PASA EL CURSOR SOBRE ELLOS

Para añadirlos nos vamos a la Edición HTML de vuestro blog y con CTRL+F buscamos:

<b:skin>...</b:skin>

Si no lo encuentras busca solamente <b:skin> y desmarca la flecha que se encuentra en esa linea.

Después busca ]]></b:skin> y arriba de esta añade:

#social img:hover {opacity: 0.6;}

Guarda los cambios y dirigete a Diseño → Añadir Gadget → HTML/Javascript y pega:

<div id="social">
<a href='URL FACEBOOK' target="_blank"><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5JZLooX4EAcVg1MD4sbIrqEzVwAzWq8VO3Rik0JRbOTjH4cM6TSGxMb-zEnBrVHvh-T_wlbeJIRoYZNhrDaJv4LqSvc7ftrVfYaRqcDtgc1BmfBIJ1F5xaeyuYnVTfgs6bWZIApyrqeWY/s1600/facebook.png" title="Siguenos en Facebook" /></a>
<a href='URL GOOGLE PLUS' target="_blank"><img alt="Google+" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP0nqLRkiCLx0oHGvsAaibzURr9Jk3EJCz1PgsS6LLU0pFRbmxs6HdbRskeiyQSa1yKuTYQLfRXP5m59xAs1gmAFC5HrkT9iKkowC8xcHDBUKeVIqiXetcXa9cYRu9S7oUUet2Of2fvAri/s1600/google+plus.png" title="Siguenos en Google Plus" /></a>
<a href='URL TWITTER' target="_blank"><img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjElJ4FQabalNmJuWlpiGxOG-bTcEPM9fS7Lv8bFoO-IfKnfi8rJokn9f3W597Y87oJ0uupnf7lc3_ueEKCn17uq_gyB-8CHMC2QdRY2FszBz0v3B56MrOTUtNr2VdXyqUtFzSj0mM9rcmP/s1600/twitter.png" title="Siguenos en Twitter" /></a>
<a href='URL RSS FEED' target="_blank"><img alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYrjBtjVL4zcNaOXFBD9dWLJ-7dCQuMlMmi7oR5u2bQQBIAeX3XIDFznNKraiaqiunnNv_Lbi_MjVT0Hb4f4ftoG_OEzxfGa3audG4jqvVUmCwcKZqRyj8qDRAoeoJRNyl3E7jwhLbspPc/s1600/rss.png" title="Suscribete a nuestro RSS" /></a>
</div>

Cambia lo que está en rojo por lo que indica.

Read More

Iconos Sociales con efecto Pop Up

By: Jonathan Lozano on 10:17

Los iconos sociales son una forma muy ingeniosa de ganar seguidores para nuestras redes sociales mediante nuestro blog. Hoy les vengo a traer unos Iconos Sociales que obtienen un efecto Pop Up al pasar el cursor sobre ellos.

Read More

Iconos Sociales que giran y cambian de color al pasar el cursor con css3

By: Jonathan Lozano on 17:29

Como anteriormente habíamos visto los Iconos Sociales con efecto giratorio este tipo también giran, pero a la vez cambian de color, y vienen en otro diseño y no se necesita modificar la plantilla.

Read More

Banner Cambiante

By: Jonathan Lozano on 17:33

Hace días ví una nueva forma de una nueva forma de que otros blogs se anuncien en el tuyo, que es el Banner cambiante (rotador de banners) si tenemos que mostrar muchos banners, esto nos servirá mucho, ya que nos ahorrará mucho espacio en nuestro blog.

Read More

Gadget de Multibanner

By: Jonathan Lozano on 7:27

Hoy en día muchos bloggers quieren ponerle publicidad a su blog, pero no hablamos de Adsense, claro que también se puede ganar dinero haciendo que otros bloggers te paguen a cambio de tú pongas la publicidad de ellos en tu blog, o haciendo intercambio de banners, y se benefician los dos. Por eso hoy les traigo este gadget de multibanner, que puede agregar varios banners y ocupa muy poco espacio,

Para añadirlo nos vamos a Diseño → Añadir Gadget → HTML/Javascript y pegamos:

<div class='ads'>
<a href='#' title='¡Espacios disponibles para tu banner!'><img src='https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
<a href='#' title='¡Espacios disponibles para tu banner!'><img src='https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
<a href='#' title='¡Espacios disponibles para tu banner!'><img src='https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
<a href='#' title='¡Espacios disponibles para tu banner!'><img src='https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
</div>

Puedes añadir más banner si deseas, solo pega este codigo debajo de </div>:

<a href='#' title='¡Espacios disponibles para tu banner!'><img src='https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>

Solo cambia lo que está en rojo por el link que desees, y si no te gusta el diseño de los banners cambia lo que esta en troll  por el link de la imagen que quieras. 

Read More