bloggerFLV: Redes sociales

Mostrando entradas con la etiqueta Redes sociales. Mostrar todas las entradas

Gadget de Redes Sociales con efecto de Opacidad

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.

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

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.

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.

Pack de Iconos Sociales en forma de corazón

By: Jonathan Lozano on 10:24

Nuevo pack de iconos en forma de corazon son 6 tipos de iconos entre ellos está Facebook, Twitter, Rss Feed, Yahoo!, Youtube y Delicious que tienen un toque brillante

Se trata, en seis tamaños diferentes: 16 x 16, 24 x 24, 32 x 32, 48 x 48, 64 x 64 y 256 x 256 en formato PNG con muy buena calidad. Tiene fondo transparente.

Nota:
Los iconos en 16 x 16 se pueden usar como Favicon

Descargar

Widget de twitter

By: Jonathan Lozano on 17:31

En este tutorial les enseñaré algo muy simple, que es AÑADIR EL WIDGET DE TWITTER EN BLOGGER para que los usuarios de twitter, puedan ver las actualizaciones que haces en tu blog, mediante su cuenta, para ello solo nos iremos al administrador de widgets de twitter,nos logueamos, y nos saldrá esta pagina:

Ahí tendremos que darle click en Crear Nuevo. Después nos saldrá otra pagina como esta:

Ahí configuras el widget a tu gusto, cuando termines le das en Crear widget, después te aparecerá una caja con un código en donde tendrás que pegarlo en la Edición HTML de una Pagina en Blanco, Entrada o en un Gadget → HTML/Javascript.

Iconos Sociales con efecto giratorio

By: Jonathan Lozano on 16:56

Las redes sociales, se han vuelto en algo primordial si queremos dar a conocer a los lectores de vuestro blog, que hiciste una publicacion, por eso hoy les traigo iconos de redes sociales que obtienen el efecto de girar al momento de pasar el cursor sobre ellos lo puedes encontrar en la parte superior de tu blog,puedes ver los iconos en accion en este blog de pruebas.

AÑADIENDO EL TRUCO

Nos vamos a la Edicion HTML de vuestro blog, con CTRL + F buscamos ]]></b:skin> y antes pegamos:

/* Iconos de redes sociales
----------------------------------------------- */
#social-iconos {
width:100%;
height:50px;
margin-bottom:10px;
display:block;
clear:both;
}
.social-icons{display:table}
.social-icons ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:right;
padding:5px 5px 0 0
}
.social-icons ul {
padding:0;
float:right;
margin-bottom:0;
}
.social-icons li.social_icon {
background:none !important;
padding-left:0 !important;
display:inline;
float:left;
margin-left:6px;
}
.social-icons li:hover {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
}

Luego buscamos la siguiente linea:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'

Y arriba de ella, agrega:

<div class='social-icons' id='social-iconos'>
<ul>
<li class='social_icon'><a href='URL DE FACEBOOK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUfHwo8YkLCdz_jh5Hmci8IQiaLwZDeSvYJAjiKhsv7aSx20EKLE2snsb5Ezvm7wMh_Il1fhbqFVEVeVH_XsPD4M-xb6SoqHkIcCujMj_BWMtiieUuQPXc7tYl2Iiz0jtBMxvuIkhaN_M/s36/social-facebook.png'/></a></li>
<li class='social_icon'><a href='URL DE TWITTER'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHMhzC0LQ7ggf0kJzFaCd1lU4-v8TtGhB4UI0mGN7juqYdPS4lWaY1KvoM_SHa-20uS9B1SiRJ24lQUi3ox8ELufmG4ByXDcKHThDkSi4AvUl0juLnQrh7b08H82D7SVXiLx-LOslXisc/s36/social-twitter.png'/></a></li>
<li class='social_icon'><a href='URL DE GOOGLE PLUS'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1GmaEmu48TdiuXlV5yT7X4WDO_yrsa71nsYRmAiJOf-k1s2Z-wk19ywLbb3bNoBjyxpepAI83Yc0bxYrtND28-yVa8fw9jsy0Rbfy9cDfR4JJovhyphenhyphenJBizDiQ4sQbgTK-yK0UpW2ZWHNQ/s36/social-googleplus.png'/></a></li>
<li class='social_icon'><a href='http://nombre-de-mi-blog.blogspot.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKE_TaoFBxUZ1OvAPQ9Qalf4c63K4etY7sXxA1ExjykoMOPmXOkWlVGfKy526yV-t9NMAnEWvwBgOVqP1b6ESECQ6dJiWw8MgJIOiO9PnEuU2jv4TI0IvoP1Vab-F7EX7r4xW_6d1yFOA/s36/social-rss.png'/></a></li>
</ul></div>

Nota Cambia lo que está en rojo por lo que indiga en cada caso. Puedes añadir más iconos, solo añadelos antes del </ul></div> una linea como esta:

<li class='social_icon'><a href='URL del enlace'><img border='0' src='URL de la imagen'/></a></li>

También puedes ponerlo en un HTML/Javascript. Eso queda a eleccion de cada uno.
Lo que está en troll es la url de la imagen, si no te gusta el diseño de los iconos los puedes cambiar por estas imagenes: