Tutorial: Cute Twitter Widget (with background) // Thursday, March 22, 2012
For the example:
First you MUST know that I made this widget by myself. Do NOT copy this tutorial, altough you already ask for my permission ~(^_^~) I don't like everyone who reblog my codes. Or if you dare, MAKE SURE don't get caught by me. Or I'll hunt you down.
Let's start.
Copy and edit this codes:
<div style="background-image:url(URL BACKGROUND); background-repeat: no-repeat; text-align: center;width:200px; height:200px; ">
<center><script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 6,
interval: 6000,
width: 190,
height: 190,
theme: {
shell: {
background: 'transparent',
color: 'transparent'
},
tweets: {
background: 'transparent',
color: '#000000',
links: '#000000'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('chocolettha').start();
</script>
<a href="https://twitter.com/chocolettha" class="twitter-follow-button" data-show-count="false" data-lang="en" data-size="tiny" data-width="148px">Follow @chocolettha</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</center>
Marked:
Red, change with your own background URL.
Blue, width and height of the background twitter section.
Violet, width and height of the twitter widget.
Orange, colors of the font and the link.
Green, change with your own Username.
For Tempelate Designer:
1. Dashboard >>Design >>Page Element >>Add Gadget >>HTML/Javascript.
2. Paste these codes.
3. Save.
4. Done.
For BlogSkins Tempelate:
1. Dashboard >>Tempelate.
2. Paste these codes on your sidebar/whatsoever.
3. Remember! every codes on BlogSkins aren't same.
4. Preview, save.
5. Done.
Remember! DO NOT COPY THIS TUTORIAL. Thank you for the respect^.^