So are you using twitter? Would you like a nice box displaying your most recent tweets on your blog?I'm going to show you how to have something like this:First you need to add the HTML code to your blog so your blog will make a space for this box.1. Go into your Dashboard2. Design3. Page …
So are you using twitter? Would you like a nice box displaying your most recent tweets on your blog?
I’m going to show you how to have something like this:
First you need to add the HTML code to your blog so your blog will make a space for this box.
1. Go into your Dashboard
2. Design
3. Page Elements
4. Add Gadget
5. Choose the HTML/Javascript Gadget box and paste in the code below.
<div id=”twitter_div”><ul id=”twitter_update_list”></ul></div><script src=”http://twitter.com/javascripts/blogger.js” type=”text/javascript”></script><script src=”http://twitter.com/statuses/user_timeline/YOURTWITTERHANDLE.json?callback=twitterCallback2&count=5″ type=”text/javascript”></script>
See in the box where it says: YOURTWITTERHANDLE? You need to change that to your twitter name eg. proskatrina.
Ok, now SAVE. Drag the Gadget into the spot you would like to see it in your sidebar. If you preview it, the box would look pretty standard.
I added a little picture that says “Katrina Tweets” above that box. I made an image in photoshop and then inside the HTML box we just made above I placed the HTML code of that image that I had saved to photoshop. If this doesn’t make sense then please email me.
So now we have a second step. This is the part where you add the code into your actual HTML of your entire blog. This will tell the box to look pretty.
1. Log in to the dashboard of your blog.
2. Click DESIGN
3. Click HTML
4. Find ] ] > < / b : skin > (I normally click CTRL F and type in ] ] > < / b : skin > which will easily locate this part for you)
5. Directly ABOVE ] ] > < / b : skin > paste in the code I have added below.
6. Save template and view your blog
#twitter_div {
text-align:left;
width:150px;
padding:0px;
}
#twitter_div ul {
list-style-type:none;margin:0px;padding:0px;
text-align:left;
margin:2px;
padding:4px;
font-size:100%;
border:5px solid #eeeeee;
}
Bits you can alter:
Look at that code above and you can change {border:5px solid #eeeeee;} to suit you. That is, your border could be any number like 1, 2 , 3 and your colour could be anything you choose. You’ll need to look up something like this to work out what numbers corresponds to what colours.
You can also change the width. Currently I have it set at 150px (look for that bit in the purple code). You can make it wider (200px) or whatever you desire.
For WordPress you will do the same:
1. Pick a HTML box and add the code.
2. Then add the styling in purple to the CSS section.
You may get stuck with this on WordPress.com (a free blog) as they don’t support javascript well.
If you get stuck please email me!
Be the first to read my stories
Get Inspired by the World of Interior Design
Thank you for subscribing to the newsletter.
Oops. Something went wrong. Please try again later.
