Luis Chávez
add

Widget Botón social slide para página web


¿Widget botón social slide para Blogger? ¿Agregar un widget social en mi blog de Blogger con simples pasos? ¿Código de botón social slide para mi blog o página web? Estas son algunas de las preguntas comunes que realizan los usuarios en los buscadores. Este widget botón social slide lo podrán ubicar en un widget, en la entrada de un post, etc. Lo que nos va a mostrar este botón social son: Facebook, Twitter, Google+, y el botón RSS de nuestro Feed. En este botón social slide podrán insertar los perfiles sociales de sus cuentas, y generaran más vistas de sus páginas gracias a la suscripción en sus redes sociales. Vamos a copiar un simple código en un widget “HTML/javascript”. Los usuarios de la red que no utilicen la plataforma de Blogger como: Wordpress, Joomla, etc. podrán insertar este código donde mejor les parezca, no les causara ningún error al momento de la instalación.

Widget Botón social slide para página web

Mire su demostración en la siguiente página a continuación

DEMO

¡Te gusto verdad!

¡Vamos a trabajar!

Para insertar en Blogger

1 Ir a Blogger

2 Un clic en “Diseño

Widget Botón social slide para página web

3 Abre “Añadir un gadget

Widget Botón social slide para página web

4 Busca el widget que dice “HTML/Javascript” ábrelo

Widget Botón social slide para página web

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

<style>
#bssocialmenuslide {
  margin:0;
  padding:0;
  width: 30em;
  height: 4.5em;
  overflow:hidden;
  }
#bssocialmenuslide li {
  display:inline;
  list-style-type:none;
  }
#bssocialmenuslide li a {
  display:block;
  float:left;
  text-decoration:none;
  margin:0;
  }
#bssocialmenuslide li a img {
  opacity:0.7;
  margin:0.5em;
  border:0;
  float:left;
  }
#bssocialmenuslide li a span {
  display:none;
  }
#bssocialmenuslide li a:hover {
  background:transparent;
  }
#bssocialmenuslide li a:hover span {
  width:7em;
  color:#aaa;
  display:block;
  cursor:pointer;
  float:left;
  }
#bssocialmenuslide .h2 {
  margin:0 5px;
  padding:0;
  color:#fc0;
  font-variant:small-caps;
  font-size:1em;
  border:0;
  }                                                                                                                                       <!--www.ayudadeblogger.com-->
  </style>
  <ul id="bssocialmenuslide">
  <li>
    <a href="https://www.facebook.com/ayudadeblogger"><img src="https://lh5.googleusercontent.com/-uAEIdl5UdOw/UoluNptpqdI/AAAAAAAAMDw/PVbciGu4vAQ/s256/facebook%2520off.png" alt="facebook" width="50" height="50" title="Facebook" />
     <span><br />
      <b class="h2">Facebook</b><br />
      Suscríbete
     </span>
    </a>
   </li>
  <li>
    <a href="https://twitter.com/ayudadeblogger">
     <img src="https://lh6.googleusercontent.com/-pxxQ91Uuo_g/UoludgzuuWI/AAAAAAAAMJI/LJ-Lu9Sct1s/s256/twitter%2520off.png" alt="twitter" width="50" height="50" title="twitter" />
     <span><br />
      <b class="h2">Twitter</b><br />
      Suscríbete
     </span>
    </a>
   </li>
   <li>
    <a href="https://plus.google.com/+ayudadeblogger"><img src="https://lh3.googleusercontent.com/-9tRbIz-3Z0k/UoluT1KukbI/AAAAAAAAMF4/lRNk__avndg/s256/google%252B%2520off.png" alt="Google plus" width="50" height="50" title="=Google plus" />
     <span>
      <br />
      <b class="h2">Google +</b><br />
      Suscríbete
     </span>
    </a>
   </li>
   <li>
    <a href="http://feeds2.feedburner.com/foroayudadeblogger"><img src="https://lh4.googleusercontent.com/-EVVwfYex7Ok/UoluaX2pTsI/AAAAAAAAMH8/3dmzLOzsfG0/s116/rss%2520off.png" alt="Rss" width="50" height="50" title="Rss" />
     <span><br />
      <b class="h2">Rss Feed</b><br />
        Suscríbete
     </span>
    </a>
   </li>
   <li>
  </li></ul>

Realiza estos 4 cambios:

Cambia donde dice https://www.facebook.com/ayudadeblogger por la dirección URL de tu página de Facebook
Cambia donde dice https://twitter.com/ayudadeblogger por la dirección URL de tu página de Twitter
Cambia donde dice https://plus.google.com/+ayudadeblogger por la dirección URL de tu página de Google+
Cambia donde dice http://feeds2.feedburner.com/foroayudadeblogger por la dirección URL de tu página FeedBurner


Ahora da un clic en “Guardar” ubica tu widget social donde tú quieras

Insertar el botón social slide en otra página web que no sea Blogger

Copia el siguiente código en modo HTML

<style>
#bssocialmenuslide {
  margin:0;
  padding:0;
  width: 30em;
  height: 4.5em;
  overflow:hidden;
  }
#bssocialmenuslide li {
  display:inline;
  list-style-type:none;
  }
#bssocialmenuslide li a {
  display:block;
  float:left;
  text-decoration:none;
  margin:0;
  }
#bssocialmenuslide li a img {
  opacity:0.7;
  margin:0.5em;
  border:0;
  float:left;
  }
#bssocialmenuslide li a span {
  display:none;
  }
#bssocialmenuslide li a:hover {
  background:transparent;
  }
#bssocialmenuslide li a:hover span {
  width:7em;
  color:#aaa;
  display:block;
  cursor:pointer;
  float:left;
  }
#bssocialmenuslide .h2 {
  margin:0 5px;
  padding:0;
  color:#fc0;
  font-variant:small-caps;
  font-size:1em;
  border:0;
  }                                                                                                                                       <!--www.ayudadeblogger.com-->
  </style>
  <ul id="bssocialmenuslide">
  <li>
    <a href="https://www.facebook.com/ayudadeblogger"><img src="https://lh5.googleusercontent.com/-uAEIdl5UdOw/UoluNptpqdI/AAAAAAAAMDw/PVbciGu4vAQ/s256/facebook%2520off.png" alt="facebook" width="50" height="50" title="Facebook" />
     <span><br />
      <b class="h2">Facebook</b><br />
      Suscríbete
     </span>
    </a>
   </li>
  <li>
    <a href="https://twitter.com/ayudadeblogger">
     <img src="https://lh6.googleusercontent.com/-pxxQ91Uuo_g/UoludgzuuWI/AAAAAAAAMJI/LJ-Lu9Sct1s/s256/twitter%2520off.png" alt="twitter" width="50" height="50" title="twitter" />
     <span><br />
      <b class="h2">Twitter</b><br />
      Suscríbete
     </span>
    </a>
   </li>
   <li>
    <a href="https://plus.google.com/+ayudadeblogger"><img src="https://lh3.googleusercontent.com/-9tRbIz-3Z0k/UoluT1KukbI/AAAAAAAAMF4/lRNk__avndg/s256/google%252B%2520off.png" alt="Google plus" width="50" height="50" title="=Google plus" />
     <span>
      <br />
      <b class="h2">Google +</b><br />
      Suscríbete
     </span>
    </a>
   </li>
   <li>
    <a href="http://feeds2.feedburner.com/foroayudadeblogger"><img src="https://lh4.googleusercontent.com/-EVVwfYex7Ok/UoluaX2pTsI/AAAAAAAAMH8/3dmzLOzsfG0/s116/rss%2520off.png" alt="Rss" width="50" height="50" title="Rss" />
     <span><br />
      <b class="h2">Rss Feed</b><br />
        Suscríbete
     </span>
    </a>
   </li>
   <li>
  </li></ul>

Realiza estos 4 cambios:

Cambia donde dice https://www.facebook.com/ayudadeblogger por la dirección URL de tu página de Facebook
Cambia donde dice https://twitter.com/ayudadeblogger por la dirección URL de tu página de Twitter
Cambia donde dice https://plus.google.com/+ayudadeblogger por la dirección URL de tu página de Google+
Cambia donde dice http://feeds2.feedburner.com/foroayudadeblogger por la dirección URL de tu página FeedBurner


Eso es todo ahora guárdalo y mira tú nuevo widget social slide en tu pagina

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

0 comentarios:

Publicar un comentario en la entrada

Ayudadeblogger.com
Luis Chávez 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