add

¿Cómo insertar de forma flotante una caja de mis publicaciones de Twitter?


¿Agregar una caja de Twitter en mi página web de forma flotante? ¿Caja de Twitter con mis publicaciones flotante slide? ¿Widget de Twitter flotante slide? ¿Widget de Twitter slide para mi blog de Blogger simples pasos? En este post aprenderás a insertar de una forma fácil y sencilla un widget de Twitter de forma flotante en la cual aparecerá cada vez que paces el cursor por el icono de Twitter, mostrara lo que hayas compartido en tu cuenta de Twitter, esto hará que los usuarios que visitan tu blog puedan ver de forma rápida lo que compartiste con tus seguidores en tu cuenta personal de Twitter, generando más vistas de tu blog o página web.

Nota: este truco sirve para mostrarse en cualquier página web sea Blogger, Wordpress, Joomla, etc.

¿Cómo insertar de forma flotante una caja de mis publicaciones de Twitter?

Debes seguir las instrucciones tal como lo muestro en este tutorial

Pueden ver su demostración en el siguiente blog de ejemplos

DEMO


¡Les gusto verdad!

Vamos a trabajar

Instrucciones de Instalación

1 Ir a Blogger

2 Un clic en “Diseño

¿Cómo insertar de forma flotante una caja de mis publicaciones de Twitter?

3 Un clic en “Añadir un gadget

¿Cómo insertar de forma flotante una caja de mis publicaciones de Twitter?

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

¿Cómo insertar de forma flotante una caja de mis publicaciones de Twitter?

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

<style>
#flotante1 {
position:fixed;
top:100px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1002;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante1:hover, #flotante2:hover, #flotante3:hover {
right:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left:-45px;
width:238px;
height:400px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}
</style>

<!-- Primera pestaña -->
<div id='flotante1'>
<img src='http://4.bp.blogspot.com/-NFdkdmaoMTM/Va6Nrqu9jcI/AAAAAAAAJFU/a0-rTK_o2z0/s1600/ayudadeblogger-twitter.png' style='float:left;'/>
<div style='background: #0084B4; height:400px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'>
            <a class="twitter-timeline"  href="https://twitter.com/ayudadeblogger" data-widget-id="623555209915166720">Tweets por el @ayudadeblogger.</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
         
</div></span></div></div>


6 Realiza este cambio

Borra todo el código que está marcado de color azul y remplázalo por el código que te proporcionara la página de Twitter.

7 Un clic en “Guardar” eso es todo

¿Cómo insertar de forma flotante una caja de mis publicaciones de Twitter?

8 Para obtener el código del widget de Twitter debes seguir las siguientes instrucciones

Abre este enlace


Sigue la secuencia de las siguientes imágenes

¿Cómo insertar de forma flotante una caja de mis publicaciones de Twitter?
¿Cómo insertar de forma flotante una caja de mis publicaciones de Twitter?
¿Cómo insertar de forma flotante una caja de mis publicaciones de Twitter?
¿Cómo insertar de forma flotante una caja de mis publicaciones de Twitter?
¿Cómo insertar de forma flotante una caja de mis publicaciones de Twitter?

Copia todo el código que te proporciono Twitter en el paso 6 de este post, elimina el código que está marcado de color azul y remplázalo por tu nuevo código de Twitter, eso es todo.

¡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