add

¿Cómo agregar un widget caja de seguidores Google+ slide out en mi página web?


¿El mejor código simple para insertar en un widget caja de los seguidores de mi página de Google+ o de mi perfil, y así me puedan seguir? ¿Caja slide seguidores de Google+? Es fácil de utilizar un simple código y convertirlo en una caja slide out para mostrar los seguidores de su página de Google+ o de su perfil de Google+, y así los usuarios que visitan sus páginas web o blogs se suscriban y lo sigan fácil mente por medio de esta increíble caja de Google+ slide out. Al insertar el código la caja de Google+ slide out se mostrara a lado izquierdo de su página web, blog, Blogger, Wordpress etc. Vamos a utilizar un código ligero el cual no le causara ningún error en su página web. Este código sirve para utilizarlo en cualquier página web sea, Blogger, Wordpress, blogs, etc.

¿Cómo agregar un widget caja de seguidores Google+ slide out en mi página web?

Mire su demostración en la siguiente página web de demos

http://appinventorenespanol.blogspot.com/

¡Te gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño

¿Cómo agregar un widget caja de seguidores Google+ slide out en mi página web?

3 Abre “Añadir un gadget

¿Cómo agregar un widget caja de seguidores Google+ slide out en mi página web?

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

¿Cómo agregar un widget caja de seguidores Google+ slide out en mi página web?

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

<style>  .NBT-gplusslide {      position: fixed;      z-index:9;      top: 100px;      left: 0;      -webkit-transition-duration: 1s;      -moz-transition-duration: 1s;      -o-transition-duration: 1s;      transition-duration: 1s;  }  .NBT-gpluscontainer {      height:270px;      width:291px;      border:2px solid #FF0000;      ;      border-radius:5px;      -moz-border-radius:5px;      -webkit-border-radius:5px;      background:#dcdcdc;      position: fixed;      z-index:9;      top: 100px;      left: -295px;      -webkit-transition-duration: 1s;      -moz-transition-duration: 1s;      -o-transition-duration: 1s;      transition-duration: 1s;  }  .NBT-gplusslide:hover {      left:295px;  }  .NBT-gplusslide:hover .NBT-gpluscontainer {      left: 0;  }  </style>  <div class="NBT-gplusslide">    <img src="http://1.bp.blogspot.com/-Qac7GrbZa2w/VRAsIvllaEI/AAAAAAAAIW4/dx-C4_XhML4/s1600/google%2B-ayudadeblogger.png" />    <div class="NBT-gpluscontainer">  <center><b><span style="background-color: red; color: white;">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;Agregame Google+ &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</span></b> <div class="g-plus" data-action="followers" data-height="250" data-href="//plus.google.com/114283163993086871162" data-source="blogger:blog:followers" data-width="270">  </div>  <script type="text/javascript">  document.write( unescape( '<div style="text-align: right;">
<span style="font-size: x-small;">&nbsp;</span></div>
' ) );        (function() {          window.___gcfg = {'lang': 'en'};          var po = document.createElement('script');          po.type = 'text/javascript';          po.async = true;          po.src = 'https://apis.google.com/js/plusone.js';          var s = document.getElementsByTagName('script')[0];          s.parentNode.insertBefore(po, s);        })();      </script></center>    </div>  </div>

Realiza un solo cambio:

Cambia la dirección URL que está marcada de color azul //plus.google.com/114283163993086871162, por la dirección URL de tu perfil de Google+ o por la dirección URL de tu página de Google+.

Eso es todo, da un clic en “Guardar

¿Cómo agregar un widget caja de seguidores Google+ slide out en mi página web?

Insertar la caja de seguidores Google+ slide out en cualquier página web que no sea Blogger

Copia el siguiente código antes del cierre </body>

<style>  .NBT-gplusslide {      position: fixed;      z-index:9;      top: 100px;      left: 0;      -webkit-transition-duration: 1s;      -moz-transition-duration: 1s;      -o-transition-duration: 1s;      transition-duration: 1s;  }  .NBT-gpluscontainer {      height:270px;      width:291px;      border:2px solid #FF0000;      ;      border-radius:5px;      -moz-border-radius:5px;      -webkit-border-radius:5px;      background:#dcdcdc;      position: fixed;      z-index:9;      top: 100px;      left: -295px;      -webkit-transition-duration: 1s;      -moz-transition-duration: 1s;      -o-transition-duration: 1s;      transition-duration: 1s;  }  .NBT-gplusslide:hover {      left:295px;  }  .NBT-gplusslide:hover .NBT-gpluscontainer {      left: 0;  }  </style>  <div class="NBT-gplusslide">    <img src="http://1.bp.blogspot.com/-Qac7GrbZa2w/VRAsIvllaEI/AAAAAAAAIW4/dx-C4_XhML4/s1600/google%2B-ayudadeblogger.png" />    <div class="NBT-gpluscontainer">  <center><b><span style="background-color: red; color: white;">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;Agregame Google+ &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</span></b> <div class="g-plus" data-action="followers" data-height="250" data-href="//plus.google.com/114283163993086871162" data-source="blogger:blog:followers" data-width="270">  </div>  <script type="text/javascript">  document.write( unescape( '<div style="text-align: right;">
<span style="font-size: x-small;">&nbsp;</span></div>
' ) );        (function() {          window.___gcfg = {'lang': 'en'};          var po = document.createElement('script');          po.type = 'text/javascript';          po.async = true;          po.src = 'https://apis.google.com/js/plusone.js';          var s = document.getElementsByTagName('script')[0];          s.parentNode.insertBefore(po, s);        })();      </script></center>    </div>  </div>

Realiza un solo cambio:

Cambia la dirección URL que está marcada de color azul //plus.google.com/114283163993086871162, por la dirección URL de tu perfil de Google+ o por la dirección URL de tu página de Google+.

Eso es todo

Guardalo

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

emailEnviar por correo

2 comentarios:

  1. Respuestas
    1. Este truco funciona perfectamente, puedes verlo en mi blog de demos, tal vez algo estas haciendo mal. Saludos

      Eliminar

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 (33) 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 (11) 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