add

¿Cómo insertar un deslizador social en mi página web?


¿Cómo insertar un deslizador social de redes sociales? En este nuevo tutorial aprenderán a como insertar de una forma simple y sencilla con un solo código, un estupendo deslizador social, el cual contiene los iconos más principales como Facebook, Twitter, Google+, Pinterest, Youtube y un medio de suscripción RSS. Un deslizador Social es un módulo simple que aparece en una posición fija, ya sea en la parte izquierda o derecha de la página. Al cierne sobre un icono, la barra se desliza hacia afuera utilizando transiciones CSS3, proporcionando una pequeña leyenda que se puede vincular a una página de la red social. Es un código que tiene una carga ligera, sirve para publicarlo en cualquier página web o blog.

¿Cómo insertar un deslizador social en mi página web?

El deslizador social está ubicado en la parte izquierda del blog de demos, mire su demostración en el siguiente blog

DEMO

¡Vamos a trabajar!

1 Ir a Blogger

2 Un clic en “Diseño

¿Cómo insertar un deslizador social en mi página web?

3 Abre “Añadir un gadget

¿Cómo insertar un deslizador social en mi página web?

4 Busca el widget “HTML/Javascript” ábrelo

¿Cómo insertar un deslizador social en mi página web?

5 Inserta las siguientes líneas de código en su interior

<style>
ul#jj_sl_navigation li a {background-color:#33353B;text-align:left;}
@media screen and (max-width: 768px){ul#jj_sl_navigation { display: none; }}
ul#jj_sl_navigation .custom1 a:hover{
                                               background-color: #000000;
                                      }
                                      ul#jj_sl_navigation .custom2 a:hover{
                                               background-color: #000000;
                                      }
                                      ul#jj_sl_navigation .custom3 a:hover{
                                               background-color: #000000;
                                      }
                                      ul#jj_sl_navigation .custom4 a:hover{
                                               background-color: #000000;
                                      }
                                      ul#jj_sl_navigation .custom5 a:hover{
                                               background-color: #000000;
                                      }
ul#jj_sl_navigation { left:0px;top:150px;}ul#jj_sl_navigation li:hover { margin-left: 0px;}ul#jj_sl_navigation li a { padding: 11px 0px 11px 10px;margin-left: -2px;}ul#jj_sl_navigation .facebook a {background-position: 144px 50%;background-image: url(http://2.bp.blogspot.com/-88_8MXex-zs/VMqafdG5pUI/AAAAAAAAIEk/1NGDQqidwcM/s1600/ayudadeblogger-facebook.png);}ul#jj_sl_navigation .twitter a {background-position: 145px 50%;background-image: url(http://2.bp.blogspot.com/-JqGctTmGKOY/VMqaf84iAUI/AAAAAAAAIEs/zkDopz7SO08/s1600/ayudadeblogger-twitter.png);}ul#jj_sl_navigation .google a {background-position: 145px 50%;background-image: url(http://4.bp.blogspot.com/-rvIxixob4Nw/VMqafgDq-II/AAAAAAAAIEo/lzW3DHscLH4/s1600/ayudadeblogger-google%2B.png);}ul#jj_sl_navigation .youtube a {background-position: 144px 50%;background-image: url(http://1.bp.blogspot.com/-gvRA4a0PtNo/VMqagbMm_AI/AAAAAAAAIE8/mQ1WBq3DgR4/s1600/ayudadeblogger-youtube.png);}ul#jj_sl_navigation .pinterest a {background-position: 145px 50%;background-image: url(http://1.bp.blogspot.com/---Mijr601Yk/VMqbXJK8R4I/AAAAAAAAIFM/7BX45OTbh7s/s1600/ayudadeblogger-pinterest.png);}ul#jj_sl_navigation .rss a {background-position: 145px 50%;background-image: url(http://4.bp.blogspot.com/-enAGmT941Ls/VMqaf_tCuSI/AAAAAAAAIEw/DjYijkpEGJI/s1600/ayudadeblogger-rss.png);}
ul#jj_sl_navigation li { margin-left: -140px;-webkit-transition: margin-left 0.3s;-moz-transition: margin-left 0.3s;-ms-transition: margin-left 0.3s;-o-transition: margin-left 0.3s;transition: margin-left 0.3s;}
</style>

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/hm7ll8kcvi0u5i2/mod_social_slider.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<ul id="jj_sl_navigation">
    <li class="facebook"><a href="http://facebook.com/ayudadeblogger" target="_blank">Follow via Facebook</a></li><li class="twitter"><a href="http://twitter.com/ayudadeblogger" target="_blank">Follow via Twitter</a></li><li class="google"><a href="https://plus.google.com/+Ayudadeblogger" target="_blank">Follow via Google+</a></li><li class="youtube"><a href="http://youtube.com" target="_blank">Follow via Youtube</a></li><li class="pinterest"><a href="http://pinterest.com" target="_blank">Follow via Pinterest</a></li><li class="rss"><a href="http://feeds2.feedburner.com/foroayudadeblogger" target="_blank">Follow RSS Feed</a></li></ul>

Realiza estos cambios:

He marcado del color azul en las direcciones URLs que tendrás que cambiarlas por las direcciones URLs de sus perfiles Sociales.

Nota: si ya utilizas en tu plantilla un jquery.min.js ya no es necesario insertar el código que está marcado de color rojo. Si no utilizas ningún jquery.js inserta todo el código tal como está en este tutorial

6 Una vez que hayas realizado los cambios, es hora de dar un clic en “Guardar

¿Cómo insertar un deslizador social en mi página web?

Mira tú nuevo deslizador social ubicado en la parte izquierda de tu blog de Blogger, y deja que los usuarios que visitan tu blog se suscriban a tus cuentas sociales.

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

0 comentarios:

Publicar un comentario en la entrada

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