Author
Hi I'm a sixteen years old girl from Indonesia. Stalk me here.
Tutorials
All the list of tutorials, please click here. Thank you.
Credit
Tempelate by yours trully. Do not open my page source. I will respect you if you're respect me.

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^.^