This time, I will try to share by giving a tutorial on how to make a twitter widget with a beautiful background. The first thing we need, of course, the background image as a full view of the widget. For more convenience, you may take a background image that I use HERE. Please save the images on the 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-url-image-background) 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>
<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 needs to be changed are: bakground url address of your image is red, and your Twitter user name that is blue. Completed, please save your widget and see the results.
6 comments:
Thanks a lot, but there is still confusion of twitter link on whole image instead of small link.
Thanks for visited me. You do not use a complete link on your twitter link for this widget. But only put your twitter username.
Thanks for visited me. You do not use a complete link on your twitter link for this widget. But only put your twitter username.
Cool, got it! I managed to change my background! Now it's really beautiful! Thank you
tahnks alot brother!
i want to ask you if I can put background image foreach tweet in the widget. i want to display each tweet in different background.
can i do that? if Yes, How?
appreciate your help.
very thanks for this guide.
Is there a way to change the font face?
Post a Comment