add

Como agregar un widget flotante Social Media en blogger


Hoy voy a compartir un widget impresionante de Redes Sociales para blogger. Como ustedes sabrán la popularidad de las redes social ha crecido de forma sorprendente y es lo más importante para un blog, sobre todo por la cantidad de trafico web que le traerá a su blog. Este widget tiene un conjunto de cinco medios de comunicación social como Facebook, Twitter, RSS, Google + y Pinterest. Este sistema de redes sociales funciona con algunos simples pero eficaces CSS y el código java-scripts. El widget tiene efecto deslizante cada vez que un visitante se sitúe en un perfil social, que aparecerá con un efecto de diapositivas de ese perfil.

Como agregar un widget flotante Social Media en blogger

¿Dónde aparecerá este widget?

El widget de redes sociales apareceré a la izquierda de su blog de blogger y no le causara ningún error en el proceso de SEO en el diseño de su página, esta creado para cuando un visitante pase el cursor por una pestaña se desplace automáticamente y se abra el perfil social y de este modo el usuario podrá seguirlo.

¿Dónde insertare el código?

El código lo insertaran en un gadget widget y lo podrán ubicar donde mejor les parezca

Además, anteriormente di a conocer algunos trucos de blogger para redes sociales, podrán verlos en los siguientes enlaces


A continuación mire su demostración en mi blog de demos, el widget flotante está ubicado a lado izquierdo de la página de mi blog de demos.


Les gusto verdad!

Vamos a trabajar

1 Ir a blogger

2 Un clic en “Diseño



3 Abre un gadget “Añadir un gadget

Como agregar un widget flotante Social Media en blogger

4 Busca el widget que dice “HTML/Javascript” ábrelo e inserta las siguientes líneas de código en su interior


<style type="text/css">
ul#social {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#social li {
    width: 100px;
}
ul#social li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;   
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
     background:#0F96C6 url(http://3.bp.blogspot.com/-1wb-O4GG6DQ/UPFOe03M-lI/AAAAAAAAA4g/1015-y7FaYU/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(http://3.bp.blogspot.com/-1mYMKQENXdI/UPFOeK31VzI/AAAAAAAAA4k/w2Qk48tpleQ/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(http://1.bp.blogspot.com/-3M1F3Y29Yoc/UPFOeAAUFvI/AAAAAAAAA4c/ALvfOPDwJ-g/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(http://4.bp.blogspot.com/-twR0g7wotpE/UPFOfFtFOuI/AAAAAAAAA4o/uJMUf9hjRco/s1600/rss.png)no-repeat;
background-position:center center;
}

ul#social .pinterest a   {
    background:#963336 url(http://2.bp.blogspot.com/-xgOrG4ysqyM/UPFOeKFKMtI/AAAAAAAAA4Y/i_jnKpHsK24/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
    $('#social a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);

    $('#social > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        },
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
        }
    );
});
</script>
<ul id='social'>
 <li class='twitter'><a href='https://www.twitter.com/ayudadeblogger' title='Twitter'></a></li>
 <li class='googleplus'><a href='https://plus.google.com/114283163993086871162' title='Google Plus'></a></li>
 <li class='facebook'><a href='http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017' title='Facebook'></a></li>
 <li class='rss'><a href='http://www.ayudadeblogger.com/feeds/posts/default' title='Rss'></a></li>
 <li class='pinterest'><a href=''https://www.pinerest.com' title='Pinterest'></a></li>
</ul>

Nota: Si ya utilizas en tu blog de blogger un código jQuery en tu plantilla, tendrás que borrar el código que está marcado de color amarillo <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>, y si no utilizas ningún código jQuery, cópialo tal como está.

Realiza estos cambios:

He marcado de color azul a los 5 perfiles de mis redes sociales, tendrás que borrarlos y poner ahí en cada una de ellas, los perfiles de tus redes sociales correspondientes.

Eso es todo, ahora dale un clic en “Guardar” y ubícalo donde tú quieras.

Fácil verdad!

Recuerda suscribirte para que recibas directamente en tu email mis nuevas actualizaciones

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responmdere

Saludos

9 comentarios:

  1. Estimado Luis: segui los pasos que me indicaste y los botones de las redes sociales me aparecen en blanco. Me podrias indicar como solucionarlo?. Gracias. Para que lo veas te envio la dirección de mi blog:

    www.capacitarseonline.blogspot.com.ar

    ResponderEliminar
    Respuestas
    1. Hola copia el codigo tal como esta aqui, no borres nada has la prueba asi. Algo has de ver borrado ya que en mi blog de demos funciona perfectamente.
      Saludos.

      Eliminar
  2. Estimado Luis: segui todos los pasos y los botones de las redes sociales me aparecen en blanco. Me podrias decir como solucionarlo? Gracias. A continuación la dirección de mi blog:

    www.capacitarseonline.blogspot.com.ar

    ResponderEliminar
  3. Estimado Luis: segui los pasos que indicastes y los botones de las redes sociales se ven en blanco. Me podrias ayudar a resolverlo? Gracias. A continuación el blog para que veas como quedo:

    www.capacitarseonline.blogspot.com.ar

    ResponderEliminar
  4. Estimado Luis: segui los pasos correspondientes y los botones de las redes sociales salen en blanco. Como puedo resolverlo? Gracias. A continuación el blog para que lo veas:

    www.capacitarseonline.blogspot.com.ar

    ResponderEliminar
  5. Buenas, me podría decir si este widget lo puedo insertar en wordpress y cómo.
    Gracias.

    ResponderEliminar
  6. Hola, que tal, muchas gracias ante todo por tus aportaciones que nos ayudan a los que estamos interesados en este mundillo. He utilizado este codigo y todo bién, el problema viene cuando quiero sustituir tus imagenes por a imagenes que yo he personalizado, no entiendo porque no consigo que salga ninguna imagen cuando pongo mi ruta... estoy repasando y repasando y no me explico cual puede ser la razón. Muchas gracias..puedes verlo si quieres en

    m.parqueeuroparestauracion.com

    ResponderEliminar
    Respuestas
    1. Tienes que cambiar correctamente las direcciones de las URLs de las imagenes, por ejemplo http://3.bp.blogspot.com/-1wb-O4GG6DQ/UPFOe03M-lI/AAAAAAAAA4g/1015-y7FaYU/s1600/Twitter.png cambia correctamente con la imagen tuya y verifica su tamaño. Saludos

      Eliminar
  7. Hola amigo Luis, gracias por compartir todos estos widget con nosotros, pero me gustaría colocar en mi blog el que tienes en la parte izquierda con el boton de me gusta, twitter, google +, compartir, etc. Aquí te paso el link de una imagen especificando claramente.
    Espero tu respuesta, muchas gracias de antemano.
    Link: http://s2.subirimagenes.com/otros/previo/thump_9129141pregunta.jpg

    ResponderEliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios