Gadget/Cuadro de ultimos tweets

Para todos los usuarios de twitter que tienes una web acargo en esencial mantener informados a nuestros usuarios de las actualizaciones o acontecimientos, y que mejor manera por medio de los tweets, pero no simplemente seran mostrado los tweets si no que tambien estaran rodeados de un vistoso y elegante cuadro.

En el cuadro estaran las 3 tweets mas recientes, acomodados cronologicamente, es maravilloso saber que puedes comunicarte con tus visitantes desde cualquier parte, aqui les dejo una imagen de como luce el cuadro:



Como pueden ver el cuadro luce muy bien, asi que para ponerlo en nuestras web hay que seguir los siguientes pasos, como todos sabran lo primero es darle forma y estructura al cuadro por medio de css, he aqui el codigo css del cuadro, Recuerden que esto es un codigo css y lo deven pegar en CSS-CODE

#twitter {
margin-left:4px;
}

#twitter #twitter_update_list {
background:url(http://img.webme.com/pic/p/pruebassouldhcack/bk_twitter_box_top.png) 0 0 no-repeat;
padding:3px 15px 0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
font-style:italic;
line-height:125%;
color:#666;
}

#twitter #twitter_update_list li{
list-style-type:none;
padding-top:10px;
}

#twitter #bottom {
height:36px;
background:url(http://img.webme.com/pic/p/pruebassouldhcack/bk_twitter_box_bottom.png) 0 0 no-repeat;
padding-left:63px;
padding-top:45px;
font-weight:bold;
}
 


Ya pegado el css que le da la forma y estructura al cuadro vamos a pasar al siguiente paso que es pegar el html del cuadro, este lo devemos pegar en donde querramos que se vea el cuadro de los utimos tweets. Tambien deveremos cambiar : Souldhack95 por el nombre de usuario de su tweeter, tambien podemos cambiar el numero: 3 por el numero de tweets que queremos que se muestren. Recuerden que esto es un codigo HTML y lo deven pegar en donde quieran que este el cuadro de los utimos tweets.

<!-- Begin #twitter -->
<div id="twitter">
<div id="twitter_update_list">
</div>
<div id="bottom"><a href="http://twitter.com/souldhack95">Follow Us on Twitter!</a></div>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/souldhack95.json?callback=twitterCallback2&count=3"></script>
<!-- End #twitter -->


Con esto hemos acabado de crear nuestro cuadro de ultimos tweets, sin duda un cuadro muy elegante y a la ves practico, alguna duda haganmelo saber



No hay comentarios.

Con tecnología de Blogger.