Tutorial blogger: Cómo añadir gadget últimos tweets en blogger
En este tutorial voy a explicar cómo añadir un
gadget que incluya los últimos tweets que hemos escrito para que los seguidores de nuestro blog puedan leer lo que escribimos en Twitter.
Para el ejemplo del presente tutorial crearemos un gadget donde mostraremos una pestaña flotante en la columna derecha de nuestro blog que dará acceso a nuestros últimos tweets.
El gadget últimos tweets quedará de la siguiente manera en vuestro blog:
Ejemplo: Crear gadget con los últimos tweets. Cuando un lector de nuestro blog pinche en la pestaña flotante se mostrarán los últimos tweets que hemos escrito.
- Nos dirigimos a la sección Diseño de nuestro blogger.
- En este momento se abre una página donde se muestra una representación visual de nuestro blog.
- Para el ejemplo actual he creado el gadget últimos tweets en el panel lateral derecho, en dicho panel hacemos clic en la opción Añadir un gadget.
- En este momento se abrirá una ventana donde podremos seleccionar el tipo de gadget que queremos añadir.
- Dentro de la pestaña Lo básico seleccionamos la opción HTML/Javascript
- Al seleccionar dicha opción se abre una página donde configuraremos el gadget últimos tweets de la siguiente manera:
- Título: Escribir el título que queremos que se muestre al visualizar el gadget últimos tweets. En mi caso he puesto "Últimos tweets".
- Contenido: Espacio destinado para poner el código HTML que queremos mostrar en el gadget últimos tweets, en nuestro caso deberemos poner el siguiente:
<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}
#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}
#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;} #kakinetwork_right{z-index:10003;border:2px solid
#303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;} #kakinetwork_left{z-index:10003;border:2px solid #303030;background- color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;} </style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script> <div id="on"><div id="twitter_right" style="top: 20%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixb95clFEz3t-WSp3s50hyejOGzDnF2V5mST-WAFbJRjD-s4XreQwM-d-htbOqA5XIZ53BDOB23hA6ZCedaxwLWJv8WK_SVYGmIz-VF4Uc7ItDlVeAjplXlNvqRBYIhdl_kYhzQtOuFU/s320/allbloggingtips.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 260,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('masetru').start();</script></div></div></div> </div>
En el código de arriba deberéis sustituir el texto que aparece en rojo por vuestro nombre de usuario de Twitter.
Si te ha gustado el artículo sobre
cómo añadir gadget últimos tweets en Blogger puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.
ARTÍCULOS QUE TE PUEDEN INTERESAR
Cómo guardar la configuración de una red wifi en Windows 7
Cómo abrir puertos windows 7
Atajos de teclado de Windows
Windows 7 no muestra la fecha
