Tuesday, September 14, 2010

How to Created Elegant Twitter Widget

Twitter is a social networking site one of the most popular today. It is undeniable that Twitter has become the medium of friends who are quite effective. Not infrequently did the celebrities communicate with his fans through this site. Even though the politicians make Twitter as political propaganda media.

This time, I will try to share with a tutorial about how to make widgets for your tweet on your blog. For example, please look at my twitter widget on my right sidebar. The first thing we need, of course, the background image as a full view of the widget. For more convenience, you can take a background image that I use HERE. Please save these images on a site first image providers such as ImageShack, Photobucket, etc. After that, please open your template design tab, add the widget HTML / Javascript by entering the code below:

<div style='background:url(your image url link) no-repeat; padding-top:65px;padding-left:12px;'>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 3000,
width: 275,
height: 255,
theme: {
shell: {
background: '#transparent',
color: '#555555'
},
tweets: {
background: '#transparent',
color: '#222222',
links: '#3b5998'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: false,
timestamp: false,
avatars: false,
behavior: 'default'
}
}).render().setUser('bloggermaps').start();
</script>
</div>

The code that you need to replace is: bakground url address of your image is red, and your twitter user name in blue. Completed, please save your widget and see the results.

3 comments:

  1. Any idea if there's a way to filter out tweets with profanity?

    ReplyDelete
  2. why the background doesnt show??
    http://blogger-pinoy.blogspot.com/

    ReplyDelete